1.绑定DOM元素(v-bind)
v-bind:DOM元素="data里的字符名"
html:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
js:
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
2.条件语句(v-if)
v-if="data里的字符名",当data里的字符名为true时显示，false隐藏
html:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
js:
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
3.循环语句(v-for)
html:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
js:
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
4.事件绑定(v-on)
v-on:事件名="函数名" 在js中将函数名放于methods中
html:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
js:
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
5.双向绑定(v-model)
v-model="和上面相同的字符名"
html:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
js:
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
6.vue实例都会代理其data对象里所有的属性，就是vue实例和data对象里所有属性相同，各自随之变化。
js:
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
7.文本
(1)数据绑定最常见的形式是使用{{}}的文本插值
html:
<div id="demo">{{msg}}</div>
js:
data:{
msg:"hello vue"
}
{{msg}}将会被替代为对应数据对象上 msg 属性的值。无论何时，data里的 msg 属性发生了改变，插值处{{}}的内容都会更新。
(2) 通过使用 v-once指令，当data里的值改变时，插值处{{}}里的内容将不会改变
html:
<div id="demo">{{msg}}</div>
js:
data:{
msg:"hello vue"
}
网页上显示的是hello vue
当<div id="demo">{{msg}}</div>添加上v-once
<div id="demo" v-once>{{msg}}</div>
js:
data:{
msg:"hello vue111"
}
网页上仍然显示的是hello vue
8.纯HTML
{{}}会将数据解释为纯文本,而非HTML.为了输出真正HTML，需要使用指令v-html
html:
<div v-html="<p>hello</p>"></div>
9.v-bind
HTML的属性不能在{{}}中使用，应该使用v-bind
html:
<div v-bind:id="dynamicId"></div>
<div v-bind:title="contact"></div>
10.js表达式
vue支持js的表达式,
如：{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
但是只支持单个表达式，复杂的表达式无效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
11.指令缩写
(1)v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
(2)v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
12.计算属性（computed）
基础例子：
html:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
js:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
结果：
Original message: "Hello"
Computed reversed message: "olleH"
13.计算属性computed VS methods
用methods可以达到计算属性相同的功能，但是methods没有缓存，而计算属性有缓存，每次调用的时候从缓存里使用就行。如果不希望使用缓存，就使用methods
14.表单控件绑定(数据双向绑定)
(1)文本
html:
<div id="demo">
<input v-model="message" placeholder="edit me">
<p>
Message is {{message}}
</p>
</div>
js:
var app=new Vue({
el:'#demo',
})
(2)多行文本
html:
<div id="demo">
<span>Multiline message is:</span>
<p>
{{message}}
</p>
<br>
<textarea v-model="message"></textarea>
</div>
js:
new Vue({
el:'#demo'
})
(3)单个勾选框，勾选为true,否则为false
html:
<div id="demo">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
js:
new Vue({
el:"#demo",
})