Vue基础
Vue是基于M(数据)V(视图)VM(调度者)这种设计模式开发出来的一个框架
MVC和MVVM之间的区别: MVC是单向通信 MVVM是双向数据绑定
Vue基本的编码步骤
- 引入Vue.js框架
<script src='./src/vue.js'></script>
- 在script标签部分创建一个Vue实例
var vm = new Vue({
el:'#app', // 通过选择器找到一个让vm实例监管的区域
data:{
// 在data中定义的数据就是整个Vue实例可以用到的数据
msg:'hello'
}
})
- 在HTML结构部分书写Vue代码
<div id = 'app'>
{{msg}}
</div>
Vue指令
-
{{}}
:插值表达式,用于显示data
中定义的数据 -
v-text
:用于显示data
中定义的普通文本数据
new Vue({
el:'#app',
data:{
msg:'普通文本数据'
}
})
<p v-text = 'msg'></p>
v-html
:用于显示data
中定义的富文本数据(带有HTML标签的文本)
new Vue({
el:'#app',
data:{
msg:'<p>富文本数据<p/>'
}
})
<div v-html = 'msg'></div>
v-bind
:动态的给元素绑定属性
new Vue({
el:'#app',
data:{
url:'http://www.baidu.com/'
}
})
<a v-bind:href = 'url'>百度</a>
v-for
:用于循环渲染元素进行显示
<div v-for = '(item,index) in list' :key = 'index'>
<!-- 数组中的每一项 -->
{{item}}
<!-- 当前项的索引 -->
{{index}}
</div>
v-model
:用于对表单元素实现双向数据绑定,即模型中数据发生变化可以直接更新视图,视图中数据发生变化也可以影响到模型
<!-- v-model 指令只能用于表单元素和组件 常见于input/textarea/select标签上 -->
<input v-model = 'name'></input>
v-on
:绑定事件
<button v-on:click = 'clickHandle'></button>
new Vue({
el:'#app',
// methods中专门用来定义方法
methods:{
clickHandle:function(){
console.log('点击事件被触发了')
}
}
})
v-if
:控制元素的显示隐藏
通过添加和移除元素控制元素显示隐藏
如果元素初始状态是隐藏的,而且不涉及频繁显示隐藏切换,推荐使用v-if
<div v-if = 'isshow'></div>
new Vue({
el:'#app',
data:{
isshow:true
}
})
v-show
:控制元素的显示隐藏
通过给元素设置
display:none
的样式控制元素显示隐藏
如果元素涉及频繁显示隐藏切换,推荐使用v-show,性能会比v-if好
<div v-show = 'isshow'></div>
new Vue({
el:'#app',
data:{
isshow:true
}
})
使用样式
使用class样式
- 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
- 直接在元素上通过
:style
的形式,书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象,定义到
data
中,并直接引用到:style
中
- 在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style
中通过数组,引用多个data
上的样式对象
- 在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
ref获取DOM
通过给元素设置ref属性,然后使用this.$refs.属性值得方式可以获取到DOM
<div ref = 'dv'></div>
<button @click = 'getdv'>获取div元素</button>
new Vue({
el:'#app',
methods:{
getdv(){
console.log(this.$refs.dv)
}
}
})
自定义指令
指令能够帮助开发者操作DOM,当系统指令不能够满足需求时,就可以使用自定义指令进行DOM操作;将操作DOM的方式封装成指令后首先可以重复使用,其次封装成指令的过程是vue内部提供的方法,这些方法在性能上比直接操作DOM元素要高。
Vue.directive('mycolor',{
// 指令的钩子函数
inserted(el,binding){
// el 是指令所在的元素对象
// bingding是一个对象
// binding.value // red 指令等号后面表达式的值 也就是变量的值
// binding.expression // 指令等号后面的表达式 本质就是一个变量
}
})
new Vue({
el:'#app',
data:{
color:'red'
}
})
<div v-mycolor = "color"></div>
自定义过滤器
在数据展示之前,对原始数据进行处理并返回处理后的数据进行展示,不改变原始数据
过滤器只能用在插值表达式和属性绑定(v-bind)中
Vue.filter('过滤器名称',function(data,arg){
// data是原始数据,即管道符前面的数据
// arg 是使用过滤器时传递的参数
// 1. 对原始数据进行逻辑处理
// 2. 处理完成后进行return
return `处理完的数据`
})
<div>{{原始数据 | 过滤器名称(参数)}}</div>
计算属性computed
用于定义一种可以随着所依赖数据发生变化的属性
new Vue({
el:'#app',
// data中定义普通属性
data:{
msg:''
},
// compluted中定义的函数名就是计算属性 属性的值是该函数的返回值
// 计算属性的值会随着依赖数据的变化而变化
// 例如this.msg被修改 则comMsg的值也会重新计算
compluted:{
comMsg(){
return this.msg
}
}
})
监听器 watch
监听data中定义的数据的变化
new Vue({
el:'#app',
data:{
msg:'被监听数据',
obj:{
name:'zxx'
}
},
watch:{
msg(newVal,oldVal){
// 根据数据变化做相关逻辑处理
// newVal 变化后的值
// oldVal 变化前的值
},
// 当被监听的数据是复杂数据类型时,一般需要用深度监听才可以监听到复杂数据类型内部的数据变化
obj:{
handler(newVal,oldVal){
},
deep:true
}
}
})