1. 如何使用Vue.js?
1.1 直接引入
- <script src="./statics/vue.min.js"></script>
- 引入之后在全局就会有一个Vue Function
- cdn
-npm
1.2 vue的使用
<!DOCTYPE html>
<html>
<head>
<!--第一步：引入Vue，全局暴露一个Vue Function-->
<script src="./statics/vue.min.js"></script>
</head>
<body>
<!--第二步：声明领地（作用范围）
<div id="app">xxxx</div>
<script>
// 第三步：创建一个Vue实例
new Vue({
// 第四部：查找作用域（必须的参数）
el: "#app",
data: {
xxxx: "今晚去我家"
}
})
</script>
</body>
</html>
2. Vue.js的模板语法
<p>{{ xxxxx + xxxxx }}</p>
<p>{{ '今晚去我家' }}</p>
<p>{{ {'name': "鑫姐" } }}</p>
<p>{{ 1 > 2 ? "大于" : "傻逼" }}</p>
<p>{{ python + linux }}</p>
<p>{{ totalScore }}</p>
3. Vue.js指令系统
3.1 指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件
- 操作标签的文本值
v-text: 渲染文本值
v-html: 渲染原始标签
v-for: 处理丰富的数据结构
v-if, v-else-if, v-else: 判断标签是否显示
v-show：判断标签是否显示
渲染的开销
v-if：低
v-show：高
切换的开销
v-if：appendChild, removeChild 高
v-show：低
- 操作标签的属性（class，href，src）
v-bind:href=""
v-bind:class=""
小结：对于属性的操作，一定是通过动态的数据来进行增加或者删除的
- 绑定事件
v-on:click="myClick"
注意：属性通过vue绑定的时候，必须加上冒号
- 计算属性
- 可以监听多个值（只要数据修改，就触发重新计算）
- 页面一加载就计算
- 双向数据绑定
v-model
4. 轮播图