无比详细的动力节点老杜Vue框架教程笔记一套通透！

　　我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程序起不到太大的作用，更何况现在说了一些特点之后，我们也没有办法彻底理解它，因此我们可以先学会用，使用一段时间之后，我们再回头来熟悉一下Vue框架以及它的特点。现在你只需要知道。要使用它就需要先拿到Vue的js文件。从Vue官网（）下载vue.js文件。

　　集成开发环境使用VSCode，没有的可以安装一个：第一个Vue程序如下：

　　1.当使用script引入vue.js之后，Vue会被注册为一个全局变量。就像引入jQuery之后，jQuery也会被注册为一个全局变量一样。

　　1.Vue的构造方法参数是一个options配置对象。配置对象中有大量Vue预定义的配置。每一个配置项都是key:value结构。一个key:value就是一个Vue的配置项。

　　2.template配置项：value是一个模板字符串。在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）。写在这里的字符串会被Vue编译器进行编译，将其转换成浏览器能够识别的HTML代码。template称之为模板。

　　3.Vue实例的$mount方法：这个方法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到页面的指定位置。注意：指定位置的元素被替换。

　　5.‘#app’是id选择器，也可以使用其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置），这个时候Vue只会选择第一个位置进行挂载（从上到下第一个）。

　　观察第一个Vue程序，你会发现要完成这种功能，我们完全没有必要使用Vue，直接在body标签中编写以下代码即可：

　　那我们为什么还要使用Vue呢？在Vue中有一个data配置项，它可以帮助我们动态的渲染页面。代码如下：

　　1.data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。

　　2.{{message}}是Vue框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从data中根据key来获取value，并且将value插入到对应的位置。

　　29.以上程序执行原理：Vue编译器对template进行编译，遇到胡子{{}}时从data中取数据，然后将取到的数据插到对应的位置。生成一段HTML代码，最终将HTML渲染到挂载位置，呈现。

　　30.当data发生改变时，template模板会被重新编译，重新渲染。

　　控制台错误信息：组件模板应该只能包括一个根元素。 所以如果使用template的话，根元素只能有一个。 代码修改如下：

　　2.template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。

　　第二：虽然是直接写到HTML代码当中的，但以上程序中第3~6行已经不是HTML代码了，它是具有Vue语法特色的模板语句。这段内容在data发生改变后都是要重新编译的。

　　1.将Vue实例挂载时，也可以不用$mount方法，可以使用Vue的el配置项。

　　el是element单词的缩写，翻译为“元素”，el配置项主要是用来指定Vue实例关联的容器。也就是说Vue所管理的容器是哪个。

　　球速体育官方入口

　　我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程

　　序起不到太⼤的作⽤，更何况现在说了⼀些特点之后，我们也没有办法彻底理解它，因此我们可以先学会

　　⽤，使⽤⼀段时间之后，我们再回头来熟悉⼀下Vue框架以及它的特点。现在你只需要知道Vue是⼀个基于

　　2. 我们必须new⼀个Vue实例，因为通过源码可以看到this的存在。

　　1. Vue的构造⽅法参数是⼀个options配置对象。配置对象中有⼤量Vue预定义的配置。每⼀个配置项都是key:value结构。⼀个key:value就是⼀个Vue的配置项。

　　2. template配置项：value是⼀个模板字符串。在这⾥编写符合Vue语法规则的代码（Vue有⼀套⾃⼰规定的语法规则）。写在这⾥的字符串会被Vue编译器进⾏编译，将其转换成浏览器能够识别的HTML代

　　3. Vue实例的$mount⽅法：这个⽅法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到⻚⾯的指定位置。注意：指定位置的元素被替换。

　　5. ‘#app’是id选择器，也可以使⽤其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置），这个时候Vue只会选择第⼀个位置进⾏挂载（从上到下第⼀个）。

　　观察第⼀个Vue程序，你会发现要完成这种功能，我们完全没有必要使⽤Vue，直接在body标签中编写以

　　那我们为什么还要使⽤Vue呢？在Vue中有⼀个data配置项，它可以帮助我们动态的渲染⻚⾯。代码如下：

　　1. data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。 2. {{message}}是Vue框架⾃⼰搞的⼀个语法，叫做插值语法（或者叫做胡⼦语法），可以从data中根据

　　30. 当data发⽣改变时，template模板会被重新编译，重新渲染。

　　1. template编译后进⾏渲染时会将挂载位置的元素替换。 2. template后⾯的代码如果需要换⾏的话，建议将代码写到``符号当中，不建议使⽤ + 进⾏字符串的拼接。

　　第⼆：虽然是直接写到HTML代码当中的，但以上程序中第3~6⾏已经不是HTML代码了，它是具有Vue语

　　1. 将Vue实例挂载时，也可以不⽤$mount⽅法，可以使⽤Vue的el配置项。

　　el是element单词的缩写，翻译为“元素”，el配置项主要是⽤来指定Vue实例关联的容器。也就是说Vue所