实例成员之computed
<body>
<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>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: '',
// full_name: 'None',
},
computed: {
// 1.在computed中定义的变量的值等于绑定的函数的返回值
// 2.绑定的函数中出现的所有vue变量都会被监听
full_name: function () {
// let a = this.first_name;
// this.last_name
console.log('被调用了');
return this.first_name + this.last_name;
}
}
})
</script>
实例成员之watch
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<b>{{ first_name }}</b>
名：<b>{{ last_name }}</b>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
// 1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
full_name: function () {
let res = this.full_name.split('');
this.first_name = res[0];
this.last_name = res[1];
}
}
})
</script>
分隔符
<body>
<div id="app">
{{ msg }}
{{{ msg }
${ msg }
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['${', '}']
})
</script>
组件
<body>
<div id="app">
<!--div.box>h1{标题}+(p.p${文本内容}*2)-->
<abc></abc>
<abc></abc>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 定义局部组件
let localTag = {
// 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
// 2.data的值就是一个存放数据的字典
// 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
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: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods: {
action: function () {
this.count++
},
}
};
new Vue({
el: '#app',
data: {
},
// 局部组件必须注册
components: {
'abc': localTag
}
})
</script>
全局组件
<body>
<div id="app">
<!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy>
</div>
</body>
<script src="js/vue.js"></script>
<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: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods: {
action: function () {
this.count++
},
}
});
// 全局组件无需注册
new Vue({
el: '#app',
data: {
}
})
</script>
组件间的交互：父传子
<div id="app">
组件间的交互：子传父
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data: function () {
return {
msg: ''
}
},
methods: {