VUE基础知识

发表于 | 分类于 ， |

vue.js 轻量级的MVVM框架

数据驱动+组件化的开发

vue介绍：

基本指令

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

1

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

2

v-show根据表达式的真假来删除和插入元素
v-if=”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使用

1
2
3
4
5
<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

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是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">
v-on 有简写形式，如下：
<a @click="doSomething">

7

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

数据只绑定一次

1
{{{msg}}}

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

二、生命周期 钩子函数

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

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

1、过滤器

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

1
2
{{msg| filterA}}
{{msg| filterA | filterB}}

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

2、方法、事件

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