https://cn.vuejs.org/v2/guide/index.html
https://www.jianshu.com/p/1af66f3010c5
vue采用声明式渲染，最简单的例子如下：
1
2
3
4
5
6
7
8
9
10
| <div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
|
个人感觉有点类似jinjia2的字符串渲染
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
|
看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
vue指令：
v-text 数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性
v-html 类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性
v-show 根据表达式的真假来切换所绑定的dom的display属性 v-show=”true”
v-show用于控制dom的显隐，实际是控制了dom的css的display属性
v-if
v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if=”false”时，dom被直接删除掉；为true时，又重新渲染此dom；
v-else
v-else-if
v-for
id1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div v-for="list in List">{{list.name}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
List: [{
name: "tony",
age: "16"
},
{
name: "jack",
age: "18"
},
{
name: "tom",
age: "18"
}
]
}
})
</script>
|
v-on
缩写 @
参数：event
给dom添加一个事件监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
<div v-on:click="clickButton" v-text="buttonName"></div>
</div>
<script>
new Vue({
el: "#app",
data: {
buttonName: "旧名字"
},
methods: {
clickButton: function () {
this.buttonName = "新名字"
}
}
})
</script>
|