Vue渲染数据理解以及Vue指令

一、vue渲染数据原理

原生js改变页面数据，必须要获取页面节点，也即是进行dom操作，jquery之类的框架只是简化dom操作的写法，实质并没有改变操作页面数据的底层原理，dom操作影响性能（导致浏览器的重绘和回流），vue是一个mvvm框架（库），大幅度减少了dom操作，操作数据如下图：

view也就是页面，model是指数据，vm是vue实例，页面所需的数据或者方法都定义在vm中

页面通过vue实例（vm）来获取数据，数据改变是通过改变vue实例中的数据使展示在页面上的数据发生改变，并不是直接改变页面上的数据。

注：vue实例包括根实例（new vue({})）和组件实例

二、指令：扩展html标签功能

1、v-model：表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

（v-model 并不关心表单控件初始化所生成的值。因为它会选择 vue 实例数据来作为具体的值。）

对于不同的控件，v-model会自动绑定到不同的值上

（1）<input type="text" v-model="value" /> v-model绑定的是其 value值；

（2）<input type="checkbox"  v-model="checked" value="test">单个勾选框 v-model绑定的是checked的状态，即是否勾选上，其值为布尔值；

（3）<input type="checkbox"  value="jack" v-model="checkednames">

<input type="checkbox"  value="john" v-model="checkednames">

<input type="checkbox"  value="john" v-model="checkednames">多个勾选框，v-model绑定的是勾选上的选项的value值所组成的一个数组；

（4）<input type="radio" value="one" v-model="picked">

<input type="radio"  value="two" v-model="picked">单选按钮，v-model绑定是选中的那一项的value值
（5）<select v-model="selected">

<option value="one">a</option>
<option value="two">b</option>
<option value="three">c</option>
</select>  单选列表，若 option中规定了value属性，v-model绑定的是选中的那一项的value值，若option中没有规定value属性，v-model绑定的是选中的那一项的内容

（6）<select v-model="selected" multiple>

<option value="one">a</option>
<option>b</option>
<option value="three">c</option>
</select>多选列表，绑定到数组，与单选列表类似，规定了value值，数组就由所选项的value组成，未规定value值，数组就由所选项的内容组成

（7）<textarea v-model="textarea"></textarea> v-model绑定的是其 value值;

2、v-for列表渲染

<ul>
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>


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

3、v-on:绑定事件（缩写@）

　　<div id="app">
      <div v-on:click="testclick">click</div>
    </div>
    <script>
        new vue({
            el: "#app",
            methods:{
                testclick: function(){
                    alert(111)
                }
            }
        })
    </script>

注：绑定事件直接在dom上完成，所有的 vue.js 事件处理方法和表达式都严格绑定在当前视图的 viewmodel 上

常用的一些事件有：click、dbclick、keydown、keyup、mouseover、 mouseout、mousedown........

4、v-bind:绑定属性（缩写：）

<!-- 绑定一个属性 -->
<img v-bind:src="imagesrc">
<!-- 缩写 -->
<img :src="imagesrc">
<!--在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象-->
<!-- class 绑定 -->
<div :class="{ red: isred }"></div> <!--这里的red是类名，isred是数据名，值为ture或false-->
<div :class="[classa, classb]"></div> <!--这里的classa/classb都是数据名，他们的值是类名，自动渲染到div上-->
<div :class="[classa, { classb: isb, classc: isc }]"> <!--同上，classa,isb,isc是数据名，classa的数据值，classb，classc是类名，isb，isc的数据值是true/false-->
<!-- style 绑定 -->
<div :style="{ fontsize: size + 'px' }"></div>
<div :style="[styleobjecta, styleobjectb]"></div> <!--styleobjecta是数据名，其结构形如：styleobjecta:{backgroundcolor:'red'}复合样式采用驼峰命名-->
<!-- 没有参数(属性名)时，可以绑定到一个包含键值对的对象 -->
<div v-bind="{ id: someprop, 'other-attr': otherprop }"></div>
<!-- 通过 prop 修饰符绑定 dom 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。 “prop” 必须在 my-component 中声明。 -->
<my-component :prop="something"></my-component>
<!-- xlink -->
<svg><a :xlink:special="foo"></a></svg>

关于props的绑定：用于父组件向子组件传值

在父组件中，使用子组件时，<child v-bind:data="data"/>，通过v-bind把子组件需要的数据传递给子组件；

在子组件中通过props来接受传过来的数据，常用写法：props:['data',......]/props:{data:datatype,.....} 

5、v-show根据表达式的真假切换元素的display的属性值

表达式为真，display:block；表达式为假，display:none

6、v-once数据只绑定一次，只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。

<!-- 单个元素 -->
<span v-once>this will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

7、v-html 更新元素的 innerhtml 。注意：内容按普通 html 插入 - 不会作为 vue 模板进行编译

<!--rawhtml将会按照html的格式 插入到span中-->
<span v-html="rawhtml"></span>

8、v-text更新元素的 textcontent

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

 9、v-if、v-else根据表达式的值的真假条件渲染元素

<div v-if="math.random() > 0.5">
  sorry
</div>
<div v-else>
  not sorry
</div>