2 计算属性和监听属性
2.1 计算属性
2.1.1基本使用
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 普通函数---其他数据变化---》函数会重写计算</ h1>
年龄:< input type = " text" v-model = " age" >
姓名:< input type = " text" v-model = " name" >
< br>
{{getAge()}}
< br>
< h1> 计算属性</ h1>
年龄:< input type = " text" v-model = " age1" >
姓名:< input type = " text" v-model = " name1" >
< br>
{{newAge}}
< br>
</ div>
</ body>
< script>
var vm = new Vue ( {
el : '#app' ,
data : {
age : '' ,
name : '' ,
age1 : '' ,
name1 : '' ,
} ,
methods : {
getAge ( ) {
console. log ( '我执行了' )
return Number ( this . age) + 10
}
} ,
computed : {
newAge ( ) {
console. log ( '我执行了--计算属性' )
return Number ( this . age1) + 20
}
}
} )
</ script>
</ html>
2.1.2 首字母变大写
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 首字母变大写</ h1>
< br>
< br>
< input type = " text" v-model = " name" > ---》{{newName}}
</ div>
</ body>
< script>
var vm = new Vue ( {
el : '#app' ,
data : {
name : '' ,
} ,
methods : {
getName ( ) {
return this . name. substring ( 0 , 1 ) . toUpperCase ( ) + this . name. substring ( 1 )
}
} ,
computed : {
newName ( ) {
return this . name. substring ( 0 , 1 ) . toUpperCase ( ) + this . name. substring ( 1 )
}
}
} )
</ script>
</ html>
2.1.3 通过计算属性,重写过滤案例
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 过滤案例</ h1>
< input type = " text" v-model = " search" >
< ul>
< li v-for = " item in newDataList" > {{item}}</ li>
</ ul>
</ div>
</ body>
< script>
var vm = new Vue ( {
el : '#app' ,
data : {
search : '' ,
dataList : [ 'a' , 'at' , 'atom' , 'be' , 'beyond' , 'bee' , 'c' , 'cs' , 'csrf' ] ,
} ,
computed : {
newDataList ( ) {
return this . dataList. filter ( item => item. indexOf ( this . search) >= 0 )
}
}
} )
</ script>
</ html>
2.2 监听属性
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 监听属性</ h1>
< button @click = " ordering='id'" > 按id排序</ button>
< button @click = " ordering='price'" > 按价格排序</ button>
</ div>
</ body>
< script>
var vm = new Vue ( {
el : '#app' ,
data : {
ordering : ''
} ,
watch : {
ordering ( ) {
console. log ( '我变了,向后端发送请求' )
console. log ( this . ordering)
}
}
} )
</ script>
</ html>
3 生命周期钩子
一个vue的组件,从创建开始- - - 》到最后销毁- - - 》经历一些过程- - - 》每个过程都绑定了一个函数- - 》当到这个过程的时候,这个函数就会执行
面向切面编程:AOP
1 . beforeCreate: 组件创建之前实现这个:组件html,js- - 》html和js都是空的
2 . created:组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)
3 . beforeMount:挂载模板之前,js有值,模板( html) 还是空的(向后端发送ajax请求)
4 . mounted:挂载完成:js有值,模板有值
5 . beforeUpdate:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
6 . updated:刷新之后执行
7 . beforeDestroy:被销毁之前执行 (资源清理性工作)
8 . destroyed:被销毁之后执行
1 页面加载完成,向后端发请求拿数据
写在create中
2 组件中有定时任务,组件销毁,要销毁定时任务、
setTimeout( ( ) = > {
console. log( '延时器,3s后执行' )
} , 3000 )
setInterval( ( ) = > {
console. log( '每隔3s执行' )
} , 3000 )
4 组件介绍
Vue. component( 'Child' , {
template: `
< div>
< h1> 我是组件< / h1>
< button @click= "haneleClick" > 点我看美女< / button>
< p> 年龄是:{ { age } } < / p>
< / div> `,
data( ) {
return {
age: 19
}
} ,
methods: {
haneleClick( ) {
alert( '美女' )
}
}
} )
< Child> < / Child>
4.1 全局组件使用
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 组件的使用</ h1>
< button @click = " handleClick" > 点我看美女</ button>
< hr>
< Lqz> </ Lqz>
< hr>
< span> asdfasdfadsf</ span>
< p> 你发誓啊发送是发放按摩阿斯顿发阿斯顿发as放到</ p>
< Lqz> </ Lqz>
</ div>
</ body>
< script>
Vue. component ( 'Lqz' , {
template : `
<div>
<h1>{{ name }}</h1>
<button @click="handleClick">点我换名字</button>
</div> ` ,
data ( ) {
return {
name : 'lqz'
}
} ,
methods : {
handleClick ( ) {
this . name = '彭于晏'
}
}
} )
var vm = new Vue ( {
el : '#app' ,
data : { } ,
methods : {
handleClick ( ) {
alert ( '美女' )
}
}
} )
</ script>
</ html>
4.2 局部组件
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 局部组件的使用</ h1>
< Child> </ Child>
</ div>
</ body>
< script>
Vue. component ( 'Child' , {
template : `
<div>
<Lqz></Lqz>
<Lqz></Lqz>
<Lqz></Lqz>
</div> ` ,
components : {
Lqz : {
template : `
<div>
<h2>我是局部组件</h2>
</div>
` ,
data ( ) {
return { }
} ,
methods : { } ,
}
}
} )
var vm = new Vue ( {
el : '#app' ,
data : { } ,
methods : {
handleClick ( ) {
alert ( '美女' )
}
} ,
} )
</ script>
</ html>
5 局部组件和全局组件
- 定义:
Vue. component( 'Child' , { } )
- 使用,可以在任意位置使用
< Child> < / Child>
- 定义
var vm = new Vue( {
el: '#app' ,
data: { } ,
components: { 局部组件: { } }
} )
- 使用:只能用在被 当前组件管理的 html (
6 组件间通信
6.1 父传子
- 在父中定义变量 name= 'lqz'
- 在子组件上 写自定义属性 < Child : name= "name" > < / Child>
- 在组件内部:props: [ 'name' ]
- 在子组件内部,就可以使用插值,使用这个变量
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< script src = " ./js/vue.js" > </ script>
</ head>
< body>
< div id = " app" >
< h1> 组件通信之父传子:自定义属性</ h1>
< p> 父组件中得名字:{{name}}</ p>
< div style = " background-color : pink" >
< Child :name = " name" yy = " xx" > </ Child>
</ div>
</ div>
</ body>
< script>
Vue. component ( 'Child' , {
template : `
<div>
<h2>我是Child组件</h2>
<h3>父组件传递给子组件的:{{ name }}=={{yy}}</h3>
</div> ` ,
data ( ) {
return { }
} ,
props : [ 'name' , 'yy' ]
} )
var vm = new Vue ( {
el : '#app' ,
data : {
name : '彭于晏'
} ,
} )
</ script>
</ html>
6.2 子传父
< !DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> Title< / title>
< script src= "./js/vue.js" > < / script>
< / head>
< body>
< div id = "app" >
< h1> 组件通信之子传父:自定义事件< / h1>
子组件的值:{ { p_name} }
< div style= "background-color: pink" >
< Child @myevent= "handleEvent" > < / Child>
< / div>
< / div>
< / body>
< script>
// 全局组件
Vue. component( 'Child' , {
template: `
< div>
< h2> 我是Child组件< / h2>
< input type = "text" v- model= "name" > - - > { { name } }
< button @click= "handleSend" > 传给父亲< / button>
< / div> `,
data( ) {
return {
name: ''
}
} ,
methods: {
handleSend( ) {
this. $emit( 'myevent' , this. name)
}
}
} )
var vm = new Vue( {
el: '#app' ,
data: {
p_name: ''
} ,
methods: {
handleEvent( name) {
// name 是 子组件中调用 this. $emit( 'myevent' , this. name) 传过来的
// alert( '美女' )
this. p_name= name // 把子组件中传入的,赋值给父组件的p_name变量
}
}
} )
< / script>
< / html>