每一个Vue应用都要通过Vue实例实现，实例化Vue语法格式如下：
接下来，通过一个代码段说明Vue构造器有哪些基本内容：
上述示例中是在创建Vue实例时与div容器进行挂载，这是一种方法，还有一种方法是在完成实例化之后，通过Vue实例的”$mount()”内置方法挂载到容器。
在上述代码实例汇总，我们创建了一个Vue实例（app），并将其挂载到div的id属性将其挂载到对应的div上，这里需要注意， Vue实例与容器时一一对应的关系，即一个Vue实例只能挂载到一个容器，一个容器也只能挂载一个Vue实例。
Vue模板语法分为两大类：插值语法和指令语法。
2.1 插值语法
插值语法在上文中已经见过了，在第1章节中使用的形如”{{ message }}”，使用双花括号将内容进行包裹的方式就是插值语法，这里所说的内容可以是js变量、常量、表达式和js代码（数值运算、方法调用、三目运算符，甚至是条件判断和for循环）。通过这种插值的方式，Vue中数据将可以在页面中进行显示，且当Vue属性被修改时，页面中显示内容也将随之变化。
2.2 指令语法
Vue中指令语法有很多，都是以”v-“开头，例如v-bind、v-model，这类语法多用于解析标签（包括标签属性、标签体内容、绑定事件等），以v-bind绑定a标签href属性为例，绑定方法为： v-bind:href="xxx"，或简写为： :href="xxx"，这里的xxx与上文插值语法中的message一样，可以是Vue实例data中所有属性，也可以是js表达式。
Vue中，数据绑定分为单相绑定和双向绑定。
3.1 单向绑定：v-bind
单向绑定是指数据只能从data流向页面，用v-bind实现，大多用来绑定不可直接从页面上进行更改的标签属性上，当Vue中data内属性值发现变化，页面也将发生变化，但是页面对应内容发生变化时，data内对应的属性不会发生修改。v-bind在上文讲解指令语法时已经通过示例说明，这里不再举例。
3.2 双向绑定：v-model
双向绑定一般用v-model实现，数据不仅能够从data流向页面，也能从页面流向data，也就是说，当页面中对应的内容发生改变是，vue中该属性值将发生改变，当Vue中属性值发生改变是，页面内容也将随之变化。双向绑定一般都用在表单类元素上，例如input、textarea、select、checkbox、radio等。v-model以 v-model:value="xxx"的形式，将标签的value属性与data的xxx属性进行双向绑定，也可以简写成 v-model="name"的形式。
（1）input
（2）textarea texttarea标签的绑定方式和input中text的绑定方式一样：
（3）checkbox
对于checkbox，由于可以多选，所以Vue中绑定的属性需以列表形式存在，所有在前段页面勾选的值，将保存到列表中。
（4）radio
（5）select 对于select，Vue绑定的是selected属性，可以再每个option中指定value，那么选中option的value将赋值给Vue实例对应属性，如果option没有设置value值，那么，option的text值将赋值给Vue实例对应属性。
4.1 v-if 、v-else、 v-show、v-else-if
（1）v-if
（2）v-else
（3）v-else-if
（4）v-show
v-if与v-show的区别:
v-if： 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。
4.2 v-for
（1）基本用法
（2）对象遍历
参数： 第一个为值，第二个为键名，第三个为索引
4.3 v-text 、v-html
（1）v-text {{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题.
（2）v-html 用于输出html代码：
4.4 v-once
只显示DOM第一次渲染的值，以后不改变了.
Original: https://www.cnblogs.com/chenhuabin/p/15927161.html
Author: 奥辰
Title: Vue学习笔记（二）：Vue实例与指令
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/711653/
转载文章受原作者版权保护。转载请注明原作者出处！