​

开局准备 -- 拿功法装备

下面是Vue官网，进去下载 Vue.js -------- https://cn.vuejs.org/index.html

还有就是我们需要去下载Vue开发者工具 【我们在引入Vue.js，打开浏览器，会有提示我们去下载】

链接 -- https://devtools.vuejs.org/guide/installation.html

01-初识Vue 初识Vue：

1.想让Vue工作，就必须创建一个 new Vue({}) 实例，且要传入一个配置对象 el,data等；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}**中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；**

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； 注意区分：js表达式 和 js代码(语句)

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

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? 'a' : 'b'

2.js代码(语句)

(1). if(){}

(2). for(){}

引入Vue.js（后面就不打出来了，都需要引入）代码语言：javascript复制 准备好一个容器（一般只用装备一个容器就行，代码放在容器里面，也对于一个Vue实例）代码语言：javascript复制

new一个Vue实例代码语言：javascript复制 页面结果02-Vue模板语法 Vue模板语法有2大类：

1.插值语法 【用于标签内容，例

你好，{{name}}

】：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法 【用于标签里面属性前，】：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

准备一个容器代码语言：javascript复制

new一个Vue实例代码语言：javascript复制页面结果03-数据绑定 Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

备注：

1.需要给那个属性加单项绑定，就在前面加 v-bind ，例：v-bind:value=‘aaa’、v-bind:href='http...'

2.v-bind:value=‘aaa’ 简写为 :value=‘aaa’ ，即 v-bind: <==> :

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

备注：

1.双向绑定一般都应用在【表单类元素】上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值，即 v-model:value <==> v-model

普通写法代码语言：javascript复制 单向数据绑定：

双向数据绑定：
简写代码语言：javascript复制 单向数据绑定：

双向数据绑定：

你好啊

// 错误写法

new一个Vue实例代码语言：javascript复制页面结果04-el和data的两种写法

data与el的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法

(1).对象式

(2).函数式

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

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 如果是定时器等等是window管理的函数，this指向也是window，所以在这个时候我们需要用箭头函数

el的两种写法代码语言：javascript复制 const v = new Vue({

// （1）第一种写法

//el:'#root',

data:{

name:'尚硅谷'

}

})

console.log(v)

// （2）第二种写法 全局下

v.$mount('#root')data的两种写法代码语言：javascript复制 new Vue({

el: '#root',

// （1）data的第一种写法：对象式

data:{

name:'尚硅谷'

}

// （2）data的第二种写法：函数式

data() {

//此处的this是Vue实例对象

console.log('@@@', this)

return {

name: '尚硅谷'

}

}

})05-Vue的MVVM模型 MVVM模型

1. M：模型(Model) ：data中的数据（vue的一般js对象）

2. V：视图(View) ：模板代码（DOM页面）

3. VM：视图模型(ViewModel)：Vue实例，所以实例取名字一般为vm

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

注意：vm上所有的属性都可以加载出来代码语言：javascript复制

测试一下2：{{$options}}

测试一下3：{{$emit}}

测试一下4：{{_c}}

06-数据代理 内容较多 -- 分链接 ：

一、Vue2笔记--基础篇--06-数据代理（Object.defineproperty方法中的get()、set()）_KD℡的博客-CSDN博客

07-事件处理 内容较多 -- 分链接：

一、Vue2笔记--基础篇--07-事件处理_KD℡的博客-CSDN博客

08-计算属性 计算属性：

1.定义：要用的属性不存在，要通过【已有属性】计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 写在Vue实例的新属性

computed: {

fullName() { }

} computed可定义一些函数，这些函数叫做【计算属性】

只要data里面的数据发生变化computed会同步改变 引用【计算属性】时不要加 () ，应当普通属性使用， 引用【方法属性】时要加 ()

它只会读取get的返回值 get有什么作用？

当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 get什么时候调用？

1.初次读取fullName时。

2.所依赖的数据发生变化时。

完整写法 代码语言：javascript复制

简写 简写 【全名是展示在页面上的，用户修改不了，所以没有必要写set】

其中get 也可以简写，fullName: { get(){ } } -> fullName: function() { } -> fullName(){ } ===== 对象中 :function() 是可以省略的

代码语言：javascript复制 computed: {

fullName() {

console.log('get被调用了')

return this.firstName + '-' + this.lastName

}

}09-监视属性 内容较多 -- 分链接：

一、Vue2笔记--基础篇--09-监视属性_KD℡的博客-CSDN博客

10-条件渲染class、style 绑定样式：

1. class样式

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

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值，里面的属性用驼峰命名法

:style="a, b" 其中a、b是样式对象。

1、class样式 【用v-bind 单项绑定 vue data 中的数据】字符串写法 把css中的class类 normal 当成 键值 写在Vue实例中，然后把其键名通过 单项绑定 到标签的class上

代码语言：javascript复制

数组写法代码语言：javascript复制

对象写法代码语言：javascript复制

2、style样式对象写法 【样式用驼峰命名法】代码语言：javascript复制

数组写法 【一般不用】代码语言：javascript复制

11-条件渲染 条件渲染：

1.v-if

写法：

(1).v-if="表达式" 【表达式为false，页面中就不存在该元素，检测元素也不存在】

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2.v-show

