vue：基础语法

vue.js 轻量级的MVVM框架

数据驱动+组件化的开发

基本指令

一、数据双向绑定（基本指令）

1.

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if=“expression”

2.

v-show根据表达式的真假来删除和插入元素
v-show=“expression”

3.

可以用v-else指令为v-if或v-show添加一个“else块”。
v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-if和v-else连用时，不执行else时，else里面的HTML不渲染
v-if和v-show连用时，不执行else时，else里面的HTML渲染，只是display：none隐藏了

4.

v-for=“item in items” items是一个数组，item是当前被遍历的数组元素。
总是key配合v-for使用

    

        {{ todo.text }}
    

5.

v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的
特性（attribute–专门用来绑定属性），例如：v-bind:width=""
v-bind:argument="expression"
简写形式如下：
:argument="expression"

另外可以绑定类名
用法1：
:class="[className1,className2,className3]"其中，className1、2、3是数据 放在data中的
用法2：
:class="{className1:true,className2:false}"其中，className1、2是真正的类名
用法3：
:class="json" json是data里面的json
可以绑定style
:style="[c]" c是json形式的数据
:style="[c,d]"c和d都是json形式的数据，多个样式的写法
:style="json" json是data中的数据

6.

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：

v-on 有简写形式，如下：

7.

{{msg}}数据更新模板变化–>v-text=“msg” 后面的方法可以防止闪烁

{{*msg}}

数据只绑定一次

{{{msg}}}

将HTML转译输出–>v-html=“msg” 后面的方法可以防止闪烁，前面的方法v2.0已经删掉了

二、生命周期 钩子函数

• beforeCreate： 组件实例刚被创建 属性还没开始计算
• created：组件实例创建完成 属性已经绑定 DOM还没生成
• beforeMount：模板编译/挂在之前
• mounted：模板编译/挂在之后（不保证组件在document中）
• beforeUpdate：组件更新之前
• updated：组件更新之后
• activated：组件被激活时调用
• deactivated：组件被移除时调用
• beforeDestory：组件销毁前调用
• destoryed：组件销毁后调用

三、方法事件（其它基础知识）

1、过滤器

过滤模板数据 系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

注：过滤器主要是按照自己写的方法筛选数据

2、语法糖（注：即简写模式，@、：等）

3、方法、事件

一般定义的方法都放在methods中，进行调用

#end

原文链接