vue 基础

数据驱动dom 是vue的核心理念。

1. v-bind 的基本用途是动态更新HTML元素上的属性，比如 ID class 等，

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">

2. v-if 当show为true时， p元素会被插入，为false时p元素会被移除。

<p v-if="show">显示这段文本</p>

3. v-on 用来绑定时间监控器，可以监听原生的dom事件， click, dbclick keyup, mouseover等，表达式可以是一个方法名，这些方法都写在vue实例的methods方法内，实例的this指向实例本身。

<p v-if="show"></p>
<button v-on:click="show=false"></button>

4. v-html 可以写html代码，会自动识别标签，但是为了防止xss攻击，需要将<>符号转义。

<p v-html="link"></p>
data: {
link="&lt;a&gt;链接&lt;/a&gt;"
}

5. v-pre 想显示{{}}这个标签。用这个。

6. 过滤器用 | 

<!--串联-->
{{message | filterA | filterB}}

<!--接收参数-->
{{message | filterA('arg1','arg2') }}

7. 前台显示数据用{{}}

8. 语法糖

<!--v-bind缩写为 :-->
<img v-bind:src="imgUrl">
<!--缩写为-->
<img  :src="imgUrl">

<!--v-on:click缩写为@click-->
<button v-on:click="show=false"></button>
<!--缩写为-->
<button @click="show=false"></button>
 

新建vue时，写数据时，什么时候用{,什么时候用[

第一层el: data: filters时都是用打括号扩起来，在打括号里面写数据的时候，数组用[, 表用{。

例子

var app=new Vue({
el:'#app',
data:{cart:[
{name:"zhangsan"},
{name:"lisi"},
{name:"wangermazi"},
{name:"xiaotaoqi"}]}
});