第 1 章：Vue 核心

🕗 发布于 2024-09-25 23:33 vue.js

1. Vue 简介

1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/：中文官网里面【教程】和【API】是比较重要的。用到api就去查询，实践当中记忆更牢靠。

风格指南：官方推荐写的一个代码风格
cookbook：编写vue的一些技巧
Awesome Vue.js：第三方库（报表之类的）

1.2. 介绍与描述

动态构建用户界面的渐进式 JavaScript 框架（渐进式类似于需要做什么功能，就往里面加对应的模块和插件，就像搭积木一样，你做一个小房子（小项目），只需要几块积木就行，做一个城堡（大项目）就需要很多积木块了。）
作者: 尤雨溪

1.3. Vue 的特点

遵循 MVVM 模式：MVVM（Model-View-ViewModel）是一种设计模式，用于构建用户界面应用程序，它将应用程序的业务逻辑（Model）与用户界面（View）分离开来，并通过ViewModel来作为中间层，处理数据的转换和用户界面的交互逻辑。
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目

1.4. 与其它 JS 框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟 DOM 技术

1.5. Vue 周边库

vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于 vue 的 UI 组件库(PC 端) ……

1.6 搭建 Vue 开发环境

1.6.1 Vue的script标签引入

先下载一个vue版本，然后添加到文件夹当中去通过<script>标签去引用

开发版本：vue.js；包含完整的警告和调试模式
生产版本：vue.min.js ；删除了警告，体积更小

1.6.2 安装 Vue 开发者工具：Vue.js devtools

打开浏览器开发者模式
将Vue.js devtools 文件拖动到扩展程序界面

1.6.3 阻止 Vue 在启动时生成生产提示

在Vue.config配置里面设置

<script type="text/javascript" >
Vue.config.productionTip = false  // 阻止 Vue 在启动时生成生产提示
</script>

2. 初识 Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为【Vue模板】；
Vue实例和容器是一一对应的，一个容器只能被一个实例去接管（一一对应的关系）；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}（插值语法）中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

a
a + b
demo(1)
x === y ? ‘a’ : ‘b’

js代码（语句）

if(){}
for(){}

总结就是在左边给一个变量可以接到右边的值：const x = ???;

2.1 初识 Vue 的案例

初识 Vue.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello, {{name.toUpperCase()}}, {{address}}</h1>
    </div>

    <script type="text/javascript" >
        Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:'#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，也可以是一个DOM元素对象
            data:{  // data中用于存储数据，数据供el（element）所指定的容器去使用，值我们暂时先写出一个对象
                name:'Vue',
                address:'中国'
            }
        })
    </script>
</body>
</html>

3. 模板语法

3.1 效果

在这里插入图片描述

3.2 模板的理解

html 中包含了一些 JS 语法代码，模板语法分为两种，分别为：

插值语法（双大括号表达式）{{}}
指令（以 v-开头）v-xxx

3.3 插值语法

功能: 用于解析标签体内容
语法: {{xxx}}，xxx 会作为 js 表达式解析，且可以直接读取到data中的所有属性。

3.4 指令语法

功能: 用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性，xxx 会作为 js 表达式被解析
说明：Vue 中有很多的指令，且形式都是：v-????，此处只是拿v-bind举个例子。

3.5 模板语法.html 案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
        <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
    </div>
</body>

<script type="text/javascript" >
    Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'Muko',
            school:{
                name:'百度',
                url:'https://www.baidu.com/'
            }
        }
    })
</script>
</html>

4. 数据绑定

Vue中有2种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面。
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

4.1 效果

在这里插入图片描述

4.2 单向数据绑定

语法：v-bind:href ="xxx"或简写为 :href="xxx"
特点：数据只能从 data 流向页面

4.3 双向数据绑定

语法：v-mode:value="xxx"或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

4.4 数据绑定案例：数据绑定.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/> -->

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            name: '张三'
        }
    })
