文章目录
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的对象暴露出去
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
