评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
作者：互联网
| 评论案例 |
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; width: 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; width: 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>
html
<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>
js
标签：function,Vue,computed,msg,父传子,组件,data,name 来源： https://www.cnblogs.com/lakei/p/11099755.html