</script>
</html>

5. el与data的两种写法

data与el的2种写法：

5.1 el的2种写法

5.1.1 写法一

new Vue时候配置el属性。
创建Vue实例前就想好要绑定哪个容器

const v = new Vue({
el:'#root',
data:{
name:'尚硅谷'
}

5.1.2 写法二

先创建Vue实例，随后再通过v.$mount('#root')指定el的值。
可以在创建好之后再绑定容器，更灵活
mount的含义：把容器里面所写的模板交给Vue实例进行解析，解析之后把解析完的内容重新放到（相当于挂载：mount）页面中的指定位置上去

const v = new Vue({
data:{
name:'尚硅谷'
}
})
console.log(v)
v.$mount('#root')

5.2 data有2种写法

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

5.2.1 对象式

new Vue({
el:'#root',
//data的第一种写法：对象式
data:{
name:'尚硅谷'
}
})

5.2.2 函数式

因为是函数，所以要return你所需要的数据

new Vue({
el:'#root',
//data的第二种写法：函数式
data(){  // 等同于data:function(){}
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'尚硅谷'
}
}
})

5.3 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

5.4 案例：.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //el的两种写法
    /* const v = new Vue({
        //el:'#root', //第一种写法
        data:{
            name:'李四'
        }
    })
    console.log(v)
    v.$mount('#root') //第二种写法 */

    //data的两种写法
    new Vue({
        el: '#root',
        //data的第一种写法：对象式
        /* data:{
            name:'李四'
        } */

        //data的第二种写法：函数式
        data() {
            console.log('@@@', this) //此处的this是Vue实例对象
            return {
                name: '李四'
            }
        }
    })
</script>

</html>

6. MVVM 模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel) ： Vue 实例对象

观察发现：

data中所有的属性，最后都出现在了vm身上。
vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

在这里插入图片描述

7. 数据代理

7.1 Object.defineProperty:

enumerable：控制属性是否可以枚举，默认值是false
writable：控制属性是否可以被修改，默认值是false
configurable：控制属性是否可以被删除，默认值是false
getter 方法：当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
setter 方法：当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值

<script type="text/javascript">
        let number = 18
        let person = {
            name: '张三',
            sex: '男'
        }

        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable: true, // 可枚举
            // writable: true, // 可修改
            // configurable: true // 可删除

            get() {  // 或者写 get:funtion or-another-name (){}
                console.log('有人读取age属性了')
                return number
            },
            set(value) {
                console.log('有人修改age属性了，且值是',value)
                number = value
            }
        })
    </script>

7.2 理解数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>

7.3 Vue 中的数据代理

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

在这里插入图片描述

7.4 数据代理案例

.html

<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
address:'宏福科技园'
}
})
</script>

8. 事件处理

v-on:xxx=“fun”
@xxx=“fun” （缩写）
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

8.1 绑定监听

事件的基本使用：

使用v-on:xxx或 @xxx（缩写）绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click="demo"和 @click="demo($event)"效果一致，但后者可以传参；

8.1.1 事件的基本使用案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
},
methods:{
showInfo1(event){
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('同学你好！')
},
showInfo2(event,number){
console.log(event,number)
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('同学你好！！')
}
}
})
</script>
</html>

8.2 事件修饰符

Vue中的事件修饰符：

prevent：阻止默认事件（常用）；阻止事件的默认行为 event.preventDefault()
stop：阻止事件冒泡（常用）；停止事件冒泡 event.stopPropagation()
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

8.2.1 事件修饰符案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>

<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>

<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>

<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>

<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e){
alert('同学你好！')
// console.log(e.target)
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
</html>

8.3 按键修饰符

keycode : 操作的是某个 keycode 值的键
keyName : 操作的某个按键名的键(少部分)

Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

8.3.1 键盘事件案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods: {
showInfo(e){
// console.log(e.key,e.keyCode)
console.log(e.target.value)
}
},
})
</script>
</html>

