- 数据绑定
直接输出
<div id="app">
{{message}} 直接输出
</div>
var app = new Vue({
el : "#app",
data : {
message : "hello world"
}
})
input输入与message双向绑定
<div id="app">
<input type="text" v-model="message" />
</div>
var app = new Vue({
el : "#app",
data : {
message : "hello world"
}
})
数据只绑定一次
<div id="app">
<p v-once>{{message}}</p>
<p>{{message}}</p>
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el : "#app",
data : {
message : 1
},
created : function () {
this.message = 2
}
})
- 属性绑定
<div id="app">
<span v-bind:title="message"> 绑定title属性</span>
</div>
var app = new Vue({
el : "#app",
data : {
message : "span的title显示我"
}
})
可简写
<span :title="message" > </span>
- 判断条件
<div id="app">
<span v-if="message">如果message为true 显示，false不显示</span>
</div>
var app= new Vue({
el : "#app",
data : {
message : true
}
})
- 循环
<div id="app">
<ol>
<li v-for="item in datas"> {{item.name}} </li>
</ol>
</div>
var app = new Vue({
el:"#app",
data : {
datas : [
{name : 'xiao ming'},
{name : 'xiao fang'}
]
}
})
向数组中追加
app.datas.push({name:'xiao hua'})
- 事件监听
<div id="app">
<p> {{message}} </p>
<button v-on:click="reverse">翻转message</button>
</div>
var app = new Vue({
el:"#app",
data : {
message : '1.2.3'
},
methods : {
"reserve" : function () {
this.message = this.message.split('.').reverse().join('.')
}
}
})
可简写
<button @click="reverse"></button>
- HTML的引入
<div id="app" v-html="ol">
</div>
var app = new Vue({
el: '#app',
data: {
ol : '<ol><li>1111</li><li>2222</li></ol>'
}
})
- 组件的使用
<div id="app">
<my-name></my-name>
<my-name></my-name>
<my-name></my-name>
</div>
Vue.component('my-name',{
template : '<span>abcdef</span>'
})
var app2 = new Vue({
el : '#app2'
})
- 组件数据的绑定
<ol id="app">
<my-template v-for="item in list" v-bind:myitem="item" v-bind:key="item.id">
</my-template>
</ol>
Vue.component('my-template',{
props : ['myitem'],
template : "<li>{{myitem.name}}</li>"
})
var app = new Vue({
el : "#app",
data : {
list : [
{id : 1, name : '小芳'},
{id : 2, name : '小明'}
]
}
})
这里的props['myitem'] 只能是小写字母，不允许使用大写和其他字符("-")
- 防止属性被修改——使响应式系统无法追踪变化
<div id="app1">
{{message}}
<input type="text" v-model="message" />
</div>
var data = {
message : '123'
}
Object.freeze(data)
var app1 = new Vue({
el : "#app1",
data : data
})
message的值不随着输入改变
- vue的实例属性和方法
这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分
vm.$data
vm.$el
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 此回调函数将在 `vm.a` 改变后调用
})
https://vuefe.cn/v2/api/#search-form
- 实例生命周期钩子函数
在实例创建后调用
var app = new Vue({
data : {
a:1
},
created : function () {
this.a = 2
console.log(this.a)
}
})
created : 实例创建后调用
mounted : 实例挂载之后调用
updated : 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
destroyed : 实例销毁后调用
- 注意
不要在选项属性或者回调函数中使用[箭头函数]
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())
因为箭头函数会绑定父级上下文，所以 `this` 不会按照预期指向 Vue 实例，经常会产生一些错误
例如
Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function
- computed 属性
通过设置computed属性，不改变原始数据的值
<div id="app">
<p>{{reverse}}</p> olleh
<p>{{message}}</p> hello
</div>
var app = new Vue({
el : "#app",
data : {
message : 'hello'
},
computed : {
reverse : function () {
return this.message.split('').reverse().join('')
}
}
})
