前端框架之Vue
一.vue的介绍
目前前端有常用的三大框架
| 框架 | 介绍 |
| vue | 尤雨溪,渐进式的JavaScript框架 |
| react | Facebook公司，里面的高阶函数非常多，对初学者不用好 |
| angular | 谷歌公司，目前更新到6.0，学习angular需要学习typescript基础
Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |
二.vue的基本引入和创建
1.下载
cdn方式下载
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.引包
也可以将文件下载到本地,然后引入,<script src='./vue.js'></script>
3.实例化
new Vue({
el:'#app', //绑定
data:{
//数据属性
msg:'黄瓜',
person:{
name:'liu'
},
msg2:'Hello Vue'
}
});
二.Vue的模板语法
可以插入你任何你想插入的内容,除了if-else,if-else用三元运算符代替
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>
三.Vue的指令系统之v-text和v-html
v-text相当于innerText
v-html相当于innerHTML
四.Vue的指令系统之v-if和v-show
v-show相当于style.display
v-show和v-if的区别:
v-if是'真正'的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做一直到条件第一次变为真时,才会开始渲染条件块.
相比之下,v-show就简单的多,不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.
一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销.因此,如果需要非常频繁的切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好.
五.v-bind和v-on
v-bind可以绑定标签中任何属性
v-on 可以监听 js中所有事件
简写:v-bind:src 等价于 :src
v-on:click 等价于 @click
六.v-for遍历列表
v-for可以遍历列表,也可以遍历对象,在使用时,一定要绑定key,避免vue帮咱们计算DOM.
七.v-model 双向的数据绑定
八.组件
(1)局部组件
let Son = ()
data(){
return{
}
},
methods:{
},
computed:{
},
create(){
}
}
.....
{
template:`<son />`,
components:{
Son
}
}
三部:声子,挂子,用子
(2)全局组件
vue.component('组件的名字',{
data(){
return{
msg:'haha'
}
},
methods:{
},
computed:{
},
create(){
}
})
(3)父子组件传值
父=>子
(1)在子组件中声明props,只要声明了该属性,那么就可以在组件中任意使用
(2)在父组件通过绑定自定义属性,挂载数据属性
<Son :msg = 'msg'>
<Son msg = 'liu'>
子=>父
(1)在子组件中,通过this.$emit('方法名',值)
(2)在父组件中,绑定自定义的事件
平行组件
bus 公交车对象:绑定 $on和$emit
let bus = new Vue();
A=>B传值
$emit('函数名',值) ==> $on('函数名',()=>{})
九.过滤器
1.局部过滤器 在当前组件内部使用过滤器