8.4 小技巧总结：

修饰符小技巧，修饰符可以连写来确保多个功能，比如阻止冒泡+阻止默认事件：@click.stop.prevent
修饰键小技巧：如果是ctrl后面指定按键触发事件，可以连写指定按键，例如ctrl + y就是@keyup.ctrl.y

9. 计算属性与监视属性

9.1 计算属性-computed

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来。
方法：在 computed 对象中定义计算属性。
使用：在页面中使用{{方法名}}来显示计算的结果。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

9.1.1 效果

在这里插入图片描述

9.1.2 计算属性实现案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</html>

9.1.3 计算属性简写

如果考虑好计算属性只用到读而不用修改的话，可以使用简写，即不写set方法；get方法简写：与计算属性方法名合体。

computed:{
//完整写法
/* fullName:{
get(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
} */
//简写
fullName(){  // funllName:function(){}
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
}

9.2 监视属性-watch

绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句：<button @click="isHot = !isHot">切换天气</button>

配置项：

handler：定义了当监听的数据发生变化时应该执行的具体操作。当监听的数据变化时，watch对应的handler 函数就会被调用。
immediate:true：初始化时让handler调用一下
deep:true：深度监视

9.2.1 监视属性

监视属性watch：

当被监视的属性变化时, 回调函数（handler）自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
1. new Vue时传入watch配置
2. 通过vm.$watch监视

9.2.2 监视属性案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例_监视属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
/* watch:{  // 监视写法一
isHot:{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
} */
})

// 监视写法二
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
</html>

9.2.3 深度监视

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）。
配置deep:true可以监测对象内部值改变（多层）。

备注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
使用watch时根据数据的具体结构，决定是否采用深度监视。

9.2.4 深度监视案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例_深度监视</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
{{numbers.c.d.e}}
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了')
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,// 开启深度监视
handler(){
console.log('numbers改变了')
}
}
}
})

</script>
</html>

9.2.5 监视属性简写

当配置项中不需要 immediate 和 deep 这两个配置项，只需要 handler 的时候，就可以简写

9.2.6 监视属性简写案例

const vm = new Vue({
watch:{
//正常写法
isHot:{
// immediate:true, //初始化时让handler调用一下
// deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
//简写
 isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
}
}
})

//正常写法
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})

//简写
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})

9.2.7 watch 对比 computed

computed和watch之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

9.2.8 watch 对比 computed 案例

需求：更改姓一秒之后再进行全名的计算

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_watch实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
</script>
</html>

10. class 与 style 绑定

在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

10.1 class样式

写法:class="xxx"，xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

10.2 style样式

data属性里面的样式名必须要是css里面存在的，写法为小驼峰

:style="{fontSize: xxx}"，其中xxx是动态值。
:style="[a,b]"，其中a、b是样式对象。

10.3 绑定样式案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}

.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}

.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false

const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>

</html>

11. 条件渲染

1.9.1. 条件渲染指令

v-if 与 v-else
v-show
1.9.2. 比较 v-if 与 v-show
如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

11.1 v-if

写法：

v-if="表达式"
v-else-if="表达式"
v-else="表达式"

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

11.2 v-show

写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

11.3 备注

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

11.4 条件渲染案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

<!-- v-else和v-else-if -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->

<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>

</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false

const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:0
}
})
</script>
</html>

12. 列表渲染

12.1 列表显示指令

遍历数组: v-for / index
遍历对象: v-for / key

v-for指令:

用于展示列表数据
语法：v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

12.1.1 基本列表案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>

<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>

<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>

<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello'
}
})
</script>
</html>

12.2 key 的原理

12.2.1 面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
- 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  - 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
  - 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
  - 创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key?
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

12.2.2 对比图

index 作为key
id 作为key

12.2.3 key 的原理的案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>key的原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
},
})
</script>
</html>

12.3 列表过滤

