Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 使用了基于 HTML 的模板语法,允许声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
vue中常见的指令和含义
v-text 渲染内容到节点中,不解析html
v-html 渲染内容到绑定的节点中,解析html
v-if 通过条件判断节点是否显示
v-show 通过条件判断节点是否显示
v-on 绑定事件,可以简写为@
v-bind 绑定属性 可以简写:
v-for 循环列表指令
v-model 表单双向绑定指令
v-if和v-show的区别
当条件改变的时候v-if是通过DOM节点的添加和删除 控制结点的显示隐藏,v-show是通过css样式控制结点的显示隐藏,
v-if的切换成本比较高,v-show的渲染成本比较高,所以当切换的频繁的时候建议使用v-show,如果初次渲染数据比较多,建议使用v-if
vue中key的作用
唯一标识DOM结点,可以提高vue的渲染效率,也可以避免因DOM结点的插入而导致DOM更新错误的问题。
Vue中常见的修饰符及含义
.stop 阻止事件冒泡
.capture 设置事件捕获
.prevent 阻止默认事件
.self 之间作用在本身触发
.once 事件只触发一次
.navtive 组件触发的是原生的js事件
键盘修饰符操作
.enter, .space, .....等
.number 修饰符可以将 输入的值转化为Number类型
.trim 修饰符会自动过滤掉输入的首尾空格
.lazy 把v-model改为失去焦点触发
Vue中过滤器定义
过滤器分为全局过滤器和局部过滤器,全局过滤器可以在任何页面调用,局部过滤器只能在当前组件调用,过滤器使用管道符|调用,可以串联使用
全局过滤器定义: Vue.filter("过滤器名字",()=>{});
局部过滤器 filters:{过滤器名字}
vue中生命周期
创建阶段
beforeCreate() 创建前阶段,这个时候还不能使用data中的数据
created() 创建完成 最早可以使用data中的数据
挂载阶段
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted: 挂载完成, DOM节点挂载到实例上去之后调用该钩子。
更新阶段
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated:数据更新完成并且DOM更新完成后调用
销毁阶段
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定