1. 软件架构模式
MVC模式:
- 控制器(Controller)- 负责其他
- 视图(View) - 图形界面设计
- 模型(Model) - 实现应有功能,进行数据管理
MVVM模式:
- 模型(Model)- 数据修改和操作的业务逻辑
- 视图(View)- 将数据模型转化为UI
- 视图模型(ViewModel)- 同步模型和视图数据
2. Vue优点
- 低耦合:视图(View)可以独立于模型变化和修改
- 可重用:可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑
- 独立开发:可以专注于业务逻辑和数据的开发
3. 生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
下面介绍四个常用钩子:
- created:在实例创建完成后被立即调用。
- mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
- destoryed:Vue 实例销毁后调用。
<div id='app'>{{message}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!'
},
created () {
alert('created')
},
mounted () {
alert('mounted')
},
updated () {
alert('updated')
},
destroyed () {
alert('destroyed')
}
})
</script>
//初始化data后执行created
//初始化el后执行mounted,确定后message被渲染
//app.message = "Hello,World!"后执行updated,确定后Hello,World!被渲染
//app.$destroy()后执行destroyed
4. 过滤器
<div id='app'>{{message | upMsg}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!'
},
filters: {
upMsg:function(value){
return value.toUpperCase()
}
}
})
</script>
5. 常见指令
- v-text
<div id='app' v-text=message></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!'
}
})
</script>
- v-html
<div id='app' v-html=message></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: '<p>Hello,Vue!</p>'
}
})
</script>
- v-bind
用来绑定任何活的属性。
<style>
.blue{
border: 1px solid blue
}
.red{
color: red;
}
</style>
<div id='app'>
<p v-bind:class=['red','blue']>{{message}}</p>
<p :class={red:true,blue:false}>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!'
}
})
</script>
- v-on
·stop:阻止单击事件冒泡
·prevent:提交事件不再重载页面
·once:事件将只会触发一次
<div id='app'>
<button v-on:click=plus>加</button>
<button @click.once=plus>减</button>
<span>{{num}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!',
num:1
},
methods: {
plus:function(){
this.num +=1
},
sub:function(){
this.num -=1
}
}
})
</script>
- v-cloak
和CSS一起使用,这个指令保持在元素上直到关联实例结束编译。
<style>
[v-cloak]{
color: red
}
</style>
<div id='app' v-cloak>
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!',
},
})
</script>
- v-if
<div id='app'>
<p v-if='1+1===3'>{{message1}}</p>
<p v-else>{{message2}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message1: 'Hello,Vue!',
message2: 'Hello,World!',
},
})
</script>
- v-for
以object为例,默认先遍历value
<div id='app'>
<li v-for='msg in message'>{{msg}}</li>
<li v-for='(val,key,index) in message'>{{val}},{{key}},{{index}}</li>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: {
'键1':'值1',
'键2':'值2'
}
},
})
</script>
- v-show
v-show 和v-if 不显示元素的区别在于,v-show渲染了元素,设置display为none,v-if直接没渲染
<div id='app'>
<p v-show=true>{{message}}</p>
<p v-show=false>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'Hello,Vue!'
},
})
</script>
- v-model
用于在表单类元素上双向绑定事件
<div id='app'>
<div>
<input v-model=text>input is {{text}}
</div>
<div>
<select v-model=item>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
select is {{item}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
text:'',
item:''
},
})
</script>
7. 计算属性
- 计算属性 vs 模板内表达式:计算属性适用于逻辑复杂时,模板内表达式适用于逻辑简单时
- 计算属性 vs methods:计算属性有缓存,在数据变化时执行,方法在触发渲染时执行
- 计算属性 vs 侦听器:计算属性仅用来计算,侦听器用来进行异步操作或者上报数据等变大较大的操作
<div id='app'>
year: {{plus}}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num:2018
},
computed: {
plus:function(){
return this.num+1
}
}
})
</script>
网友评论