文章目录
- 1，入门案例
- 2，双大括号
- 3，响应式特性
- 4，安装浏览器插件
- 5，指令v-html
- 6，v-show和v-if
- 7，v-else和v-else-if
- 8，v-on
- 9，v-bind
- 10，v-for
- 11，v-model
1，入门案例
第一步，导入Vue库。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
第二步，准备DOM，我们称之为模版。
<div id="app">
</div>
第三步，创建Vue实例，传入一个配置对象。
el：DOM的选择器。
data：存放数据。
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "你好，世界！"
}
})
</script>
第四步，在模版中书写Vue语法。
双大括号可以渲染实例的数据到页面上。
<div id="app">
<h1>{{msg}}</h1>
</div>
效果：
全部代码：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "你好，世界！"
}
})
</script>
2，双大括号
可以将JS表达式渲染到页面上。
重点：JS表达式。
<div id="app">
<h1>{{msg}}</h1>
<h1>{{1+1}}</h1>
<h1>{{Date.now()}}</h1>
<h1>{{"( ⊙ o ⊙ )啊！"}}</h1>
</div>
效果：
特点：
- 数据必须存在。
- 不能写语句。
- 不能用来渲染标签的属性。
3，响应式特性
数据变化，视图自动更新。
在浏览器的控制台输入：
vm.msg="哈喽，世界！"
vm是Vue实例的名称，msg是vm拥有的数据。
效果：
有了响应式数据，我们就无须亲自操作DOM了。
4，安装浏览器插件
https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd
解压，打开开发者模式，把crx文件拖进去即可。
5，指令v-html
指令是一些标签属性，有特殊的功能。
v-html可以设置元素的HTML内容。
<div v-html="msg"></div>
data: {
msg: "你好，世界！"
}
6，v-show和v-if
控制元素的显示与隐藏。
v-show：值为真，正常显示。值为假，display:none。
由css隐藏。
v-if：值为真，正常显示。值为假，不渲染。
不存在页面中。
<div id="app">
<div v-show="msg">你好，世界！</div>
<div v-if="msg">你好，世界！</div>
</div>
data: {
msg: true
}
7，v-else和v-else-if
配合v-if一起使用。
<div id="app">
<div v-if="msg>90">优秀</div>
<div v-else-if="msg>80">良好</div>
<div v-else-if="msg>60">及格</div>
<div v-else>不及格</div>
</div>
data: {
msg: 82
}
8，v-on
绑定事件。
值可以是内联语句。
<div v-on:click="msg++">你好，世界！{{msg}}</div>
data: {
msg: 82
}
可以是methods中的方法。
<div v-on:click="add">你好，世界！{{msg}}</div>
const vm = new Vue({
el: "#app",
data: {
msg: 82
},
methods: {
add() {
this.msg++
}
}
})
可以简写为@xxx。
<div @click="msg++">你好，世界！{{msg}}</div>
data: {
msg: 82
}
写成函数调用，就能传递参数。
<div v-on:click="add(3)">你好，世界！{{msg}}</div>
methods: {
add(v) {
this.msg += v
}
}
9，v-bind
设置标签的属性值。
<div v-bind:class="msg">你好，世界！</div>
data: {
msg: "82"
}
可以简写。
<div :class="msg">你好，世界！</div>
data: {
msg: "82"
}
10，v-for
基于数据，多次渲染元素。
(item,index) in xxx是固定写法。
也可以简写为item in xxx。
key属性，用来指定当前元素的唯一标识。值为字符串或者数字。
<li v-for="(item,index) in msg" key="item.id">{{item.name}}</li>
data: {
msg: [{
id: 1,
name: "三国演义"
}, {
id: 2,
name: "红楼梦"
}, {
id: 3,
name: "水浒传"
}, {
id: 4,
name: "西游记"
}]
}
11，v-model
表单数据双向绑定。
数据改变，表单跟着改变。
表单改变，数据跟着改变。
<input type="text" v-model="msg" />{{msg}}
data: {
msg: ""
}