一.Vue实例
1.通过new关键字实例化Vue({})构造函数
<script>
var vm =new Vue({
//选项 **
})
<script>
2.实例化Vue时的参数内的属性,我们称为选项*:
1.data Vue实例数据对象
案例代码:
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '定义初始数据!'
}
});
console.log(vm.$data.name);
console.log(vm.name);
</script>
</body>
2.methods 定义Vue实例中的方法
案例代码:
<body>
<div id="app">
<button @click='showInfo'>请单击</button>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '请单击'
},
methods:{
showInfo:function(){
this.msg = '点击之后的内容'
},
showInfo2(){
this.msg = '点击之后的内容'
}
}
});
</script>
</body
3.commponents 定义子组件
案例代码:
4.computed 计算属性
案例代码:
<body>
<div id="app">
<p>总价格:{{totalPrice}}</p>
<p>单价:{{price}}</p>
<p>数量: {{num}}</p>
<div>
<button @click="num==0?0:num--">
减少数量
</button>
<button @click="num++">
增加数量
</button>
<button @click="logTotalPrice">
打印总价格
</button>
</div>
</div>
<script>
var vm = new Vue({
el:'app',
data: () => ({
price:20,
num:0
}),
computed:{ //计算属性
totalPrice(){
console.log("totalPrice计算属性执行了");
return this.price * this.num;
}
},
methods:{
logTotalPrice(){
console.log('totalPrice的结果'+this.totalPrice);
}
}
});
</script>
</body>
5.filters 过滤器
案例代码:
<body>
<div id="app">
<div>{{message | toUppercase}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'hellowrld'
},
filters: {
toUppercase(value){
return value ? value.toUpperCase() : '';
}
}
});
</script>
</body>
<body>
<div id="app">
<div v-bing:id="dataId | formatId">hellowrorld</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
dataId:'dff1'
},
filters: {
formatId(value){
return value ? value.charAt(1)+value.index0F('d'):'';
}
}
});
</script>
</body>
6.el 唯一根元素
案例代码:
<body>
<div id="app">
{{name}}
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Vue实例绑定成功!'
}
});
</script>
</body>
7.watch 监听数据变化
案例代码:
<body>
<div id="app">
<input type="text" v-model='cityName'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
cityName:'shanghai'
},
watch: {
cityName(newValue,oldValue){ //newValue新的值 oldValue旧的值
console.log(newValue,oldValue);
}
}
});
</script>
</body>
3.computed计算属性
1.computed计算属性:计算属性结果会被缓存起来,当依赖的响应式属性发生变化时,才会重新计算,返回最终结果。
4.watch状态监听:
1.watch选项表示:监测data选项中的数据变化
2.应用场景:要在数据变化的同时进行异步操作或者是比较大的开销时使用
3.注意:watch是监测data的数据变化,watch的方法名必须与data的属性名一致。
5.filters过滤器
1.filters选项表示:对data选项中的数据进行格式化
2.应用场景:1)字符串字母大写,字符串大小写转换
2)日期的格式化
3使用方法:1.插值表达式{{data属性名 | 过滤器名称}}
2.属性绑定使用:V-bing:id=‘data属性名 | 过滤器名称'
二.数据绑定
内置指令
1.v-model 双向数据绑定,通常用在表单元素上,例如input ,textarea,select
案例代码:
<body>
<div id="app">
<input type="text" v-model = 'msg'>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: 'v-model指令'
}
});
</script>
</body>
2.v-text 插入文本内容, 除了v-model其他数据绑定都是单向的
案例代码:
<body>
<div id="app">
<p v-text='msg'></p>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '我是v-text'
}
});
</script>
</body>
3.v-html 插入包含html的内容,是将元素内部html与data属性进行单向数据绑定
案例代码:
<body>
<div id="app">
<div v-html="msg"></div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '<h2>我是v-html</h2>'
}
});
</script>
</body>
4.v-on 监听事件
案例代码:
<body>
<div id="app">
<p>{{msg}}</p>
<button v-on:click='showInfo'>请单击</button>
<!-- click简写 -->
<button @click='showInfo'>请单击</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '请单击按钮查看内容',
},
methods:{
showInfo(){
this.msg = '我是v-on指令'
}
}
});
</script>
</body>
5.v-bind 单向数据绑定
案例代码:
<body>
<div id="app">
<input type="text" v-bind:value='msg'>
<a v-bind:href="dataHref">我是一个超链接</a>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '我是v-bind',
dataHref: 'www.baidu.com'
}
});
</script>
</body>
6.v-for 1.v-for:用于遍历数组,可实现页面列表渲染
2.语法:v-for="(value,key)in xxx"
案例代码:
<body>
<div id="app">
<div v-for="(value,index" in list>
索引是{{index}} ,元素内容是{{value}}
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
list:[1,2,3]
},
});
</script>
</body>
7.v-if和v-show 1.用来控制元素显示或隐藏,属性为布尔值
2. 1)v-if控制元素是否渲染
2)v-show控制元素是否显示,操作display属性
案例代码:
<body>
<div id="app">
<!-- 两种使用方法 -->
<!-- <div v-if="isShow" style="background-color: #ccc;">我是div</div> -->
<div v-show="isShow" style="background-color: #ccc;">我是div</div>
<button @click ="isShow =! isShow">我是切换显示和隐藏的按钮</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
isShow: true
},
});
</script>
</body>
三.Vue事件
一.事件监听
1.事件监听:其实就是给元素绑定事件,调用事件处理函数.
2.语法: 1.v-on:事件名 = '事件函数',
2.v-on: 事件名 = 'js代码'.
3.代码: <button v-on:click="count += Math.random()">随机数</button>
案例代码:
<body>
<div id="app">
<button @click='count += Math.random()'>随机数</button>
<p>自动生成的随机数为{{count}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
count: 0
}
});
</script>
</body>
4.按键修饰符: 1.监听那个键盘按下/抬起
2.v-on:keyup.按键修饰符="xxx"
3.按键修饰符其实就是按键名,代表监听哪个按键
4.v-on:keyup.enter="submit"
案例代码:
<body>
<div id="app">
<input type="text" @keyup.enter='submit'>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
submit() {
console.log('表单提交');
}
}
});
</script>
</body>
二.事件修饰符 点击事件@ = v-on.
1.常用修饰符
1).stop 1.阻值事件冒泡
2.代码:<button v-on:click.stop="doThis">阻值事件冒泡</button>
案例代码:
<body>
<div id="app">
<div @click='doParent'>
<button @click='doThis'>事件冒泡</button>
<button @click.stop='doThis'>阻止事件冒泡</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doParent(){
console.log('我是父元素的点击事件');
},
doThis(){
console.log('我是子元素的点击事件');
}
}
});
</script>
</body>
2).prevent 1.阻值默认事件行为
2.代码 <a href="www.baidu.com" @click.prevent>阻值默认行为</a>
案例代码:
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent>阻值默认行为</a>
<a href="www.baidu.com">不阻值默认行为</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
});
</script>
</body>
3).capture 1.用于将事件流程改为捕获阶段
2.代码 <div @click.capture='doParent'>
<button @click='doThis'>事件捕获</button>
</div>
3.注意:capture修饰符需要添加到父元素的事件上,不然不生效.
案例代码:
<body>
<div id="app">
<div @click.capture='doParent'>
<button @click='doThis'>事件捕获</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doParent(){
console.log('我是父元素的单击事件');
},
doThis(){
console.log('我是子元素的单击事件');
},
}
});
</script>
</body>
4).self 1.将事件绑定到自身,只有自身才能触发
2.代码:<div class="Odiv1" @click.self='doParent'>a
<div class="Odiv2" @click='doThis'>b</div>
</div>
3.代码说明:这个代码中当触发子div时,即使事件冒泡到父div,父div也不会触发事件
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/vue.js"></script>
<style>
.Odiv1 {
width: 80px;
height: 80px;
background: #aaa;
margin: 5px;
}
.Odiv2{
width: 50px;
height: 50px;
background: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="Odiv1" @click.self='doParent'>a
<div class="Odiv2" @click='doThis'>b</div>
</div>
<div class="Odiv1" @click='doThis'>c
<div class="Odiv2" @click='doParent'>d</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doParent(){
console.log('我是父元素的单击事件');
},
doThis(){
console.log('我是子元素的单击事件');
},
}
});
</script>
</body>
</html>
5).once 1.事件处理函数只触发一次.
2.代码: <button @click.once='doThis'>只执行一次</button>
案例代码:
<body>
<div id="app">
<button @click.once='doThis'>只执行一次</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doThis(){
console.log('我是当前元素的单击事件,只执行一次');
},
}
});
</script>
</body>
四.Vue组件
1.什么是组件
简略:可以理解为自定义标签,可以是一个标签组成,也可以是多个标签组成。
1.什么是组件:在Vue中,组件是构成页面中独立结构单元,组件主要以页面结构形式存在,不同组件也具有基本交互功能。
2.组件特性:
1.能够减少重复代码的编写,提高开发效率。
2.降低代码之间的耦合程度,使项目更易维护和管理。
3.根据业务逻辑实现复杂的项目功能。
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
//参数1:组件的名称
//参数2:组件的配置对象
Vue.component('my-component',{
//组件使用的数据
data(){
return {
count:0
}
},
//组件模板,组件显示的内容
template:'<button @click="count++"被单击了{{count}}次</button>'
});
var vm = new Vue({
el:'#app',
});
</script>
2.局部注册组件
1.局部组件,通过components选项来定义
2.组件定义:
<script>
var com1 = {
template: '<p>我是vm实例中注册的局部组件</p>'
}
var vm = new Vue({
el:'#app',
components: {
//key:组件名 , value:组件的配置对象
myComponent: com1
//'my-component': com1
}
});
</script>
3使用组件:
<div id="app"> <my-component></my-component> </div>
. 定义组件时如果是驼峰,在使用组件时必须换成短横线
4.全局组件与局部组件的区别:
1.全局组件在项目中的任何界面都可以使用
2.局部组件只能在当前界面使用
3.template模板
1.Vue提供了template标签,可以编写组件的结构
2.模板定义:
<template>
<p>{{title}}</p>
</template>
3.组件使用模板:
<script>
Vue.component('component',{
template:'#tem1',
data(){
return{
title: '我是组件内的title数据'
}
}
})
</script>
4.优势
1.改善开发体验:之前的组件模板都是直接以字符串形式书写,这种方式很容易出错
2.有代码提示,代码高亮,提高开发效率
4.组件直接的数据传递
- 在Vue开发中,我们会使用大量的组件,所以会存在组件嵌套的情况,那么父子组件之间会经常需要传递数据
- 传值方式
1.props传值
1.props:propertys,属性,意为通过属性传值
2. 传值步骤:
1.定义允许传值的属性:
Vue.component('my-parent',{ //props:规定组件可以通过哪些属性传递数据 props:['name'], template:'<div>我是父组件的{{name}}</div>' });
ps:在定义组件时,通过props来规定哪些属性可以
2.使用属性传值:
<div id="app"> <my-parent name='title'></my-parent> </div>
3.这种方式是父组件向子组件传值
1.my-parent是父组件
2.template的标签就是子组件
3.父组件在使用的时候,通过name属性,给子组件div传递值
4.案例代码
<body> <div id="app"> <my-parent name='title'></my-parent> </div> </template> <script> Vue.component('my-parent',{ //props:规定组件可以通过哪些属性传递数据 props:['name'], template:'<div>我是父组件的{{name}}</div>' }); var vm = new Vue({ el:'#app', }); </script> </body> </html>
2.$emit传值
1.emit:发射,理解为触发
2.Vue实例中提供了也给$emit方法,专门用于触发自定义事件的执行
3.传值步骤:
1)父组件定义时,给予组件绑定自定义事件
2)子组件定义时,通过$emit触发绑定的自定义事件:
$emit的参数1:触发的自定义事件名称
$emit的参数2:给自定义事件的事件处理函数
4.这种方式是子组件向父组件传值,通过子组件触发事件的方式,来向父组件传值。
5.案例代码:
<body>
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click='click'>Send</button>
<input type="text" v-model='message'>
</div>
</template>
<template id="parent">
<div>
<clild @clildfn = 'transContent'></clild>
<p>子组件传递的值:{{message}}</p>
</div>
</template>
<script>
Vue.component('parent',{
template: '#parent',
data() {
return {
message:''
}
},
methods: {
transContent(transData){
this.message = transData;
}
},
})
Vue.component('child',{
template:'#clild',
data() {
return {
message:'子组件的信息'
}
},
methods: {
click(){
//通过$emit调用自定义的事件,然后传递数据
this.$emit('childfn',this.message)
}
},
})
var vm = new Vue({
el:'#app',
});
</script>
</body>
</html>
5.组件切换
1.通过v-if和v-else来控制是否显示组件
2.结构代码:
<!-- 自定义组件 -->
<login v-if='flag'></login>
<register v-else></register>
<!-- 如果flag为true就显示login组件 -->
3.flag:
var vm = new Vue({
el:'app',
data: {
flag:true
}
});
</script>
<!--flag是vue的boolean类型的数据 -->
<!-- boolean=布尔类型 -->
4.案例代码:
<body>
<div id="app">
<a href="#" @click.prevent='flag=true'>登陆</a>
<a href="#" @click.prevent='flag=false'>注册</a>
<login v-if='flag'></login>
<register v-else></register>
</div>
<script>
Vue.component('login',{
template: '<div>我是登陆界面</div>'
});
Vue.component('register',{
template: '<div>我是注册界面</div>'
});
var vm = new Vue({
el:'app',
data: {
flag:true
}
});
</script>
</body>
</html>
五.Vue生命周期
1.钩子函数
Vue生命周期:
Vue从创建到销毁的整个过程
在Vue生命周期过程中,会执行很多回调函数,这些回调函数叫做钩子函数
钩子 | 说明 |
---|---|
beforeCreate | 创建实例对象之前执行 |
created | 创建实例对象之后执行 |
beforeMount | 页面挂载成功之前执行 |
mounted | 页面挂载成功之后执行 |
beforeUpdate | 组件更新之前执行 |
updated | 组件更新之后执行 |
beforeDestroy | 实例销毁之前执行 |
destroyed | 实例销毁之后执行 |
2.实例创建
beforeCreate:此时数据不能使用
created:此时数据可以使用 //常用
案例代码:
<body> <div id="app"> {{msg}} </div> </template> <script> var vm = new Vue({ el:'#app', data: { msg : '张三' }, beforeCreate() { console.log("Vue实例创建之前"); console.log(this.$data.msg); }, created() { console.log("Vue实例创建之后"); console.log(this.$data.msg); } }); </script> </body> </html>
3.页面挂载
beforeMount:此时无法显示数据
mounted:可以展示数据
案例代码:
<body> <div id="app"> {{msg}} </div> </template> <script> var vm = new Vue({ el:'#app', data: { msg : '张三' }, beforeMount() { console.log("挂载之前"); console.log(this.$el.innerHTML); }, mounted() { console.log("挂载之后"); console.log(this.$el.innerHTML); } }); </script> </body> </html>
4.数据更新
beforeUpdate和updated:Vue实例挂载完成后,当数据发生变化时,会执行beforeUpdate和updated函数
1:beforeUpdate:数据更新之前
2:updated:数据更新之后
案例代码:
<body> <div id="app"> <div v-if='isShow' ref='div'>test </div> <button @click='isShow=!isShow'>更新</button> </div> </template> <script> var vm = new Vue({ el:'#app', data: { isShow:true }, beforeUpdate() { console.log("更新数据之前执行"); console.log(this.$refs.div); }, updated() { console.log("更新数据之后执行"); console.log(this.$refs.div); } }); </script> </body> </html>
5.实例销毁
beforeDestroy和destroyed:生命周期函数的最后阶段是实例的销毁,会执行beforeDestroy和destroyed钩子函数。
beforeDestroy:可以操作DOM
destroyed:无法操作DOM
案例代码:
<body> <div id="app"> <div ref='div'>test </div> </div> </template> <script> var vm = new Vue({ el:'#app', data: { msg:'张三' }, beforeDestroy() { console.log("销毁之前"); console.log(this.$refs.div); console.log(this.msg); console.log(vm); }, destroyed() { console.log("销毁之后"); console.log(this.$refs.div); console.log(this.msg); console.log(vm); } }); //在控制台使用vm.$destroy() </script> </body>
六.学习目标总结
1.掌握Vue实例的创建及数据的绑定
Vue创建时的选项:el , data , methods , computed , watch
v-model:双向数据绑定 , v-bind:属性绑定
2.掌握Vue的事件监听操作
v-on:事件绑定
3.掌握Vue生命周期钩子函数的使用
created:获取后台数据 /*常用*/
4.掌握Vue组件的注册及组件之间的数据传递的方法