案例需求：页面展示姓名、年龄、性别，用户在input框里面输入关键字来进行模糊搜索，匹配的结果（过滤）将展示到页面上

在这里插入图片描述

12.3.1 用watch监听实现

<script type="text/javascript">
Vue.config.productionTip = false

//用watch实现
//#region 
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
})
//#endregion
</script>

12.3.2 用计算属性（computed）实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表过滤</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

//用watch实现
//#region 
/* new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
}) */
//#endregion

//用computed实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
}) 
</script>
</html>

12.3.3 总结

如果能用watch和computed实现，优先使用computed实现，代码更简洁。

12.4 列表排序

需求：点击“年龄升序”按钮，人员信息按照年龄升序排列，依次类推，降序是按照降序排列人员信息，原顺序则保持原来数组排列的顺序

在这里插入图片描述

12.4.1 列表排序具体实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表排序</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
computed:{
filPerons(){
// 列表过滤
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
// 只要不是0（转布尔为false），1 、2为真直接进判断
// 1为降序，其他（2）为升序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
}) 

</script>
</html>

12.5 数据更新时的一个问题

使用数组修改人员信息时，vue没有监测到于是页面没有相应的体现
{id:'001',name:'马老师',age:50,sex:'男'}

12.5.1 数据更新实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>更新时的一个问题</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
methods: {
updateMei(){
// this.persons[0].name = '马老师' //奏效
// this.persons[0].age = 50 //奏效
// this.persons[0].sex = '男' //奏效
// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
}
}
}) 

</script>
</html>

12.6 Vue 监测数据的原理_对象

在这里插入图片描述

加工一下就能做响应式了，这里的加工是给data数据创建了getter（获取数据）和setter（修改数据）方法

12.6.1 模拟数据监测

这里只写了一层数据的方法定义，但是vue做的更加完善，底层原理使用递归一直找下去直到没有对象，包括数组

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" >

let data = {
name:'尚硅谷',
address:'北京',
}

//创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data)
console.log(obs)

//准备一个vm实例对象
let vm = {}
vm._data = data = obs

function Observer(obj){
//汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj)
//遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
obj[k] = val
}
})
})
}
</script>
</body>
</html>

12.7 Vue.set() 方法

给对象添加属性，并且vue会自动给属性创建getter和setter方法。

Vue.set(target, key, val)
vm.$set(target, key, val)

12.7.1 Vue.set 的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>学校信息</h1>
<h2>学校名称：{{school.name}}</h2>
<h2>学校地址：{{school.address}}</h2>
<h2>校长是：{{school.leader}}</h2>
<hr/>
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性，默认值是男</button>
<h2>姓名：{{student.name}}</h2>
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
school:{
name:'尚硅谷',
address:'北京',
},
student:{
name:'tom',
age:{
rAge:40,
sAge:29,
},
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// 两种方法均可
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
})
</script>
</html>

12.8 Vue 监测数据的原理_数组

12.8.1 监测数据的原理_数组案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue监测数据改变的原理_数组</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>学校信息</h1>
<h2>学校名称：{{school.name}}</h2>
<h2>学校地址：{{school.address}}</h2>
<h2>校长是：{{school.leader}}</h2>
<hr/>
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性，默认值是男</button>
<h2>姓名：{{student.name}}</h2>
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
school:{
name:'尚硅谷',
address:'北京',
},
student:{
name:'tom',
age:{
rAge:40,
sAge:29,
},
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
})
</script>
</html>

12.9 总结 Vue 监视数据

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
1. 对象中后追加的属性，Vue默认不做响应式处理
2. 如需给后添加的属性做响应式，请使用如下API：
  Vue.set(target，propertyName/index，value)或
  vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
1. 调用原生对应的方法对数组进行更新。
2. 重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2. Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

