文章目录
Vue的特点
- 遵循MVVM模式
- 编码简洁、体积小、运行效率高、适合pc/移动端开发
- 它本身只关注UI,可以轻松引入vue插件或者其他第三方库来开发项目。
vue和其他前端框架的特点
- 借鉴了angular的模板和数据绑定技术
- 借鉴了react的组件化和虚拟DOM
MVVM
即:model view vueModel
Model层
- 数据层
- 数据可能是我们固定的死数据,也可以是来自服务器上(从网络上下载的数据)
- 在计数器的案例中相当于抽取的obj
View层
- 视图层,主要作用就是给用户展示各种数据
- 在前端开发中就是我们的DOM层
- 在计数器案例中就是我们的html标签+css样式组成的前台界面
VueModel层
- 视图模型层,是view和model沟通的桥梁
- 一方面可以实现dataBinding,将Model中数据的变化实时反映到View中
- 另一方面实现了DOM Listener,当DOM发生一些事件时(点击、滚轮、touch等),可以监听到,并在需要的情况下改变对应的data
计数器的MVVM
- Model : 就是我们的obj
- View : 依然是DOM
- VueModel:我们创建的vue实例
【之间如何工作】:
- 首先VueModel通过DataBinding让obj中的数据实时显示到DOM中
- 其次让VueModel通过DOMListener来监听DOM事件,并通过VueModel中的methods里面的具体操作,从而改变obj中的具体数据
vue的基本使用
vue实例传入的options对象
-
el
类型:string | htmlElement
作用:决定vue实例会管理哪一个dom
-
data
类型:object | function
作用:vue实例对应的数据对象
-
methods
类型:{[key:string]:function}
作用:定义属于vue的一些方法,可以在其他地方调用,也可以在指令中使用
基本指令
v-on:click='事件名'
》@click='事件名'
> 绑定事件监听器。- v-bind ==> 动态的绑定一个或多个属性(或者一个组件prop表达式)
- v-model =>在表单控件或者组件上创建双向绑定
- v-cloak => 和 CSS 规则如
[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
自定义指令
注册全局指令:Vue.directive('指令名',指定对应的处理函数)
注册局部指令:directives:{'指令名':指令对应的处理函数}
<div id="app">
<p v-text='msg'></p>
<p v-upper-text='msg'></p>
<p v-lower-text='msg'></p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.directive('upper-text',function(el,binding){
// el:指令所在的标签元素
// binding: 是一个对象,包含指令相关信息的对象
el.textContent = binding.value.toUpperCase()
})
const vm = new Vue({
el:'#app',
data:{
msg:'Take your time'
},
methods: {
},
// 定义局部指令
directives:{
'lower-text':function(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
})
</script>
计算属性
在computed属性对象中定义计算属性的方法,然后在页面中使用{{方法名}}来显示计算的结果
computed里面定义的方法执行时间:初始化显示时/方法里面的数据发生变化时都会执行
var vm = new Vue({
...
//计算属性
computed:{
//计算属性的方法,且方法的返回值作为属性值
fullName:function(){
// 相当于get方法,读取它的值 = 监视另外两个值的结果
return this.firstName + ' ' + this.lastName
},
// 计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
selectedAll: {
// 既要读取该属性的值。即监视其他选项的值,一旦他们都被全选,则该属性就是选中的状态,并将该选中的状态值设置给全选按钮
get () {
return xxx;
},
// 又要监视该属性的值,一旦他的值发生变化,其他的随之改变
set (vale) {
}
}
}
})
【什么时候用计算属性】???
-
该属性是由其他属性的值决定的,其他属性的值发生变化,则属性就会发生变化
computed:{ //相当于get方法,会将返回值作为该属性的值 fullName:function(){ return this.firstName + ' ' + this.lastName }
-
在满足条件1的情况下,该属性的值发生变化其他属性也会发生变化(全选/全不选按钮),则既需要get方法又需要set方法
selectedAll: { get () { return xxx; }, set (vale) { } }
监视属性
方法一:配置监视
var vm = new Vue({
...
watch:{
//指定要监视的属性
firstName:function(value){
//一旦firstName属性发生变化就会执行此函数
this.fullName = value + '' + this.lastName
}
}
})
方法二:vm对象监视
var vm = new Vue(){
...
}
vm.$watch('firstName',function(){
this.fullName = value + '' + this.lastName
})
强制绑定class
https://cn.vuejs.org/v2/guide/class-and-style.html
样式文件
<style>
.red{
color: red;
}
.b{
font-size: 30px;
}
</style>
html文件
<div id="app">
<p class="b" :class='a'>class为字符串形式:颜色red,大小:30px</p>
<!--样式red是否被绑定到p标签上取决于isRed的值是否为true-->
<p :class="{red:isRed,b:isBlod}">class为对象形式</p>
<button @click='updateStyle'>更新样式</button>
</div>
js脚本
<script>
var vm = new Vue({
el:'#app',
data:{
a:'red',
isRed:false,
isBlod:false,
},
methods: {
updateStyle:function(){
this.isRed = true,
this.isBlod = true
}
}
})
</script>
绑定内联样式
<p :style='{color:activeColor,fontSize:fontSize}'>color:red,fontSize:30px</p>
<script>
var vm = new Vue({
el:'#app',
data:{
activeColor:'red',
fontSize:'30px'
}
})
</script>
绑定监听
<div id="app">
<button v-on:click='handleTest1'>test1</button>
<button @click='handleTest2'>test2</button>
<button @click='handleTest3($event)'>test3</button>
<button @click='handleTest4'>test4</button>
<button @click="handleTest5($event,3)">test5</button>
<button @mouseenter="handle()">test6</button>
<button @mouseleave="handle()">test7</button>
</div>
<script>
new Vue({
el:'#app',
data:{
handleTest1(){
console.log('点击了test1')
},
handleTest2(){
console.log('点击了test2')
},
// 默认不填写参数的情况下,第一个参数则是event,event.target则是当前点击的button对象
handleTest3(event){
console.log('点击了test3',event.target.innerHTML)
},
handleTest4(event){
console.log('点击了test4',event.target.innerHTML)
},
handleTest5(event,num){
console.log('点击了test5',event.target.innerHTML,'--',num)
}
}
})。
</script>
事件修饰符
- 取消点击事件的默认冒泡行为
- 阻止默认行为:比如a链接的自动跳转
<div id="app">
<div class="wrapper" @click='clickWrapper'>
<div class="inner" @click.stop='clickInner'></div>
</div>
<a href="http://www.baidu.com/" @click.prevent='handleClick'>百度一下</a>
</div>
<script>
new Vue({
el:'#app',
data:{
clickWrapper(event){
console.log('wrapper')
},
clickInner(event){
// 原生js阻止事件冒泡
// event.stopPropagation()
console.log('inner')
},
handleClick(event){
// event.preventDefault();
console.log('点击链接')
}
}
})
</script>
按键修饰符
<div id="app">
<!-- 按下enter键才会输出您写的内容:<input type="text" @keyup.13='testKeyup'> -->
按下enter键才会输出您写的内容:<input type="text" @keyup.enter='testKeyup'>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
testKeyup(event){
console.log(event.target.value)
}
}
})
</script>
表单数据的自动收集
使用的是v-model来达到表单数据的自动收集
<!-- 组织表单的默认提交 -->
<form action="/xx" @submit.prevent='handleSubmit'>
用户名:<input type="text" v-model='username'> <br>
密码:<input type="password" v-model='password'><br>
<!-- 注意:
这里都给他们加上相同的v-model='sex'
要给他们分别加上对应的value值
-->
<span>性别</span> :
<label for="male">
男<input type="radio" id="male" value="男" v-model='sex'>
</label>
<label for="female">
女:<input type="radio" value="女" id="female" v-model='sex'>
</label>
<br>
<!--
多选框同单选框一样:
添加相同的v-model
添加对应的value
-->
<span>爱好</span> :
<label for="run">
跑步<input type="checkbox" id="run" v-model='hobbies' value='跑步'>
</label>
<label for="read">
看书<input type="checkbox" id="read" v-model='hobbies' value='看书'>
</label>
<label for="video">
看剧<input type="checkbox" id="video" v-model='hobbies' value='看剧'>
</label>
<label for="music">
音乐<input type="checkbox" id="music" v-model='hobbies' value='音乐'>
</label>
<br>
<span>城市</span> :
<select name="cities" v-model='selectCityId'>
<option value="">未选择</option>
<!-- 遍历数据,并形成下拉框 -->
<option :value="city.id" v-for="(city,index) in allCities" :key='index'>{{city.name}}</option>
</select><br>
<span>描述信息</span>
<textarea name="desc" id="desc" cols="30" rows="10" v-model='desc'></textarea><br>
<!-- 使用button的方式提交在这里没有组织它的一个默认行为 -->
<!-- <button type="submit">提交</button> -->
<input type="submit" value="注册">
</form>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'',
password:'',
sex:'女',
hobbies:['看书'],
selectCityId:1,
allCities:[
{id:1,name:'北京'},
{id:2,name:'上海'},
{id:3,name:'广州'},
{id:4,name:'杭州'},
],
desc:'',
},
methods:{
handleSubmit(){ console.log(this.username,this.password,this.sex,this.hobbies,this.selectCityId,this.desc)
}
}
})
</script>
vue实例的生命周期
生命周期中的三大阶段:每一个阶段都会对应一些生命周期的函数(也称为钩子)
-
初始化显示
beforeCreate() // 实例被完全创建之前调用,基本初始化(无data和methods,但是有基本事件和周期函数) created() // 实例被初始化后调用(有data和methods) beforeMount() // 模板在内存中已经编译完成时调用,但未被挂载到页面,页面还是之前的样子 mounted() // 将内存中编译好的模板对应的DOM树挂载到真实页面时被调用,页面已经是刚渲染好的页面
【mounted()函数的调用时机:页面进行重新渲染后就会立即调用】
- 页面的首次渲染
- 当前页面进行刷新
注意:
v-if
会导致页面重新渲染(会重新加载 页面)
v-show
不导致页面重新渲染(不会重新加载页面,仅仅是显示隐藏)**mounted()**函数在【整个实例中】只会执行一次,一般会做一些ajax请求获取数据,进行数据的初始化
-
更新显示
beforeUpdate() // 数据发生改变且页面更新之前时才调用,数据改变但页面未更新 updated() // 数据改变且页面被重新渲染后调用,此时数据和页面同步,都是最新的
-
销毁
beforeDestroy() // 实例被销毁之前调用,此时data和methods还是可用的 destroyed() // 实例被销毁之前调用,此时data和methods已经不可用了
常用方法:
mounted()
:发送请求ajax请求,启动定时器等异步任务beforeDestroyed
:做收尾工作,比如清除定时器
过渡和动画
指的是一个元素在显示和隐藏时的一个过渡和动画
操作css的transition和animation
vue会给目标元素添加/移除特定的class
【具体步骤】:
-
在目标元素外包裹:
-
定义class样式
指定过渡样式:transition
指定隐藏样式:opacity/其他
vue在加了<transition>
标签的元素提供了三个进入过渡的类,和三个离开过渡的类。
【原理】
【进入动画的生效时间】
这里的‘插入’指的是元素的插入
【离开动画的生效时间】
过滤器
主要是对我们要显示的数据进行格式化。比如日期
//这里使用到的moment.js第三方库,使用cdn的方式进行引入的
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.js"></script>
<div id="app">
当前日期(未处理):{{ curTime }} <br>
当前日期(格式化):{{ curTime | dateString }} <br>
当前日期(年月日):{{ curTime | dateString("YYYY/MM/DD") }} <br>
当前日期(时分秒):{{ curTime | dateString("HH:mm:ss") }} <br>
</div>
<script>
//这里的回调函数中的value是需要格式化的数据即curTime;
// 而第二个参数(可省)format就是dateString中传过来的参数
Vue.filter('dateString',function(value,format){
return moment(value).format(format || "YYYY/MM/DD HH:mm:ss")
})
const vm = new Vue({
el:'#app',
data:{
curTime : new Date(),
}
})
</script>
vue插件
-
定义需要暴露的对象
-
在对象上添加install函数,并在此函数中添加自定的方法
全局:添加到Vue上
实例:添加到Vue.prototype上
-
将要暴露的对象作为window的对象暴露出去