写法：v-show="表达式" 【**表达式为false，就隐藏元素**】

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

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

new一个Vue实例 代码语言：javascript复制v-show、v-if 区别 比较v-if、v-else-if、v-else连用 【注意后面两个中间不允许再存在一个【没有】v-else-if标签，不然报错】template是模板标签，不在页面出现，即在页面上不出现template 标签显示，只会显示里面的内容12-列表渲染 **v-for指令:**

1.用于展示列表数据

\*2.语法：v-for="(item, index) in xxx" :key="yyy" 【**item元素基本是第一个元素，index索引基本都是第二个参数**】

3.可遍历：数组（用的多）、对象、字符串（用的很少）、指定次数（用的很少）

4.不写key，vue内部会把index作为key

new一个Vue实例代码语言：javascript复制 key原理 内容偏重要，分链接：

Vue中v-for引发key的原理_KD℡的博客-CSDN博客

更新数据出现的问题

push pop shift unshift sort reverse splice引发了一个问题：原数组函数里面的值改变了，但是没有更新在页面上，所以Vue做了解析Vue中的改变数据的赋值 内容之前写了，分链接：

解析Vue为什么重写原数组函数方法_KD℡的博客-CSDN博客_vue为什么重写数组方法

Vue.set的使用​

========================= Vue.set()、vm.$set() ============================

数组改元素 : Vue.set(this.arr-在data的位置, 3-在数组里面的索引, '改变后的名称')对象加键值 : Vue.set(this.student-在data的位置, '添加键的名称', '添加键值的名称')代码语言：javascript复制 Vue.set(this.student, 'sex', '男')

this.$set(this.student, 'sex', '男')数据监测的原理 Vue监视数据的原理：

1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:**push()、pop()、shift()、unshift()、splice()、sort()、reverse()**

2.**Vue.set() 或 vm.$set()**

特别注意：Vue.set() 和 vm.$set() **不能给vm 或 vm的根数据对象 添加属性，比如Vue中的data**

13-收集表单数据 收集表单数据：

若：， 则v-model收集的是value值，用户输入的就是value值。

若：，则v-model收集的是value值，且要给标签配置value值。

若：

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1) v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2) v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：(例：v-madel.lazy)

【注意，表单收集的都是字符串格式的数据，用修饰符number、一般和 type="number"联用可以转为数字型】

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字, 一般和 type="number" 连用

trim：输入首尾空格过滤

代码语言：javascript复制

====================== 注意点--多选框收集 ==========================

hobby收集的是某个类型里面【多个多选框里面的内容】，且初始值影响收集的内容hobby: '', --> 收集是否勾选上的状态布尔值hobby: , --> 收集勾选上的多选框的value值14-过滤器 过滤器：

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

语法：

1.注册过滤器：全局配置Vue.filter(name,callback) 或 局部配置new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

过滤器实现（传参）【 | ：管道符】 需在Vue里面进行简单处理多个过滤器，一个一个将返回值给下一个作为第一个参数进行过滤代码语言：javascript复制

15-内置指令 内容较多，分链接：

一、Vue2笔记--基础篇--15-Vue内置指令v-text、v-html、v-cloak、v-once、v-pre_KD℡的博客-CSDN博客

16-自定义指令 自定义指令的属性 ： directives 【写在Vue实例内和data同级的属性】

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

自定义指令总结：

一、定义语法：

(1).局部指令：

new Vue({ new Vue({

directives:{指令名:配置对象} 或 directives{指令名:回调函数}

}) })

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、**配置对象**中常用的3个回调：

(1).**bind**：指令与元素成功绑定时调用。

(2).**inserted**：指令所在元素被插入页面时调用。

(3).**update**：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.**指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名**。

3.且在Vue里面写指令名字为**多个单词时就要加 引号**

四、注意：指令directives里面的**this指向都是window**

注意点：如果是多个单词的自定义指令，键名就会出现-，就得加引号，因为对象里面的键名是加引号的，之间不加是简写，例如：完整写法：'big-number':function(element,binding){}需求2 自定义v-fbind指令中，需要给input默认获取焦点，但是有个坑，就是必须创建出来input框，才能获取焦点，而input框颜色、大小可以在元素创建出来之前创建也没事，有人有疑惑input框不是已经在body里面写了，不就是创建了吗，是因为 id为root 模板需要进行Vue解析，而binding状态v-fbind指令与元素成功绑定时（一上来），这个时候，input还没创建在页面上，只是一个虚拟DOM，所以这个获取焦点时无效的代码语言：javascript复制

17-生命周期 生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子（开发中常称）。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。 常用的生命周期钩子：

1.**mounted**: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.**beforeDestroy**: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

代码语言：javascript复制

18-非单文件组件 内容较多，分链接：

一、Vue2笔记--基础篇--19-非单文件组件_KD℡的博客-CSDN博客

19-单文件组件 # Vue文件最外围只支持三个标签1、2、3、 在这里面用默认暴露，把内容暴露出去 # Vs code不认识Vue后缀名的文件所以注意需要安装相关插件 ，例：Vetur # 文件名写法1、 school.Vue 或 School.Vue (推荐)2、 my-school.Vue 或 MySchool.Vue (推荐) # 必须写 App.Vue 用来管理下面所有组件 # 组件名 一般需要跟 文件名 保持一致