Vue
渐进式框架
众前端周知,Vue是一套用于构建用户界面的渐进式框架,自底向上逐层应用,关注视图层。那我们就来说道说道:
渐进式:声明式渲染->组件系统->客户端路由(router)->数据管理状态(Vuex)->构建工具(npm)
所谓的渐进式:我觉得就是渐进嘛,一步一步来,首先Vue给了你核心的Vue核心库,实现最基本的组件系统、双向数据绑定。但是你要新的,强大的功能,可以啊,没有问题,自己添加嘛,逐步根据自己的需求添加相应的插件。就比如说:你需要路由了,你去添加Vue-router,你需要状态管理了,你添加Vuex,渐进式的添加使用你所需要的功能。
核心点:
响应式数据绑定:数据发生变化的时候,试图自动更新,实现数据的双向绑定。就是利用ES6的Object.definedProperty中的getter/setter代理数据,监控对数据的操作。
组合的视图组件:页面最终就是一个组件树,采用树形的数据结构进行数据结构的设计,方便之后的维护和使用。
虚拟DOM
利用内存中生成的与真实的DOM对应的dom树结构,当数据发生变化时,用最小的代价将刷新的组件应用到DOM操作上。
基本的内部指令
这个部分主要的指令就不展示了,提几个有意思的点吧:
-
v-if 和 v-show的区别
v-if:在切换过程中条件内的事件监听器和子组件适当的被销毁,重建,开销比较高,一般改变比较少的时候使用;
v-show:灵活的使用css的display属性,开销比较小,需要频繁切换的时候使用。 -
{{msg}}一般取值的话会有一个弊端就是,在网速很慢的时候,或者js加载很慢的时候,就会在页面直接显示{{msg}},可以用v-text解决这个问题、
<div>{{meg}}</div>
<!-- 和下面的一样 -->
<div v-text="meg"></div>
3.v-pre
直接输出原值,也就是不会输出渲染的值(vue中的data)
<div v-pre>{{meg}}</div>
4.v-cloak
在vue渲染完了指定的整个DOM之后才进行显示,必须和CSS一起使用
// css
[v-cloak] {
display: none;
}
// html
<div v-cloak>{{meg}}</div>
5.v-once
只显示一次DOM改变的值,之后就不再改变了,优化了DOM消耗资源的问题,对页面的加载其实是很好的
生命周期
常用的一些选项
- computed
计算属性:主要就是对原来的数据进行改造(格式化输出:大小写转换,排序,添加符号) - methods
方法属性:用于绑定HTML中的事件对应的方法 - watch
数据变化监听器:主要用于监测data中的数据变化
4.filters
过滤器:通常格式化字符,使用传值
filters: {
filterA(value) {
return value.toUpperCase();
}
}
- mixins
混入:用于减少代码污染、减少代码量、实现代码的重用
6.extends
扩展:对构造器进行扩展
组件基础
- 组件注册
全局注册
// script
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局组件显示: {{ count }}</button>'
});
new Vue({
el: '#app'
});
// html使用
<button-counter></button-counter>
局部注册
// script
new Vue({
el: '#app',
components:{
"button-inner":{
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部组件显示: {{ inner }}</button>'
}
}
});
// html使用
<button-inner></button-inner>
简单对比组件,可以发现:就是说全局的组件注册呢,就是Vue.component的一个使用,在对象里面添加组件名,组件属性,之后就可以在全局调用组件了,一般不推荐使用吧;之后就是局部组件,那就是在绑定的组件里面去声明组件,然后调用,这个用法在路由中不就得到了广泛的应用么
父子组件
// script
// 子组件
var city = {
template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
template:
`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city": city
}
}
// 实例化
new Vue({
el: '#app',
// 定义局部组件
components:{
// 组件注册
"parent": parent
}
});
// html使用
<parent></parent>
模板使用
vue中的模板用template实现
- 选项模板:一般选项模板就是在实例化的时候将template放入实例化之中
- template标签模板
- script type="x-template"标签模板
插槽 slot
关于插槽这个概念,通俗的根据我的理解,就是一个用来放置其他东西的空间,应该是说:可以提供空间给其他的组件使用
- 单个slot
也就是我们说到的默认插槽,匿名插槽,不设置name属性 - 具名slot
slot添加了name属性,也就是具名插槽了,可以在一个组件中出现多次
必须写在template中
写在最后,几天重新学Vue之后吧,感觉比之前是好挺多的,对很多的概念啥的有了更深的理解吧,就像之前的ThinkPHP5.0,起初就是为了实现基本的功能,但是,还是没有深入的了解到整个框架比较重要的部分吧。二次入门还是收获很多的。有些东西还是得经过时间的磨练呀