初学Vue笔记

一、安装

(1)script

直接通过script加载CND文件

(2)npm

$ npm i vue --save-dev

(3)bower

$ bower i vue --save-dev

二、数据绑定

2.1  语法

2.1.2 插值

一般：<span>{{text}}</span>

只渲染一次数据，后续数据变化不再关心：<span>{{*text}}</span>

如果值是HTML片段text='<a>ffdff</a>'：<span>{{{text}}}</span>

双大括号也可以放在标签里，如<span data-id="{{id}}"></span>

Vue指令和自身特性内不能插值

2.1.2  表达式

{{num/3}}简单的运算

{{true?1:2}}三元运算，但是不能是if判断

{{array.split(",")}}内置方法

{{text | toUpperCase}}过滤器，并且过滤器可串联

{{text | filter a b}}也可传入参数

三、指令

3.1内部指令

3.1.1  

v-if   根据表达式的值，在DOM中生成或移除一个元素<p v-if="ifShow"></p>

3.1.2

 v-show   根据表达式的值来显示和隐藏HTML元素<p v-show="ifShow"></p>

需要频繁切换的话用v-show

3.1.3 

 v-else跟着v-if或v-show

3.1.4  

v-model指令用来在input、select、text、checkbox、radio等表单元素中创建双向绑定

v-model指令后面可以加多个参数，number、lazy、debounce

3.1.5  

v-for数据重复渲染元素v-for="(i,item )  in items"  i为自定义索引值

v-for后面可以跟内置的过滤器或排序数据一起使用：

1、filterBy

filterBy searchKey in ‘dataKey’

searchKey为过滤的关键字

dataKey为过滤数据的关键字

2、orderBy

orderBy sortKey reserveKey

sortKey是根据它来排序

reserveKey是选择倒叙还是正序  false  or true

3.1.6 

v-text可以更新元素的内容

3.1.7

v-bind