单向数据流 v-bind:属性
绑定属性值,简写::属性
单向数据绑定:内存改变影响页面
<body>
<div id="app">
</div>
<script>
new Vue({
el: '#app',
template: `
<div>
<input type="text" v-bind:value='name'><hr/>
</div>
`,
data: function () {
return {
name: '哇哈哈'
}
}
})
</script>
</body>
复制代码
输入框的值随着name的变化而变化
双向数据流 v-model
只作用于有value属性的元素
双向数据绑定:内存改变影响页面,页面改变也会影响内存
<body>
<div id="app">
</div>
<script>
new Vue({
el: '#app',
template: `
<div>
<input type="text" v-bind:value='name'><hr/>
<input type="text" v-model='name'>
</div>
`,
data: function () {
return {
name: '哇哈哈'
}
}
})
</script>
</body>
复制代码
第二个输入框的值可以影响到第一个输入框
其原理是:
1、v-model输入框中的name发送改变
2、vue对象的name改变
3、v-bind:value输入框改变
事件绑定 v-on
v-on:事件名="表达式||函数名"
简写:@事件名="表达式||函数名"
事件可以是原生的,也可以是自定义的
<script>
new Vue({
el: '#app',
template: `
<div>
<input type="text" v-bind:value='name'><hr/>
<input type="text" v-model='name'><hr/>
<button v-on:click='name="name改变后"'>点击改变name变量</button>
</div>
`,
data: function () {
return {
name: '哇哈哈'
}
}
})
</script>
复制代码
- 点击触发自定义函数
<script>
new Vue({
el: '#app',
template: `
<div>
<input type="text" v-bind:value='name'><hr/>
<input type="text" v-model='name'><hr/>
<button v-on:click='change'>点击改变name变量</button>
</div>
`,
data: function () {
return {
name: '哇哈哈'
}
},
methods:{
change:function(){
this.name = this.name+"哇哈哈=";
}
}
})
</script>
复制代码
过滤器 filters
正常情况下,vue数据直接被模板获取,而filters
,允许在vue数据改变后,再被filters
加工一次,然后再被模板获取
<body>
<div id="app">
输入:<input type="text" name="" id="" v-model='instring'><br/>
输出:{{instring}}<br/>
翻转输出:{{instring | reversal}}<br/>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
instring: ''
}
},
filters:{
reversal(val){
// 字符串翻转
return val.split('').reverse().join('');
}
}
})
</script>
</body>
复制代码
侦听器 watch
<body>
<div id="app">
监听器<br />
姓:<input type="text" name="" id="" v-model='firstName'><br/>
名:<input type="text" name="" id="" v-model='lastName'><br/>
{{fullName}}<br/>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
</body>
复制代码
这里的function参数,第一个参数是变更后的值,其实还有第二个参数,就是变更前的值
- 开启深度监听
如果我们监听的不是一个基本类型,而是一个对象,那么就要开启深度监听才能检测到变化
<body>
<div id="app">
监听器<br />
姓:<input type="text" name="" id="" v-model='firstName.aa'><br/>
名:<input type="text" name="" id="" v-model='lastName'><br/>
{{fullName}}<br/>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
firstName: {aa:'Foo'},
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch: {
firstName:{
handler(val){
this.fullName = val.aa + ' ' + this.lastName
},
//开启深度监听
deep:true
},
lastName: function (val) {
this.fullName = this.firstName.aa + ' ' + val
}
}
})
</script>
</body>
复制代码
计算属性 computed
<body>
<div id="app">
监听器<br />
姓:<input type="text" name="" id="" v-model='firstName'><br />
名:<input type="text" name="" id="" v-model='lastName'><br />
{{fullName}}<br />
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
firstName: 'Foo' ,
lastName: 'Bar'
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
复制代码