数据挂载

在实例化Vue的时候，两种方式挂载数据

方法一：最常用的方法

var app=new vue({

el:"#app",

data(){}

`````

})

注：文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

方法二：$mount 

var app=new vue({

data(){}

})

app.$mount("#app")

注：利用$mount挂载的方法有一个很大的好处，就是将实例化的内容和他对HTML的关联分开，可以更直观的展现。

指令：

v-on===@

v-text==={{}}

v-for

v-model

v-bind===：

参数options：

Vue实例的参数options是一个对象可以选择如下选项

data函数成员

methods对象成员

模板template

挂载元素el

生命周期钩子

props函数声明

conputed计算成员

watch监视成员

watch监视

两种方式可以来体现数据变化的过程

方法一：监视

直接监视数据，当数据值发生变化的时候，先弹出alert再进行下一步值的渲染

方法二：

利用mounted生命周期钩子，在Vue实例被挂在dom上被调用，此处可以做一些初始化的工作，采用包含选项对象的模式，还可以监测数组内对象的变化（运行效果同上）

computed计算属性

尽管我们知道mustache（{{}}）内可以使用表达式，但是不推荐的，所有更多的时候是利用计算属性来实现相应的功能

利用computed将原本可以写在dom行间的表达式写在计算属性内（推荐）

计算属性不仅仅这么简单，背后的逻辑会在以后深入了解后进行赘述

绑定

命令式编程：找打dom项目-----设置值

声明式编程：声明绑定

优点：

无需访问dom api即可修改dom

响应式的风格是一次给设置好，以后数据发生变化，DOM显示也会跟着变化

DOM标签会跟着value的变化而变化，绑定包括数据绑定，事件绑定，元素绑定

数据绑定

Mustache语法设置绑定，用双大括号{{}}

如果不想绑定的数据随着后面的数据发生变化，就利用v-once，写在插入值的标签元素上

v-html：可以将HTML代码插入进来，但是要注意不要将用户输入的内容用v-html来显示，会有XSS攻击的可能

v-bind：<input  v-bind:value="value"/>属性绑定的方法

v-bind关于class的绑定

针对标签属性class，v-bind可以直接传入一个对象作为属性值，像是这样<div v-bind:class="{active:isActive,'text-danger:hasError'}"’></div>，这里，如果isActive为true，那么active作为拼接字符串的一部分，同理hasError

渲染结果:<div class="active"></div>

也可以传入一个数组作为class属性的值<div v-bind:class='[active,text-danger]'></div>

渲染结果：<div class="active text-danger"></div>

v-bind关于style的绑定

也可以如同class的对象一样，传入对象或者数组<div v-bind:style="styleObject"></div>

data:{

styleObject:{

fontsize:10px;

color:red;

}

}

三种方式的实现效果是一样的

事件绑定

指令v-on可以监听dom事件，指令v-on会把参数（click）指定的事件挂接到属性值指定的方法（who）上，方法who的参数event为原生的javaScript对象

v-on的修饰符：（.stop,.prevent,.capture,.self）

还有一类特别的修饰符用于键盘事件的修饰，类似这样：.keyup.enter  表示侦听enter键的keyup事件，还有（enter,tab,delete,esc,space,up,down,left,right）,也可以在keyup后面跟上按键对应的数字，效果一样

元素绑定

<h1  v-if="false">h1</h1>      <h2 v-else>h2</h2>     else这里可写可不写

<template v-if="true"><h1>h1</h1><p>pppp</p><template>

<template v-else><h1>h1</h1><p>qqqqq</p></template>多行可以利用这个方式来实现

v-show:  实现效果一样，但是，（v-if会改变dom结构，如果v-if的值是false，这里的元素dom结构就不存在，如果为true则存在，而，v-show则是如果值为false则是dom存在仅仅不显示）所以，v-show不算元素绑定指令

v-for：基于一个数组渲染一组元素

v-for可以对数组进行迭代，可以获取数据的元素值和对应的下标

v-for可以对对象进行迭代，同样的，获取的两个参数，分别是对象的键、值

这里的迭代用到的都是for-in  ，也可以对整数进行遍历（只能是整数）

v-model  

未完待续·······