VUE01

vm是什么？

一个监听 数据模型M 与 视图模型V 的对象。
一方面把 M 同步到 V 上显示出来；
另一方面把 v 上的数据变化同步到 M 中。

差值表达式

写法 {{}}
把数据模型中的数据渲染到视图中
遵循语法为表达式和三元表达式

避免使用JavaScript中的关键字

v-text指令

增强HTML的功能，把数据渲染到指定的元素中
直接写入HTML标签中属性中的位置

v-HTML指令

在网站上渲染动态的HTML是非常危险的，容易导致XSS攻击
永远不要在用户提交的内容中使用

写入HTML的属性位置中，在渲染HTML结构时使用

v-bind

作用：
    把数据绑定给元素的属性里
用法：
    <p v-bind:class="className"></p>
    <p :class="className"></p>
    <p :class="{'red_color':true}"></p>

v-for

渲染数组：
    v-for="item in arr"
    v-for="(item,index) in arr"
渲染对象:
    v-for="value in obj"
    v-for="(value,key) in obj"
    v-for="(value,key,index) in obj"

一下两种方式不会产生视图更新：
    1.当使用Array.length改变数组的时候
2.当使用Array[下标]改变数组的时候

解决办法：
1.使用Vue.set(arr,index,newVal)arr需要变化的数组，index数组要变化的项，newVal变化后的值
2.Array.prototype.splice()

v-for必须结合key属性来使用，把数组没每一项唯一标记，当哪一项改变时，只会更新那一项。提升性能。key值必须唯一，不能重复
            <p v-for="item in user" :key="item.name">{{item.name}}:{{item.age}}</p>

v-model

用来双向数据绑定,实现view和model中的值同步变化
只能在input/select/textarea中使用

v-on

用来监听DOM事件
使用方法：

1.标签属性位置写上v-on:任意事件类型='执行函数'

2.简写：@时间类型='执行函数'(推荐)

3.执行函数添加参数

    @click="setName('itcast')"
4.添加$event传递事件对象，只能使用$event且不能加引号

5.事件修饰符可以给时间添加特殊功能
    .stop阻止冒泡
    .prevent阻止默认事件
    <form v-on:submit.prevent="onSubmit">...</form>

6.添加按键修饰符(输入框)
    @keydown.enter  @keydown.13

v-if/v-show

控制元素的显示和隐藏

v-if通过dom来控制元素的显示和隐藏
y-show通过样式display:none来控制元素显示和隐藏

-涉及到大量dom操作使用v-show
-涉及到异步数据渲染的时候使用v-if

最后编辑于：2018.08.09 19:44:45