VUE
一、简介
是渐进式JavaScript框架
-
作用:
动态构建用户界面
-
特点
- 遵循MVVM模式
- 编码简洁,体积小,运行效率高,适合移动/PC端开发
- 它本身只关注UI,可以轻松引入vue插件或者其他第三库开发项目
-
与其他前端JS框架的关联
- 借鉴angular的模板和数据绑定技术
- 借鉴react的组件化和虚拟DOM技术
-
vue扩展插件
- vue-cli: vue 脚手架
- vue-resource(axios): ajax 请求
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller: 页面滑动相关
- mint-ui: 基于 vue 的 UI 组件库(移动端)
- element-ui: 基于 vue 的 UI 组件库(PC 端)
-
vue的MVVM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eAc3z9Zp-1621839417693)(C:\Users\22332\AppData\Roaming\Typora\typora-user-images\image-20210516083955831.png)]
二、vuetest模块
1.helloword示例
-
引入vue.js
-
创建vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问到)
-
双向数据绑定:v-model
-
显示数据:{{xxx}}
-
理解vue的mvvm实现
<div id="app"><!--view-->
<input type="text" v-model="name">
<p>Hello {{name}}</p>
<p v-text="name"></p>
</div>
<p>{{name}}</p>
<script src="../js/vue.js"></script>
<script>
//创建vue实例
const vm =new Vue({//配置对象
el:'#app',//element:选择器字符串
data:{//数据(model)
name:'afty!'
}
})
vm.name ='xffang'
</script>
<!--
MVVM:
model:模型,数据对象(data)
view:视图,模板页面
viewmodel:视图模型(vue的实例)
-->
2.模板语法
- 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性) - 双大括号表达式
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法 - 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
简洁写法:
:xxx=‘yyy’ - 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click=‘xxx’
简洁写法:
@click=‘xxx’
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{content}}</p>
<p>{{content.toUpperCase()}}</p>
<h2>2. 指令一: 强制数据绑定</h2>
<a href="url">访问指定站点</a><br>
<a v-bind:href="url">访问指定站点2</a><br>
<a :href="url">访问指定站点2</a><br>
<h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="test">点我</button>
<button @click="test">点我</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
content: 'NBA I Love This Game',
url: 'http://www.atguigu.com'
},
methods: {
test () {
alert('好啊!!!')
}
}
})
</script>
3.计算属性和监视
- 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
-
监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算 -
计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
const vm =new Vue({
el:'#demo',
data:{
firstName:"A",
lastName:"B",
fullName2: 'A B'
},
computed:{//配置计算属性
//什么时候执行:初始化显示/相关的data属性数据发生改变
//计算并返回当前属性的值
fullName1(){//计算属性中的一个方法,方法的返回值作为属性值
console.log("fullName1()");
return this.firstName+' '+this.lastName
},
fullName3:{
//1.你定义的,2.你没有调用,3.但最终它执行了
//1.什么时候调用?,2。用来做什么
//回调函数 当读取当前属性值回调,根据相关数据j计算并执行当前属性的值
get(){
return this.firstName+' '+this.lastName
},
//回调函数,当属性值发生改变时回调,更新相关的属性数据
set(value){//value就是fullname3的最新属性值
const names=value.split(' ')
this.firstName =names[0]
this.lastName=[1]
}
}
},
watch:{//配置监视
firstName:function (value){//firstName发生改变
console.log(this);//就是VM对象
this.fullName2= value+' '+this.lastName
}
}
})
vm.$watch('lastName',function (value) {
//更新fullname2
this.fullName2 =this.firstName+' '+value
})
</script>
4.class与style绑定
- 理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术 - class绑定: :class=‘xxx’
xxx是字符串
xxx是对象
xxx是数组 - style绑定
:style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
其中activeColor/fontSize是data属性
<style>
.aClass{
color: rebeccapurple;
}
.bClass{
color: red;
}
.cClass{
font-size: 30px;
}
</style>
<body>
<div id="demo">
<h2>1.class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx是字符串</p>
<p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
<p :class="['aClass', 'bClass']">xxx是数组</p>
<h2>2.style绑定: </h2>
<p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
a:'aClass',
isA:true,
isB:false,
activeColor:'red',
fontSize:20
},
methods:{
update(){
this.a='bClass',
this.isA=false,
this.isB=true,
this.activeColor ='green',
this.fontSize ='30'
}
}
})
</script>
</body>
5.条件渲染
- 条件渲染指令
v-if
v-else
v-show - 比较v-if与v-show
如果需要频繁切换 v-show 较好
<div id="demo">
<p v-if="ok">表白成功</p>
<p v-else>表白失败</p>
<hr>
<p v-show="ok">求婚成功</p>
<p v-show="!ok">求婚失败</p>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
ok: true,
}
})
</script>
6.列表渲染
- 列表显示
数组: v-for / index
对象: v-for / key - 列表的更新显示
删除item
替换item
7.事件处理
- 绑定监听:
v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event - 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation() - 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
<div id="example">
<h2>1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('abcd', $event)">test3</button>
<h2>2. 事件修饰符</h2>
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
</div>
<h2>3. 按键修饰符</h2>
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
},
methods: {
test1(event) {
alert(event.target.innerHTML)
},
test2 (msg) {
alert(msg)
},
test3 (msg, event) {
alert(msg+'---'+event.target.textContent)
},
test4 () {
alert('点击了链接')
},
test5 () {
alert('out')
},
test6 () {
alert('inner')
},
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
})
</script>
8.表单输入绑定
使用v-model(双向数据绑定)自动收集数据
- text/textarea
- checkbox
- radio
- select
9.vue实例—生命周期
-
vue对象的生命周期
1). 初始化显示- beforeCreate()
- created()
- beforeMount()
- mounted()
2). 更新状态
-
beforeUpdate()
- updated()
3). 销毁vue实例: vm.$destory()
- beforeDestory()
- destoryed()
- 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
<div id="test">
<button @click="destroyVue">destory vue</button>
<p v-if="isShow">尚硅谷IT教育</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#test',
data: {
isShow: true
},
mounted () {
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
},
methods: {
destroyVue () {
this.$destroy()
}
}
})
</script>
10.vue_动画
- vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class - 基本过渡动画的编码
1). 在目标元素外包裹
2). 定义class样式
1>. 指定过渡样式: transition
2>. 指定隐藏时的样式: opacity/其它 - 过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
<style>
/* 显示/隐藏的过滤效果 */
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/* 隐藏时的样式 */
.xxx-xxx-enter,.xxx-leave-to{
opacity: 0;
}
/* 显示的过滤效果 */
.move-enter-active{
transition: all 1s;
}
/* 隐藏的过滤效果 */
.move-enter .move-live-to{
opacity: 0;
transform: translateX(20px);
}
</style>
<div id="test">
<button @click="isShow=!isShow">toggle</button>
<transition name="xxx">
<p v-show="isShow" class="xxx-enter-to">hello</p>
</transition>
</div>
<div id="test2">
<button @click="isShow=!isShow">toggle</button>
<transition name="move">
<p v-show="isShow" class="move-enter-to">hello</p>
</transition>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#test',
data() {
return {
isShow:true
}
},
})
new Vue({
el:'#test2',
data() {
return {
isShow:true
}
},
})
</script>
</body>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Lorem</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#example-2',
data: {
show: true
}
})
</script>
11.过滤器
- 功能:
对要显示的数据进行特定格式化后再显示
- 注意:
并没有改变原本的数据, 可是产生新的对应的数据
-
定义和使用过滤器
- 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue })
- 使用过滤器
{{myData | filterName}} {{myData | filterName(arg)}}
<!-- 需求:对当前时间进行指定格式显示 --> <div id="test"> <h2>显示格式化的日期时间</h2> <p>{{date}}</p> <p>完整版:{{date | dateString}}</p> <p>年月日:{{date | dateString('YYYY-MM-DD')}}</p> <p>时分秒:{{date | dateString('HH:mm:ss')}}</p> </div> <script src="../js/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script> <script> //自定义过滤器 Vue.filter('dateString',function (value,format) { return moment(value).format(format || 'YYYY-MM-DD-HH:mm:ss'); }) new Vue({ el:'#test', data: { date:new Date() } }) </script>
12.vue指令
- 常用内置指令
- v:text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为 true, 当前标签才会输出到页面
- v-else: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 强制绑定解析表达式, 可以省略 v-bind
- v-model : 双向数据绑定
- ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
- 自定义指令
- 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
- 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML =binding.value.toupperCase()
}
}
}
- 使用指令
v-my-directive='xxx'
se**: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 强制绑定解析表达式, 可以省略 v-bind
- v-model : 双向数据绑定
- ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
- 自定义指令
- 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
- 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML =binding.value.toupperCase()
}
}
}
- 使用指令
v-my-directive='xxx'