类似抖音的短视频管理系统+Java后端+vue前端（15）
vue组件：把网页中的html+css+javascript封装起来，形成一个标签
普通网页的组件及通讯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}<br/>
<mydemo></mydemo>
<br/>
<hello :title = "title" @xiaoming="receiveMsgFromChild"></hello>
</div>
<div id="app2">
<mydemo></mydemo><br/>
</div>
<script>
//全局组件
Vue.component('mydemo', {
data: function () {
return {
msg1:"AAAAAAA"
}
},
template: '<div>{{msg1}}</div>'
})
var helloobj={
data:function(){
return{
msg2:"我是app 局部组件",
score:1,
}
},
props:["title"],
template:`<div>
<h1>{{msg2}}</h1> <br/>
<h2>...........{{title}}</h2>
{{score}}
<button @click="score=score+1">计数</button>
<button @click="addScore()">计数2</button><br/>
<button @click="ziChuanFu()">子组件给父组件发送消息</button>
</div>`,
methods:{
addScore:function(){
this.score = this.score+1;
},
ziChuanFu:function(){
this.$emit("xiaoming",{"xuehao":"额hi黑恶hi",age:1232})
}
}
}
var app = new Vue({
el:"#app",
data:{
msg:"123123",
title:"我是一个标题 来自父组件"
},
components:{
"hello":helloobj
},
methods:{
receiveMsgFromChild:function(data){
console.log(data)
}
}
})
var app1 = new Vue({
el:"#app2"
})
</script>
</body>
</html>
插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<hello>
<!-- 俱名插槽 -->
<template v-slot:ch2>
<h1>Here might be a page title</h1>
</template>
<button>difuhsdiuhfd</button>
</hello>
<img src="img/a.gif">
</div>
<script>
// 在组件之间填充内容，可以使用插槽slot
var obj = {
data:function(){
return{
msg1:"我是hello子组件"
}
},
template:`
<div>{{msg1}}</br>
<slot name='ch2'></slot>
<slot></slot>
</div>
`
}
var app = new Vue({
el:"#app",
components:{
"hello":obj
}
})
</script>
</body>
</html>
动态组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
<style>
ul{
width: 100%;
display: flex;
list-style: none;
position: absolute;
bottom: 0;
font-size: 40px;
font-weight: bold;
}
ul li {
flex: 1;
}
</style>
</head>
<body>
<div id="app">
<!-- keep-alive缓存组件的值 -->
<keep-alive>
<component :is = "is"></component>
</keep-alive>
<ul>
<li @click = "changeComponent('home')">home</li>
<li @click = "changeComponent('order')">order</li>
<li @click = "changeComponent('my')">my</li>
</ul>
</div>
<script>
var home = {
data:function(){
return{
score:1
}
},
template:`<div>AAAA...{{score}}
<button @click="score++">++</button></div>
`,
}
var order = {
template:`<div>BBBB</div>`,
}
var my = {
template:`<div>CCCC</div>`,
}
var app = new Vue({
el:"#app",
data:{
is:"home"
},
components:{
"home":home,
"order":order,
"my":my
},
methods:{
changeComponent(zhi){
this.is = zhi
}
}
})
</script>
</body>
</html>
非父子组件传输
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<helloa></helloa>
<hellob></hellob>
</div>
<script>
//事件总线传输非父子组件的消息（空的vue对象）
var bus = new Vue();
var obj1={
data:function(){
return {
msg1:""
}
},
template:`
<div>AAAAAAAAA
<br />
<span>接受b组件的消息:{{msg1}}</span>
<br/>
<button @click="sendMssege">向hellob传输消息</button>
</div>
`,
methods:{
sendMssege:function(){
bus.$emit("aa","来自组件A组件的问候")
}
},
//组件都加载完之后执行的函数
mounted(){
var that = this
bus.$on("bb",function(data){
console.log(data)
that.msg1 = data
})
}
}
var obj2={
data:function(){
return {
msg2:""
}
},
template:`
<div>BBBBBBBBBB
<br />
<span>接受a组件的消息:{{msg2}}</span>
<br/>
<button @click="sendMssege">向helloa传输消息</button>
</div>
`,
methods:{
sendMssege:function(){
bus.$emit("bb","来自组件B组件的问候")
}
},
//组件都加载完之后执行的函数
mounted(){
var that = this
bus.$on("aa",function(data){
console.log(data)
that.msg2 = data
})
}
}
var app = new Vue({
el:"#app",
data:{
msg:"123123132123"
},
components:{
"helloa":obj1,
"hellob":obj2,
}
})
</script>
</body>
</html>
过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|capitalMsg}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"abCDEFG"
},
filters:{
capitalMsg:function(value){
if(!value){
return ''
}
var zhi = value.charAt(0).toUpperCase()+value.slice(1)
return zhi.split("").reverse().join("")
}
}
})
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
<style>
@keyframes zhuan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="app">
{{msg}}<br/>
<input v-focus/><br />
<input v-focus1/><br />
<div id="hook-arguments-example" v-demo:foo.a.b="message">
</div>
<!-- 带有参数的自定义指令 -->
<div id="baseexample">
<p>Scroll down the page</p>
<!-- 让当前的p元素标签距离上边是200像素 -->
<p v-pin="1000">Stick me 200px from the top of the page</p>
</div>
<div id="dynamicexample">
<h3>...............Scroll down inside this section ↓</h3>
<p v-pin1:[direction]="80">I am pinned onto the page at 200px to the left.</p>
</div>
</div>
</body>
<script>
//注册一个全局自定义指令 v-focus
Vue.directive('focus',{
// 当被绑定的元素插入到 DOM 中时……
inserted:function(el){
// 聚焦元素
// el 相当于input对象
el.focus()
el.style.border = "10px solid pink"
}
})
// 输出钩子函数一些参数
// binding绑定了一参数 vnode虚拟节点
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
el.style.left = binding.value + 'px'
}
})
Vue.directive('pin1', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'animation')
// // style[s] = style.animation
//el.style[s] = binding.value + 'px'
// 有旋转的效果
el.style[s] = "zhuan 3s linear infinite"
}
})
var app = new Vue({
el:"#app",
data:{
msg:"qewoi2313iojioj",
direction:"top"
},
directives: {
focus1: {
// 指令的定义
inserted: function (el) {
// v-focus1 这个指令 让输入框变长
el.style.width = "900px";
}
}
}
})
</script>
</html>