根据动力节点b站老杜的vue视频教程整理了学习笔记，分享给需要的朋友们~
Vue笔记 第一章
1 Vue程序初体验
我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程序起不到太大的作用，更何况现在说了一些特点之后，我们也没有办法彻底理解它，因此我们可以先学会用，使用一段时间之后，我们再回头来熟悉一下Vue框架以及它的特点。现在你只需要知道Vue是一个基于JavaScript（JS）实现的框架。要使用它就需要先拿到Vue的js文件。从Vue官网（https://v2.cn.vuejs.org/）下载vue.js文件。
1.1 下载并安装vue.js
第一步：打开Vue2官网，点击下图所示的“起步”：
点击输入图片描述（最多30字）
第二步：继续点击下图所示的“安装”
点击输入图片描述（最多30字）
第三步：在“安装”页面向下滚动，直到看到下图所示位置：
点击输入图片描述（最多30字）
第五步：安装Vue：
使用script标签引入vue.js文件。就像这样：
1.2 第一个Vue程序
集成开发环境使用VSCode，没有的可以安装一个：https://code.visualstudio.com/第一个Vue程序如下：
2.lang="en">
4.charset="UTF-8">
5.http-equiv="X-UA-Compatible"content="IE=edge">
6.name="viewport"content="width=device-width,initial-scale=1.0">
7.第一个Vue程序
9.src="../js/vue.js">
13.id="app">
运行效果：
点击输入图片描述（最多30字）
对第一个程序进行解释说明：
1.当使用script引入vue.js之后，Vue会被注册为一个全局变量。就像引入jQuery之后，jQuery也会被注册为一个全局变量一样。
2.我们必须new一个Vue实例，因为通过源码可以看到this的存在。
点击输入图片描述（最多30字）
1.Vue的构造方法参数是一个options配置对象。配置对象中有大量Vue预定义的配置。每一个配置项都是key:value结构。一个key:value就是一个Vue的配置项。
2.template配置项：value是一个模板字符串。在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）。写在这里的字符串会被Vue编译器进行编译，将其转换成浏览器能够识别的HTML代码。template称之为模板。
3.Vue实例的$mount方法：这个方法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到页面的指定位置。注意：指定位置的元素被替换。
4.‘#app’的语法类似于CSS中的id选择器语法。表示将Vue实例挂载到id=’app’的元素位置。当然，如果编写原生JS也是可以的：vm.$mount(document.getElementById(‘app’))
5.‘#app’是id选择器，也可以使用其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置），这个时候Vue只会选择第一个位置进行挂载（从上到下第一个）。
1.3 Vue的data配置项
观察第一个Vue程序，你会发现要完成这种功能，我们完全没有必要使用Vue，直接在body标签中编写以下代码即可：
2.lang="en">
4.charset="UTF-8">
5.没必要使用Vue呀
Hello Vue!
那我们为什么还要使用Vue呢？在Vue中有一个data配置项，它可以帮助我们动态的渲染页面。代码如下：
2.lang="en">
4.charset="UTF-8">
5.http-equiv="X-UA-Compatible"content="IE=edge">
6.name="viewport"content="width=device-width,initial-scale=1.0">
7.Vue选项data
9.src="../js/vue.js">
13.id="app">
运行结果如下：
点击输入图片描述（最多30字）
对以上程序进行解释说明：
1.data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
2.{{message}}是Vue框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从data中根据key来获取value，并且将value插入到对应的位置。
3. data可以是以下几种情况，但不限于这几种情况：
4.data:{
5.name:'老杜',
6.age:18
7.}
8.//取值：
9.{{name}}
10.{{age}}
12.data:{
13.user:{
14.name:'老杜',
15.age:18
16.}
17.}
18.//取值：
19.{{user.name}}
20.{{user.age}}
22.data:{
23.colors:['红色','黄色','蓝色']
24.}
25.//取值：
26.{{colors[0]}}
27.{{colors[1]}}
28.{{colors[2]}}
29.以上程序执行原理：Vue编译器对template进行编译，遇到胡子{{}}时从data中取数据，然后将取到的数据插到对应的位置。生成一段HTML代码，最终将HTML渲染到挂载位置，呈现。
30.当data发生改变时，template模板会被重新编译，重新渲染。
1.4 Vue的template配置项
- template只能有一个根元素。
请看如下代码：
2.lang="en">
4.charset="UTF-8">
5.http-equiv="X-UA-Compatible"content="IE=edge">
6.name="viewport"content="width=device-width,initial-scale=1.0">
7.Vue选项template
9.src="../js/vue.js">
13.id="app">
执行结果如下：
点击输入图片描述（最多30字）
控制台错误信息：组件模板应该只能包括一个根元素。 所以如果使用template的话，根元素只能有一个。 代码修改如下：
1.newVue({
2.template:'
{{message}}
{{name}}
',
3.data:{
4.message:'HelloVue!',
5.name:'动力节点老杜'
6.}
7.}).$mount('#app')
运行结果如下：
点击输入图片描述（最多30字）
1.template编译后进行渲染时会将挂载位置的元素替换。
2.template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。
代码修改如下：
1.newVue({
2.template:`
{{message}}
{{name}}
7.`,
8.data:{
9.message:'HelloVue!',
10.name:'动力节点老杜'
11.}
12.}).$mount('#app')
运行结果如下：
点击输入图片描述（最多30字）
1.template配置项可以省略，将其直接编写到HTML代码当中。
代码如下：
1.
2.id="app">
{{message}}
{{name}}
运行结果如下：
点击输入图片描述（最多30字）
需要注意两点：
第一：这种方式不会产生像template那种的元素替换。
第二：虽然是直接写到HTML代码当中的，但以上程序中第3~6行已经不是HTML代码了，它是具有Vue语法特色的模板语句。这段内容在data发生改变后都是要重新编译的。
1.将Vue实例挂载时，也可以不用$mount方法，可以使用Vue的el配置项。
代码如下：
1.
2.id="app">
{{message}}
{{name}}
8.
执行结果如下：
点击输入图片描述（最多30字）
el是element单词的缩写，翻译为“元素”，el配置项主要是用来指定Vue实例关联的容器。也就是说Vue所管理的容器是哪个。
1
Vue笔记 第⼀章
� Vue程序初体验
�.� 下载并安装vue.js
�.� 第⼀个Vue程序
�.� Vue的data配置项
Hello Vue!
�.� Vue的template配置项
{{message}}
{{name}}
{{message}}
{{name}}
Vue框架
我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程
序起不到太⼤的作⽤，更何况现在说了⼀些特点之后，我们也没有办法彻底理解它，因此我们可以先学会
⽤，使⽤⼀段时间之后，我们再回头来熟悉⼀下Vue框架以及它的特点。现在你只需要知道Vue是⼀个基于
JavaScript（JS）实现的框架。要使⽤它就需要先拿到Vue的js⽂件。从Vue官⽹
（https://v2.cn.vuejs.org/）下载vue.js⽂件。
1 Vue程序初体验
1.1 下载并安装vue.js
https://v2.cn.vuejs.org/
2
第⼀步：打开Vue2官⽹，点击下图所示的“起步”：
第⼆步：继续点击下图所示的“安装”
第三步：在“安装”⻚⾯向下滚动，直到看到下图所示位置：
3
第五步：安装Vue：
使⽤script标签引⼊vue.js⽂件。就像这样：
集成开发环境使⽤VSCode，没有的可以安装⼀个：https://code.visualstudio.com/
第⼀个Vue程序如下：
1. ** 2. 3.4. 5. 6. 7. 第⼀个Vue程序 8.9.
10.11.12.13. 14.15.16.17.
1.2 第⼀个Vue程序
https://code.visualstudio.com/
4
运⾏效果：
对第⼀个程序进⾏解释说明：
1. 当使⽤script引⼊vue.js之后，Vue会被注册为⼀个全局变量。就像引⼊jQuery之后，jQuery也会被注册为⼀个全局变量⼀样。
2. 我们必须new⼀个Vue实例，因为通过源码可以看到this的存在。
1. Vue的构造⽅法参数是⼀个options配置对象。配置对象中有⼤量Vue预定义的配置。每⼀个配置项都是key:value结构。⼀个key:value就是⼀个Vue的配置项。
2. template配置项：value是⼀个模板字符串。在这⾥编写符合Vue语法规则的代码（Vue有⼀套⾃⼰规定的语法规则）。写在这⾥的字符串会被Vue编译器进⾏编译，将其转换成浏览器能够识别的HTML代
码。template称之为模板。
3. Vue实例的$mount⽅法：这个⽅法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到⻚⾯的指定位置。注意：指定位置的元素被替换。
4. ‘#app’的语法类似于CSS中的id选择器语法。表示将Vue实例挂载到id=’app’的元素位置。当然，如果编写原⽣JS也是可以的：vm.$mount(document.getElementById(‘app’))
5. ‘#app’是id选择器，也可以使⽤其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置），这个时候Vue只会选择第⼀个位置进⾏挂载（从上到下第⼀个）。
观察第⼀个Vue程序，你会发现要完成这种功能，我们完全没有必要使⽤Vue，直接在body标签中编写以
下代码即可：
1. ** 2. 3.4. 5. 没必要使⽤Vue呀
1.3 Vue的data配置项
5
6.7.
9.10.
那我们为什么还要使⽤Vue呢？在Vue中有⼀个data配置项，它可以帮助我们动态的渲染⻚⾯。代码如下：
1. ** 2. 3.4. 5. 6. 7. Vue选项data 8.9.
10.11.12.13. 14.15.16.17.
运⾏结果如下：
对以上程序进⾏解释说明：
1. data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。 2. {{message}}是Vue框架⾃⼰搞的⼀个语法，叫做插值语法（或者叫做胡⼦语法），可以从data中根据
key来获取value，并且将value插⼊到对应的位置。
3. data可以是以下⼏种情况，但不限于这⼏种情况：
Hello Vue!
6
4. data:{ 5. name:'⽼杜', 6. age:18 7. } 8. //取值： 9. {{name}}
10. {{age}} 11.12. data:{ 13. user:{ 14. name:'⽼杜', 15. age:18 16. } 17. } 18. //取值： 19. {{user.name}} 20. {{user.age}} 21.22. data:{ 23. colors:['红⾊','⻩⾊','蓝⾊'] 24. } 25. //取值： 26. {{colors[0]}}27. {{colors[1]}} 28. {{colors[2]}}29. 以上程序执⾏原理：Vue编译器对template进⾏编译，遇到胡⼦{{}}时从data中取数据，然后将取到的数据插到对应的位置。⽣成⼀段HTML代码，最终将HTML渲染到挂载位置，呈现。
30. 当data发⽣改变时，template模板会被重新编译，重新渲染。
1. template只能有⼀个根元素。
请看如下代码：
1. ** 2. 3.4.
1.4 Vue的template配置项
7
5. 6. 7. Vue选项template 8.9.
10.11.12.13. 14.15.16.17.
执⾏结果如下：
控制台错误信息：组件模板应该只能包括⼀个根元素。
所以如果使⽤template的话，根元素只能有⼀个。
代码修改如下：
1. newVue({ 2. template:'',
3. data:{ 4. message:'HelloVue!', 5. name:'动⼒节点⽼杜' 6. } 7. }).$mount('#app')
{{message}}
{{name}}
8
运⾏结果如下：
1. template编译后进⾏渲染时会将挂载位置的元素替换。 2. template后⾯的代码如果需要换⾏的话，建议将代码写到``符号当中，不建议使⽤ + 进⾏字符串的拼接。
代码修改如下：
1. newVue({ 2. template:` 3.
6.7. `, 8. data:{ 9. message:'HelloVue!',
10. name:'动⼒节点⽼杜' 11. } 12. }).$mount('#app')
{{message}}
{{name}}
9
运⾏结果如下：
1. template配置项可以省略，将其直接编写到HTML代码当中。
代码如下：
1. 2. 3.4. {{message}}
5. {{name}}
6.7.8. 9.
运⾏结果如下：
需要注意两点：
第⼀：这种⽅式不会产⽣像template那种的元素替换。
10
第⼆：虽然是直接写到HTML代码当中的，但以上程序中第3~6⾏已经不是HTML代码了，它是具有Vue语
法特⾊的模板语句。这段内容在data发⽣改变后都是要重新编译的。
1. 将Vue实例挂载时，也可以不⽤$mount⽅法，可以使⽤Vue的el配置项。
代码如下：
1. 2. 3.4. {{message}}
5. {{name}}
6.7.8. 9.
执⾏结果如下：
el是element单词的缩写，翻译为“元素”，el配置项主要是⽤来指定Vue实例关联的容器。也就是说Vue所
管理的容器是哪个。返回搜狐，查看更多
责任编辑：