| 评论案例 |
splice: (start 几位，替换（新增）内容）
splice（0,0，内容）在头部插入内容
splice(0,1) 把索引为0的往后删除1位
splice(0,1,内容）把索引为0的往后替换1位 替换的内容 就是 内容 内容可以是多个值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> span{ margin-left: 100px; cursor: pointer; /*鼠标手势变成手指*/ color: gold; } span:hover{ color: red; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="val"> <button @click="add">评论</button> </p> <ul> <li v-for="(info,index) in infos"> {{ info }} <span @click="del(index)">x</span> </li> </ul> </div>
<script>
new Vue({
el:'#app',
data:{
val:'', //输入框内容
infos:[1,3,3,4,1] // for循环所有的所有的内容
},
methods:{
del:function(index){
//splice:从哪个索引开始 操作位数（0，添加，1替换一位，234566就是替换2345位） 替换的内容（或者添加的内容）
this.infos.splice(index,1) //删除留言 两位参数
},
add:function () {
let val = this.val;
if(val){
this.infos.splice(0,0,val); //留言
this.val = '' //输入框置为空
}
}
}
})
</script>
| 实例成员值 computed |
1 在computed中定义的变量的值 = 绑定的变量 的函数返回值
2 在绑定的函数中出现的所有的 Vue变量都会被监听 就是在这个绑定变量的函数内出现的所有的 Vue变量（例如a,b）都会被监听，只要Vue变量（a,b）变化其中一个这个绑定变量的函数就执行一次
3 在这里绑定函数的变量不能再出现data中
<div id="app"> <p> 姓：<input type="text" v-model="first_name"> 名：<input type="text" v-model="last_name"> </p> <p> 姓名：<b>{{ full_name }}</b> </p> </div>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: '',
// full_name: ''
},
computed: {
//1在computed中定义的变量的值等于绑定的变量 的函数返回值
// 2在绑定的函数中出现的所有的vue变量都会被监听 就是在这个绑定变量的函数内部出现的所有的
// vue变量（例如a,b）都会被监听 只要vue变量(a,b)变化其中一个这个绑定变量的函数就执行一次
//在这里绑定函数的变量不能再data中出现
full_name: function () {
return this.first_name + this.last_name;
}
}
})
</script>
| 实例化成员值 watch |
watch 绑定函数的变量发生变化 函数被调用 函数里面定义的变量就会发生变化
绑定函数的变量要在data中定义
<div id="app"> <p> 姓名：<input type="text" v-model="full_name"> </p> <p> 姓：<b>{{ first_name }}</b> 名：<b>{{ last_name }}</b> </p> </div>
<script>
new Vue({
el:'#app',
data:{
full_name:'',
first_name:'',
last_name:'',
},
watch:{
//1 后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
//这里的绑定方法的变量需要再data里面定义
full_name: function () {
let res = this.full_name.split('');
this.first_name = res[0];
this.last_name = res.slice(1);
}
}
})
</script>
| Vue分隔符 区分和其他前端框架的变量 |
delimiters:
<div id="app"> {{ msg }} {{{ msg} ${ msg} </div>
<script>
new Vue({
el:'#app',
data:{
msg:'123'
},
delimiters: ['${','}'] //区分开始Vue变量还是 JQuery变量
})
</script>
| 组件的概念 |
组件：有html模板，有css样式，有js逻辑的集合体
根组件的模板就使用挂载点，子组件必须自己template（局部子组件，全局子组件）
<div id="app"> <h1>组件概念</h1> </div>
<script>
//组件：有html模板，有css样式，有js逻辑的集合体
//根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件，全局子组件）
new Vue({
el:'#app',
template:`
<div>
<h1 style="color:red">组件渲染的模板</h1>
<h2 @click="action">副标题</h2>
</div>
`,
data:{
},
methods:{
action:function () {
alert(123)
}
}
})
</script>
| 局部子组件 |
data要达到组件的复用，必须为每一个组件提供一个名称空间（作用域相互独立 每引用一次就像python每次实例化对象一样）
data的值就是一个存放数据的字典
需要满足上述条件 data值为一个可以产生名称空间的函数的返回值，返回值是一个字典
局部子组件必须在根组件的components中注册！！！
<div id="app"> <!--div.box>h1{标题}+（p.p${文本内容}*2）--> <!-- + 毗邻--> <!--<div class="box">--> <!--<h1>标题</h1>--> <!--<p class="p1">文本内容</p>--> <!--<p class="p2">文本内容</p>--> <!--</div>--> <abc></abc> <abc></abc> </div>
<script>
//定义局部组件
let localTag = {
//1 data要达到组件的复用，必须为每个组件提供一个名称空间（作用域）
// data的值就是一个存放数据的字典
// 需要满足1和2 data值为一个可以产生名称空间的函数的返回值，返回值是字典
data:function(){
return {
count:0,
//r:'' vue前后端通信定义的变量
}
},
template:`
<div class="box" style="border: solid; 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background:yellow">被点击了{{ count }} 下</p>
<!--<button @click="send"></button> 提交数据-->
</div>
`,
methods:{
action:function () {
this.count++
}
//结合JQuery完成组件与后台的交互
// send:function () {
// $.ajax({
// url:'',
// type:'post',
// data:'',
// success:function (data) {
// this.r = data
// }
// })
// },
// watch:{
// r:function (){
//
// }
// }
},
};
new Vue({
el:'#app',
//局部组件必须注册
components:{
'abc':localTag
}
})
</script>
| 全局子组件 |
全局子组件 需要再Vue.component中注册（组件名，{组件主体内容}）
标签中建议使用 连接符 ' - ' 语法命名，对应js中就使用驼峰体命名
<old-boy></old-boy>
<script>
//Vue.component(组件名，{组件主体内容});
Vue.component('oldBoy',{
data:function () {
return {
count:0
}
},
template:`
<div class="box" style="border: solid; 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: darkslategrey">被点击了 {{ count }}下</p>
</div>
`,
methods:{
action:function () {
this.count ++
},
}
});
//全局组件无需注册
new Vue({
el:'#app',
data:{
}
})
</script>
| 信息父传子 |
local-tag就可以理解为自定义标签，既然是标签使用msg变量值由父组件提供
local-tag标签代表的是子组件，owen为标签自定义属性
在子组件内部能拿到owen属性，就可以拿到父组件的信息
<div id="app"> <!--local-tag就可以理解为自定义标签，既然是标签使用msg变量值由父组件提供--> <!--local-tag标签代表的是子组件，owen为标签自定义属性--> <!--在子组件内部能拿到owen属性，就可以拿到父组件的信息--> <local-tag :owen="msg"></local-tag> </div>
<script>
//自定义标签 子组件
let localTag = {
//子组件拿自定义属性
props:['owen'],
template:`
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
};
new Vue({
el:'#app',
data:{
msg:'父集的信息'
},
components:{
//'local-tag':localTag, 第一种写法
//localTag:localTag, 第一种简写
localTag //第二种简写 在页面中<local-tag>
}
})
</script>
| 信息子传父 |
<div id="app"> <h1>{{ title }}</h1> <global-tag @recv="get_title"></global-tag> </div>
<script> Vue.component('global-tag',{ template:` <div> <input type="text" v-model="msg"> </div> `, data:function () { return { msg:'' } }, watch:{ msg: function () { //只要msg发生变化，就将值同步给父组件 this.$emit('recv',this.msg) } } }); new Vue({ el:'#app', data:{ title:'父组件定义的标题' }, methods:{ get_title:function (msg) { this.title = msg } } }) </script>
按钮更新信息子传父
<div id="app"> <h1>{{ title }}</h1> <global-tag @recv="get_title"></global-tag> <!--全局组件--> </div>
<script> Vue.component('globalTag',{ template:` <div> <input type="text" v-model="msg"> <button @click="action">修改标题</button> </div> `, data:function(){ return { msg:'' } }, methods:{ action:function () { let msg = this.msg; //recv是自定义的标题 this.$emit('recv',msg) //提交用$emit } } }); new Vue({ el:'#app', data:{ title:'父组件定义的标题' }, methods: { get_title:function (msg) { this.title = msg } } }) </script>