12.9.1 总结 Vue 监视数据案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>总结数据监视</title>
<style>
button{
margin-top: 10px;
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button> <br/>
<button @click="addSex">添加性别属性，默认值：男</button> <br/>
<button @click="student.sex = '未知' ">修改性别</button> <br/>
<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
<button @click="addHobby">添加一个爱好</button> <br/>
<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
el:'#root',
data:{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
this.student.friends[0].name = '张三'
},
addHobby(){
this.student.hobby.push('学习')
},
updateHobby(){
// this.student.hobby.splice(0,1,'开车')
// Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '抽烟'
})
}
}
})
</script>
</html>

13. 收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
  1. v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  2. v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
1. lazy：失去焦点再收集数据
2. number：输入字符串转为有效的数字
3. trim：输入首尾空格过滤

13.1 收集表单数据案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>

14. 过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

14.1 语法

注册过滤器：
- 全局过滤器：Vue.filter(name,callback)
- 局部过滤器：new Vue{filters:{}}
使用过滤器：
- {{ xxx | 过滤器名}}
- v-bind:属性 = "xxx | 过滤器名"

备注：
3. 过滤器也可以接收额外参数、多个过滤器也可以串联
4. 并没有改变原本的数据, 是产生新的对应的数据

14.2 过滤器实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是：{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） -->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})

new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好，尚硅谷'
},
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
})

new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
</script>
</html>

15. 内置指令

15.1 常用内置指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

15.2 v-text 指令

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-text指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
}
})
</script>
</html>

15.3 v-html 指令

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
1. v-html会替换掉节点中所有的内容，{{xx}}则不会。
2. v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
1. 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。（被人获取cookies）
2. 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-html指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
}
})
</script>
</html>

15.4 v-cloak 指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 引入Vue -->
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>

<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</html>

15.5 v-once 指令（没有值）

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-once指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>

15.6 v-pre 指令（没有值）

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-pre指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 >当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>

16. 自定义指令

16.1 定义语法

局部指令：

new Vue({
directives:{指令名:配置对象}
})
// 或者
new Vue({
directives:{指令名:回调函数}
})

全局指令：

Vue.directive(指令名,配置对象)
// 或
Vue.directive(指令名,回调函数)

16.2 配置对象中常用的3个回调

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

备注：

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式（函数定义时函数名加引号，否则报错），不要用camelCase命名。

16.3 自定义指令案例

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。（函数实现）
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。（对象实现）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false

//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */

new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})

</script>
</html>

16.4 回顾一个DOM操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.demo{
background-color: orange;
}
</style>
</head>
<body>
<button id="btn">点我创建一个输入框</button>

<script type="text/javascript" >
const btn = document.getElementById('btn')
btn.onclick = ()=>{
const input = document.createElement('input')

input.className = 'demo'
input.value = 99
input.onclick = ()=>{alert(1)}

document.body.appendChild(input)

input.focus()
// input.parentElement.style.backgroundColor = 'skyblue'
console.log(input.parentElement)
}
</script>
</body>
</html>

17. Vue 实例生命周期

Vue.js 是一个构建用户界面的渐进式框架，它提供了一套完善的生命周期钩子，允许你在不同阶段对组件进行干预和处理。

在这里插入图片描述

Vue 生命周期
Vue 实例的生命周期指的是从创建、运行到销毁的整个过程。在这个过程中，Vue 提供了多个生命周期钩子，让你在不同阶段执行代码。主要的生命周期钩子包括：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用，此时实例已完成数据观测、属性和方法的运算，但挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：在 el 被新创建的 vm. $e l 替换，并挂载到实例上去之后调用该钩子，此时可以访问到 v m .$ el。
beforeUpdate：在数据变化之后，DOM 重新渲染之前调用，此时可以在这个钩子中进一步地更改状态。
updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁后被调用。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

