組件的使用
1.組件的注冊 與 父向子傳值
<div id="app">
<one data1="這是傳遞給one的數(shù)據(jù)"></one>
<two :data2="msg"></two>
</div>
<script type="text/javascript">
//局部注冊組件
var two = {
props:['data2'],
template:`
<div>組件two --- {{data2}}</div>
`
}
//全局注冊組件
Vue.component('one',{
props:['data1'],
template:`
<div>組件one ---- {{data1}}</div>
`
})
new Vue({
el:'#app',
data:{
msg:'這是傳遞給two的數(shù)據(jù)'
},
components:{
two
}
})
</script>
2.子向父傳值
注意事件名不能有大寫痹届，要寫成@three-handle ，不能寫成threeHandle
//子組件 定義事件
<three @three-handle="hanleinfo"></three>
------------------------------------------------------------------------------------------------------------------
var three = {
data() {
return {
threemsg:'這是子向父傳值'
}
},
template:`
<div>
<div>組件three </div>
<button @click="toFather">傳值</button>
</div>
`,
methods:{
toFather() {
//使用Vue中的$emit(子組件綁定的自定義方法列荔，要傳遞的參數(shù)值)
this.$emit('three-handle',this.threemsg)
}
}
}
new Vue({
el:'#app',
data:{
msg:'這是傳遞給two的數(shù)據(jù)'
},
methods:{
//接收事件
hanleinfo(val) {
console.log(val)
}
},
components:{
two,
three
}
})
多組件嵌套通信 父向子孫傳遞
$attrs 包含了父作用域中不被認(rèn)為 (且不預(yù)期為) props 的特性綁定 (class 和 style 除外),通俗來說就是傳遞不被props接收的數(shù)據(jù)一致往下傳遞辙浑。
inheritAttrs 設(shè)置可以不用在根元素看見特性 例如 name="aaaa" 之類的
Vue.component('C',{
mounted() {
console.log(this)
},
inheritAttrs:false,
template:`
<div>
C組件 <p>$attrs: {{$attrs}}</p>
</div>
`
})
Vue.component('B',{
inheritAttrs:false,
template:`
<div>
B組件 <p>$attrs: {{$attrs}}</p>
<C v-bind="$attrs"></C>
</div>
`
})
Vue.component('A',{
inheritAttrs:false,
template:`
<div>
A組件 <p>$attrs: {{$attrs}}</p>
<hr/>
<B v-bind="$attrs"></B>
</div>
`
})
var App = {
data() {
return {
da:'父組件傳來的值'
}
},
template:`
<div>
app父組件
<A :msg="da" msg2="2222"></A>
</div>
`
}
多組件嵌套 孫向祖先傳遞
Vue.component('C',{
mounted() {
console.log(this)
},
inheritAttrs:false,
template:`
<div>
C組件 <p>$attrs: {{$attrs}}</p>
<button @click="chuanzhi">傳值</button>
</div>
`,
methods:{
chuanzhi() {
this.$emit('handleFather','我是c的數(shù)據(jù)')
}
}
})
Vue.component('B',{
inheritAttrs:false,
template:`
<div>
B組件 <p>$attrs: {{$attrs}}</p>
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`
})
Vue.component('A',{
inheritAttrs:false,
template:`
<div>
A組件 <p>$attrs: {{$attrs}}</p>
<hr/>
<B v-bind="$attrs" v-on="$listeners"></B>
</div>
`
})
var App = {
data() {
return {
da:'父組件傳來的值'
}
},
template:`
<div>
app父組件
<A :msg="da" msg2="2222" v-on:handleFather="handleFather"></A>
</div>
`,
methods:{
handleFather(val) {
console.log(val)
}
}
}
vue使用bus進(jìn)行組件通信
Vue.component('borther1',{
template:`
<div @click="chuan">
我是brother1
</div>
`,
methods:{
chuan() {
bus.$emit('chuanzhi','aaaa')
}
}
})
Vue.component('borther2',{
data() {
return {
msg:''
}
},
template:`
<div>
我是brother2----{{msg}}
</div>
`,
mounted() {
bus.$on('chuanzhi',(val) => {
this.msg = val
})
}
})
var bus = new Vue()
new Vue({
el:"#app",
})
通過provide 和 inject 進(jìn)行組件通信
<div id="app">
<child1></child1>
</div>
<script type="text/javascript">
//父組件通過provide來提供變量明郭，子組件中通過inject來注入變量栏尚，
不論子組件有多深到逊，只要調(diào)用inject就能獲取吮便，
不局限只能從props中獲取骆姐，只要父組件中的生命周期存在
Vue.component('child1',{
template:`
<div>
父組件
<child2/>
</div>
`,
provide:{
msg:'aaaaaaa'
}
})
Vue.component('child2',{
template:`
<div>
子組件 -----{{msg}}
<child3 />
</div>
`,
inject:['msg']
})
Vue.component('child3',{
template:`
<div>子組件2 ---- {{msg}}</div>
`,
inject:['msg']
})
new Vue({
el:'#app'
})
</script>
$parent跟 $children 進(jìn)行組件通信
Vue.component('child1',{
data() {
return {
msg:''
}
},
template:`
<div>
<p @click="chuanzhi">父組件--------{{msg}}</p>
<child2/>
</div>
`,
methods:{
chuanzhi() {
this.$children[0].message = '給子組件的值'
this.msg = this.msg
}
}
})
Vue.component('child2',{
data() {
return {
msg:''
}
},
template:`
<div>
<p @click="jieshou">子組件------{{msg}}</p>
</div>
`,
methods:{
jieshou() {
this.$parent.msg = '子組件傳來的值'
this.msg = this.message
}
}
})
new Vue({
el:'#app',
})
filter的使用
1.局部過濾器
聲明
filters: {
test(value) {
return value + 1
}
}
使用
{{10|test}}
2.全局過濾器
聲明
//可以接收參數(shù)
Vue.filter('test',function(value,da) {
// 將數(shù)據(jù)反轉(zhuǎn)
return da + value.split('').reserve().join('')
})
使用
//可以在過濾器中添加參數(shù)
{{hello | test('hhh')}}
watch的使用
data:{
str:'',
arr:[{name:'zs'}]
},
watch: {
//監(jiān)聽str的數(shù)據(jù)變化
str(new,old) {
console.log(new,old);
},
//監(jiān)聽復(fù)雜數(shù)據(jù)類型 Array Object
arr{
deep:true, //深度監(jiān)聽
handeler(new,old) {
console.log(new[0].name);
}
}
}
computed
/*
觸發(fā)computed中的get和set方法
console.log(this.valye) //get方法
this.value = 'test' //set方法
計算屬性默認(rèn)只有g(shù)etter
setter也可以
*/
computed: {
test() {
return this.value1
},
test2() {
get() {
return this.value
},
set(new) {
this.value = new
}
}
}
vue獲取DOM對象
給標(biāo)簽上添加 ref="xxx"
通過this.refs.xxx 獲取原生jsDOM對象
當(dāng)給組件上添加ref屬性時镜粤，this.refs.xxx 獲取當(dāng)前組件對象
vue $nextTick() 的用法
在DOM更新循環(huán)之后執(zhí)行回調(diào)函數(shù)，在修改數(shù)據(jù)之后使用次方法
在回調(diào)中獲取更新后的DOM
<div id="app">
<input type="text" v-show="isShow" ref='input' />
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isShow:false
},
mounted() {
this.isShow = true
this.$nextTick(function(){
this.$refs.input.focus()
})
}
})
</script>
VueRouter的使用
1.引入vue-router (兩個全局組件 router-link to屬性 相當(dāng)于 a標(biāo)簽 to 相當(dāng)于href屬性 router-view 匹配路由組件的出口)
2.創(chuàng)建實例化VueRouter對象
3.匹配路由規(guī)則
4.掛載到new Vue()實例化對象上
5.給vue實例化對象上掛載了兩個對象 this.route (它就是配置路由信息的對象)
命名路由
綁定自定義的屬性 :to="{name = '路由的名字'}"
path: '/user/:id'
:to="{name:'user',params:'{id:1}'}"
path:'/user'
:to="{name:'user',query:{userId:1}}"
嵌套路由
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/index">首頁</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
var Login = {
template:`
<div>
我是登錄頁 <br/>
<router-link :to="{name:'tmp',params:{id:'front'}}">前臺</router-link>
<router-link :to="{name:'tmp',params:{id:'back'}}">后臺</router-link>
<router-view></router-view>
</div>
`
}
var Index = {
template:`
<div>我是首頁</div>
`
}
var tmp = {
data() {
return {
msg:'前端'
}
},
template:`
<div>我是{{msg}}</div>
`,
watch:{
'$route'(to,from) {
if(to.params.id == 'front') {
this.msg = '前端'
}else {
this.msg = '后端'
}
}
}
}
var router = new VueRouter({
routes:[
{
path:'/login',
component:Login,
children:[
{
name:'tmp',
path:'/login/:id',
component:tmp
}
]
},
{
path:'/index',
component:Index
}
]
})
new Vue({
el:'#app',
data:{
msg:'前端'
},
router
})
</script>
keep-alive
保持組件的狀態(tài)诲锹，使組件切換回來時繼續(xù)保持離開前的狀態(tài)
vue-router meta的使用
meta:{
auth:true
}
router.beforeEach(to,from.next) {
if(to.meta.auth) {
//未登錄的功能
}
}