Vue的常用属性
1.父组件通过prop向子组件传值
- 先给父组件中绑定自定义属性
- 在子组件中使用props接收父组件传递的数据
- 在子组件中使用数据
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child :message="parentMsg">child>
div>
div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '{{ message }}'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
script>
2.子组件像父组件传递
- 先在父组件的子组件标签中自定义事件和回调方法
- 在子组件的自定义函数中使用$emit触发父组件的自定义事件，并通过￥emit的第二个参数将值传递给父组件中的回调函数
<div id="app">
<div id="counter-event-example">
<p>{{ total }}p>
<button-counter v-on:increment="incrementTotal" @sendmes="fromchild">button-counter>
<button-counter v-on:increment="incrementTotal" @sendmes="fromchild">button-counter>
div>
div>
<script>
Vue.component('button-counter', {
template: '<div>' +
'<button v-on:click="incrementHandler">{{ counter }}button>' +
'<input type="text" v-model="childData" @input="changeValue(childData)" />' +
'div>',
data: function () {
return {
counter: 0,
childData: ''
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
},
changeValue(val){
//在函数中使用$emit触发父组件中的自定义事件
this.$emit('sendmes',val)
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
},
fromchild(val){
console.log('from child'+val)
}
}
})
3.slot承载父组件在子组件标签中定义的内容
Vue.component('Vbtn', {
template: `<button><slot>按钮slot><button/>`
}
) //全局组件
var Vcontent = {
template: `<div>
<div>我是内容组件div>
<Vbtn>登录Vbtn>
div>`
}
配合传递的type-class可以自主封装按钮
4.具名插槽
Vue.component('myLi',{
template:`
<li>
第一个坑<slot name="two">slot>
第二个坑<slot name="three">slot>
li>
`
})
var App = {
template:
`<div>
<ul>
<myLi>
<h2 slot="two">占2h2>
<h3 slot="three">占3h3>
myLi>
ul>
div>`
}
- 作用域插槽
为了让子组件中的数据在父组件中可以直接用{{}}调用
https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽
过滤器
- 局部过滤器
filters:{
// 1.声明过滤器
// 2.使用过滤器{{ 数据|过滤器的名字 }}
myCurrent:function (value) {
return value+"元"
}
}
<h3>{{price | myCurrent}}h3>
- 全局过滤器
// 全局过滤器
Vue.filter('myReverse',function (value,arg) {
return (arg+" "+value).split('').reverse().join('')
})
<h4>{{ mask| myReverse }}h4>
<h4>{{ mask| myReverse("clearlove") }}h4>
watch 监听
- 简单监听
<input type="text" v-model="msg"/>
watch:{
//字符串监听
msg : function (newV,oldV) {
console.log(newV,oldV)
},}
- 深度监听
watch 监听的是一个对象，只要对象的内存地址发生改变时才会触发，因此复杂的数据类型，需要深度监视
<ul>
<li v-for="site in sites">{{site.name}}li>
ul>
<button @click="sites[0].name = 'facebook'">按钮button>
watch:{
//字符串监听
msg : function (newV,oldV) {
console.log(newV,oldV)
},
// 深度监听
sites:{
deep:true,
handler:function (newV,oldV) {
console.log('sites',newV[0].name,oldV[0].name)
},
}
}
计算属性
计算属性默认只有Get，可以自己定义set
- demo01
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
head>
<body>
<div id="app">
<p>{{ site }}p>
<button @click="change">按钮button>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
},
methods: {
change(){
console.log(vm.site)
vm.site = '菜鸟教程 http://www.runoob.com';
console.log(vm.name,vm.url)
console.log()
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
// vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);
script>
body>
html>
使用set一般都要传值