回调函数
在编程中，回调函数是一个通过函数参数传递给另一个函数的函数，后者将在某个时间点被调用（即“回调”）。在 Vue.js 中，回调函数通常指的是作为参数传递给生命周期钩子的函数，或者在某些 Vue 方法中使用的函数，如 watch、computed 属性等。
钩子（Hooks）
在 Vue.js 中，钩子通常指的是生命周期钩子，它们是 Vue 实例生命周期的不同阶段的函数。你可以在组件的选项对象中注册这些钩子，以便在生命周期的特定时刻执行代码。除了生命周期钩子，Vue 还提供了渲染钩子（如 render）、组件级钩子（如 components）等。

理解 Vue 的生命周期和钩子对于编写更有效、更可维护的 Vue 应用至关重要，因为它们允许你在正确的时间点对组件进行控制和干预。

17.1 什么是生命周期？

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

17.1 引出生命周期案例

需求：让一句话逐渐变化透明度，要求使用vue去实现。（通过mounted来在初次挂载完成后调用mounted函数里面的回调函数）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引出生命周期</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-if="a">你好啊</h2>
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

 new Vue({
el:'#root',
data:{
a:false,
opacity:1
},
methods: {

},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
mounted(){
console.log('mounted',this)
setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
})

//通过外部的定时器实现（不推荐）
/* setInterval(() => {
vm.opacity -= 0.01
if(vm.opacity <= 0) vm.opacity = 1
},16) */
</script>
</html>

17.2 分析生命周期

17.2.1 分析生命周期案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>分析生命周期</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root" :x="n">
<h2 v-text="n"></h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="add">点我n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el:'#root',
// template:`
// <div>
// <h2>当前的n值是：{{n}}</h2>
// <button @click="add">点我n+1</button>
// </div>
// `,
data:{
n:1
},
methods: {
add(){
console.log('add')
this.n++
},
bye(){
console.log('bye')
this.$destroy()
}
},
watch:{
n(){
console.log('n变了')
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
},
})
</script>
</html>

17.3 总结生命周期

常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

