Vue渲染，基础语法，指令

官方文档.

Vue简单介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

可以创建一个 .html 文件，然后通过如下方式引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。数据和 DOM 建立了关联，所有东西都是响应式的，可以通过控制台来修改数据，页面也会更新数据内容。

Vue基本配置及作用

为了后续讲解，先引入一个Vue例子：

<div id="box">
</div>
<script>
  let app = new Vue({
    el: '#box',
    data: { title: '标题' },
    template: '<h1>{{title}}</h1>',
    methods: {
      changeTitle (title) { this.title = title; }
    }
  })
</script>

执行完script脚本对应的框架代码后，window上会新增一个构造函数Vue，用于构建Vue实例。我们向new Vue传入了一个配置对象，这个对象包含如el、data、template、methods等属性，用于为Vue实例添加属性和方法。Vue会根据这些配置，生成一个可以自动生成视图的响应式的Vue组件，它不仅负责管理视图层和业务层，还负责两者的同步。

我们来简单看一下一些常用配置的作用：

1. el
   根元素，该参数只能由根节点声明，表示当前Vue应用需要被挂载到页面的哪个DOM节点上。如上面的例子指定了根元素为#box，那么该Vue实例生成的DOM就会直接替换id为box的元素。
2. data
   业务数据，这个参数是model层(业务层)的核心，相关的业务逻辑都是围绕data展开的。
3. props
   来自父级组件的数据依赖，这个依赖是响应式的。
4. computed
   计算属性，定义一组变量，这组变量的值是基于一个或多个props、data计算而来，computed内变量的值会根据这些依赖的值变化而自动更新，并且会自动缓存上次的计算结果。
5. watch
   手动监控props、data或者computed的变化，定义变化时的回调函数。
6. 生命周期方法
   定义Vue组件在各个生命周期需要执行的回调函数，Vue在执行到对应的阶段时会调用它们。生命周期与Vue组件创建的细节是渲染原理的重点。
7. methods
   组件的工具方法集。methods定义了一组工具方法，可以在computed、watch、生命周期方法或者其他工具方法中调用。

Vue组件的渲染过程

Vue的执行过程主要分两大阶段：Vue自身的初始化阶段和实例的生命周期管理阶段。

当通过<script>脚本或者import Vue from 'vue'引入Vue时，Vue框架本身的代码会被执行，这一阶段的作用是对框架自身进行初始化。简单来说，就是定义构造函数function Vue，并为其添加大量的原型方法（以及一些工具方法）。

而在执行new Vue({ ... })语句时，就进入了实例的生命周期管理阶段。这一阶段是调用上述构造函数，构造和初始化Vue实例，并且管理它的整个生命周期。

Vue基础语法

• 插值表示法{{}} (普通文本)

<div id="box">
	{{ 10 + 20 }}
	{{ 10>20?'aaa':'bbb' }}
	{{ myName }}
	{{  myHtml }}
	<div v-html="myHtml"></div>
</div>
 <script>
 var ym = new Vue({
            el: "#box",
            // 定义属性
            data:{
                myName:'yan', 
                myHtml:"<b>111111</b>",
                }
         })
  </script>

结果如下：

注意点：
(1) {{ }} : 插值表达式，也叫胡子语法
(2) 插值表达式作用：将data对象中的数据渲染到页面
(3) 支持二元运算 {{ age + 1 }}
(4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
(5) 支持数组与对象的取值语法
(6) 不支持分支语法与循环语法
(7)通过使用 v-once 指令，可以执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变:{{myName}} </span>

• 原始Html
  双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：

	<div>{{  myHtml }} </div>
	<div v-html="myHtml"></div>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊属性 (attribute)。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

语法: 指令名="指令值"

1.v-bind指令

<div v-bind:class="red">动态绑定属性</div>
<div :class="red">动态绑定属性,简写</div>

attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串。

{{}}双大括号语法不能作用在 标签的属性(HTML attribute )上，遇到这种情况应该使用 v-bind 指令。

简写：:属性名="属性值"
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中。

2.v-if指令（条件渲染）

<div v-if="isCreative">我是动态创建和删除</div>

v-if 指令将根据表达式 isCreative 的值的真假（true 或 false）来插入/移除 div 元素，值为假时不创建节点。

v-if 搭配 v-else-if、v-else时是同级的兄弟关系，按条件渲染，最终只创建一个节点。

3.v-show 指令

<div v-show="isShow">我是动态显示和隐藏</div>

与v-if不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。当 isShow=true 时，display=block，为 false 时， display = none

v-if VS v-show

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4.v-on指令（事件处理）

• 简写： @事件名。
• 用法：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
  用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
• 事件修饰符：
  .stop - 调用 event.stopPropagation()，停止冒泡。
  .prevent - 调用 event.preventDefault()，阻止默认行为。
  .capture - 添加事件侦听器时使用 capture 模式。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .once - 只触发一次回调。

		<button v-on:click="myClick()">按钮1</button>
        <button @click="myClick()">简写：按钮2</button>

5.v-for指令 （列表渲染）

• 用法：基于源数据多次渲染元素或模板块。遍历数组，根据数组去生成标签，v-for写在哪个标签上，就代表生成哪个标签。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

v-for指令中使用 in 或 of 没有区别。

<ul>
	<li v-for="item in dataList">
     	{{item}}
    </li>
</ul>

• 另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

• key：
  跟踪每个节点的身份，从而重用和重新排序现有元素 ，理想的 key 值是每项都有的且唯一的 id。data.id

6.v-model指令（表单绑定）

• 用途：实现双向绑定，给表单元素用的，如input、textarea、select等。可以把输入的值赋值给数据，数据改变，输入框的内容也改变。可以应用于购物车的全选，单选等等。

<input type="text" v-model="myText" >

• 修饰符：
  （1）v-model.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

（2）v-model.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

（3）v-model.trim：自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">