vue.js基础还不会？——看这篇文章就够了

知识点：

vue.js介绍
指令
修饰符
计算属性
侦听器
过滤器
生命周期
组件
路由

一、vue.js介绍

vue是一套用于构建用户界面的渐进式框架
vue的核心只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合

二、指令

（一）、指令

本质就是自定义属性
VUE中指令都是v-开头

（二）、内置指令

1、v-cloak

防止页面加载时出现闪烁问题

2、v-text

v-text指令用于将数据填充到标签中，作用与插值表达式，但是没有闪动问题

如果数据中有html标签会将html标签一并输出

注意：此处为单向绑定，数据对象的值改变，插值会变化；但是当插件发生变化并不会影响数据对象的值

3、v-html

用法和v-text相似，但是他可以将html片段填充到标签中

可能有安全问题，一般只在可信任内容上使用v-html，永不使用在用户提交的内容上

它与v-text区别在于v-text输出是纯文本，浏览器不会对其在进行html解析，但是v-html会将其当html标签解析后再输出

4、v-pre

显示原始信息跳过编译过程

跳过这个元素和他的子元素的编译过程

一些静态的内容不需要编译加这个指令可以加快渲染

5、v-once

执行一次性的插值表达式【当数据改变时，插值出的内容不会继续更新】

6、v-model

v-model是一个指令，限制在
、components中使用

双向数据绑定：
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，视图也会跟着同步变化

7、v-on

用来绑定事件的

写法：v-on：click 缩写为@click;

8、v-bind

v-bind指令被用来响应地更新html属性
v-bind：href可以缩写为 :href;
可以缩写为<img:src ="imagesrc”>

9、条件判断 v-if

使用场景

多个元素通过条件判断展示或隐藏某个元素或者多个元素
进行两个视图之间的切换

v-show和v-if区别

v-show本质就是标签display设置为none ，控制隐藏

v-show只编译一次，后面的其实就是控制css，而v-if不停的销毁和创建，所以v-show性能更好一些。

v-if是动态向dom树内添加或者删除DOM元素。

v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和创建内部事件的监听和子组件

10、循环结构 v-for

用于循环数组里面的值可以是对象，也可以是普通元素