17.4.1 总结生命周期案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引出生命周期</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
<button @click="opacity = 1">透明度设置为1</button>
<button @click="stop">点我停止变换</button>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

 new Vue({
el:'#root',
data:{
opacity:1
},
methods: {
stop(){
this.$destroy()
}
},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
mounted(){
console.log('mounted',this)
this.timer = setInterval(() => {
console.log('setInterval')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
beforeDestroy() {
clearInterval(this.timer)
console.log('vm即将驾鹤西游了')
},
})

</script>
</html>

原文地址：https://blog.csdn.net/2203_75300307/article/details/142135915

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

linux网络编程9
readyState（请求状态）：0为未初始化，1为正在加载，2为已经加载，3为交互中，4为完成；其是HTTP服务器与其他程序进行“交谈”的工具，通过CGI接口能在服务器端运行其他的程序；其最大的优点
阅读更多2024-09-27
springboot 工程读取自定义的xml文件
springboot 读 xml文件
阅读更多2024-09-27
Vulhub TheEther_1.0.1靶机详解
靶机TheEther_1.0.1速刷
阅读更多2024-09-27
JAVA MySQL或SQLSERVER处理大量update语句优化
在 MySQL 或者SQLSERVER 中处理大量 UPDATE 语句时，性能优化是一个关键问题。1、使用 CASE 语句进行批量更新。2、使用 JOIN 进行批量更新。
阅读更多2024-09-27
MySQL 之索引详解
索引是 MySQL 数据库中非常重要的一个概念，合理地使用索引可以大大提高数据库的查询效率。在设计和使用索引时，需要根据实际情况选择合适的索引类型，并尽量避免索引失效的情况。
阅读更多2024-09-27
CTF入门教程（非常详细）从零基础入门到竞赛，看这一篇就够了！
CTF（Capture The Flag）中文一般译作夺旗赛，在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式。CTF起源于1996年DEFCON全球黑客大会，以代替之前黑客们通过
阅读更多2024-09-27
ST188单光束反射式红外光电传感器心率测量原理
由于脉搏跳动时，血液的体积和压力会发生变化，导致血液的透光性也随之变化。传感器中的光敏元件（如光敏三极管）会接收到反射回来的红外光，并将其转换为电信号。由于脉搏跳动引起的血液透光性变化，导致光敏元件接
阅读更多2024-09-27
浙大数据结构：06-图3 六度空间
bfs稍难题
阅读更多2024-09-27
C++多态的实现方式
编译时多态（函数重载和模板）提供了高度的灵活性和类型安全，且没有运行时开销，但它们在需要动态类型判断的场景中力不从心。运行时多态（基于继承的虚函数、函数指针）允许程序在运行时根据对象类型做出决策，非常
阅读更多2024-09-27
【移植】一种快速移植OpenHarmony Linux内核的方法
本文面向希望将 OpenHarmony 移植到三方芯片平台硬件的开发者，介绍一种借助三方芯片平台自带 Linux 内核的现有能力，快速移植 OpenHarmony 到三方芯片平台的方法。不知道学习鸿蒙
阅读更多2024-09-27

第 1 章：Vue 核心

1. Vue 简介

1.1. 官网

1.2. 介绍与描述

1.3. Vue 的特点

1.4. 与其它 JS 框架的关联

1.5. Vue 周边库

1.6 搭建 Vue 开发环境

1.6.1 Vue的script标签引入

1.6.2 安装 Vue 开发者工具 ：Vue.js devtools

1.6.3 阻止 Vue 在启动时生成生产提示

2. 初识 Vue

2.1 初识 Vue 的案例

3. 模板语法

3.1 效果

3.2 模板的理解

3.3 插值语法

3.4 指令语法

3.5 模板语法.html 案例

4. 数据绑定

4.1 效果

4.2 单向数据绑定

4.3 双向数据绑定

4.4 数据绑定案例：数据绑定.html

5. el与data的两种写法

5.1 el的2种写法

5.1.1 写法一

5.1.2 写法二

5.2 data有2种写法

5.2.1 对象式

5.2.2 函数式

5.3 一个重要的原则

5.4 案例：.html

6. MVVM 模型

7. 数据代理

7.1 Object.defineProperty:

7.2 理解数据代理

7.3 Vue 中的数据代理

7.4 数据代理案例

8. 事件处理

8.1 绑定监听

8.1.1 事件的基本使用案例

8.2 事件修饰符

8.2.1 事件修饰符案例

8.3 按键修饰符

8.3.1 键盘事件案例

8.4 小技巧总结：

9. 计算属性与监视属性

9.1 计算属性-computed

9.1.1 效果

9.1.2 计算属性实现案例

9.1.3 计算属性简写

9.2 监视属性-watch

9.2.1 监视属性

9.2.2 监视属性案例

9.2.3 深度监视

9.2.4 深度监视案例

9.2.5 监视属性简写

9.2.6 监视属性简写案例

9.2.7 watch 对比 computed

9.2.8 watch 对比 computed 案例

10. class 与 style 绑定

10.1 class样式

10.2 style样式

10.3 绑定样式案例

11. 条件渲染

11.1 v-if

11.2 v-show

11.3 备注

11.4 条件渲染案例

12. 列表渲染

12.1 列表显示指令

12.1.1 基本列表案例

12.2 key 的原理

12.2.1 面试题：react、vue中的key有什么作用？（key的内部原理）

12.2.2 对比图

12.2.3 key 的原理的案例

12.3 列表过滤

12.3.1 用watch监听实现

12.3.2 用计算属性（computed）实现

1.6.2 安装 Vue 开发者工具：Vue.js devtools

12.8.1 监测数据的原理_数组案例

12.9.1 总结 Vue 监视数据案例

13.1 收集表单数据案例

14.2 过滤器实例

17.1 引出生命周期案例

17.2.1 分析生命周期案例

17.4.1 总结生命周期案例