【VUE从0到1】-模板和语法

vue文档：http://cn.vuejs.org/vz/guide/

1-模板

new Vue({
el: ,
data: ,
methods: ,

});

new Vue(对象)，对象包含el：挂载、data：数据、methods：方法。

1.1_插值表达式 {{数据名}} 作用：填充数据、简单计算、字符串拼接。

2-指令 v-

2.1_v-cloak

解决插值表达式因为刷新多次而出现闪动的问题，原理是先隐藏 替换好后再显示。

2.2_数据填充

数据填充三个指令：v-text、v-html、v-pre

v-text：纯文本

v-html：HTML片段

v-pre：原始信息

2.3_数据响应式

数据变化带来的响应。数据绑定具有的特点。

v-once：只编译一次，就不再响应。

2.4_双向数据绑定

方向：input text到 data 数据、 data 数据到 input text

2.4.1.v-model

2.4.2.分而治之

不同的功能的代码放在不同的模块，需要用到的时候在把它们联系起来。

原理：dom元素 通过dom监听改变数据，数据通过vue数据绑定改变dom元素。

2.5_事件绑定

v-on:click='方法名'；

@click='方法名'  简便写法

方法定义在methods对象中。

2.5.1函数调用

v-on:click='方法名'        v-on:click='方法名()'

第一种不可以传递参数，第二种可以传递参数。

2.5.2方法中的this指向的是vue。

2.5.3参数传递

如果事件直接绑定名称，默认传递事假对象为第一个参数。

如果事件绑定函数调用，事件对象必须作为最后一个且事件对象名称固定$event。

2.6_修饰符

2.6.1_阻止冒泡

原生js：event.stopPropogation

Vue：.stop        v-on:click.stop='方法名'

2.6.2_阻止默认行为

原生js：event.preventDefault

Vue：.prevent        v-on:click.prevent='方法名'

2.6.3_按键修饰符

.enter回车        v-on:keyup.enter=''

.delete删除键        v-on:keyup.delete=''

自定义按键：Vue.config.keycodes.名=keycode        使用直接.名或者.keycode

如何拿到keycode？

事件+console.log(event.keycode)

v-on:keyup='function(event){console.log(event.keycode)}'

2.7属性绑定

v-bind

有<a helf='#'></a>        然后绑定helf属性只需要在helf前面加上v-bind:即<a v-bind:helf='数据名'></a>  

2.8学习完v-bind，可以了解下v-model双向绑定的底层逻辑

v-model是dom元素和数据的绑定。首先看修改dom元素造成的数据的改变，其实是通过v-on事件绑定，让值赋给了数据。数据到dom元素其实是属性绑定，数据变化的时候值就传递了。

2.9-样式绑定        class处理和style处理

2.9.1_class处理

对象语法：v-bind:class='{active:isactive}';

数组语法：v-bind:class=[a,b,c];

默认的class处理是有的覆盖，没有的添加

2.9.2_style处理

对象语法：v-bind:style='{color:red}'

数组语法：v-bind:style='[a,b,c]'

2.10-分支循环

2.10.1_分支

v-if

v-else

v-else-if

v-show

前三个根据条件渲染不同的内容，v-show已经渲染根据ture or false决定是否显示内容

2.10.2循环

v-for遍历数组

<li v-for=''item in arr''>{{item}}</li>        细节，当需要索引可以写(item,index) in arr

key：区分不同元素        :key='item.id'

遍历对象        

v-for='(v,k,i) in Object'         其中v是属性值，k是属性名，i是索引。

2.10.3_v-if和v-for可以结合判断内容是否可以渲染到屏幕上。

如：v-if='v===13'    v-for='v in object'