關於vue基礎總結

時間 2019-12-01

標籤關於 vue 基礎總結简体版

原文原文鏈接

##建立vue實例對象及實例對象的屬性

var app = new Vue({  
el:"掛載做用的區域", 
data:{    數據    num:'',  }, 
methods:{    
    add(){      this.num++    } 
 },  
computed:{    
    num(){
    }  
},  
watch(){    
    num(){      data中的num一旦改變就會自動觸發該方法,方法名便是要監聽的data    } 
 },  
filters:{    
    format(value,num){      //必定要形參value，在過濾器函數中要用到data裏的值的話，經過format(num)傳過來。      
//value默認接受format前面的要過濾的參數;  如：{{ list | format(num) }}    } 
 },  
components:{    child,//掛載私有組件  }
})複製代碼

##建立組件

###建立全局組件

在組件中data是個方法，組件的數據在data中要寫到return{}對象裏面。在vue實例中data是個對象

Vue.component('button-counter', {  data(){    return {      count: 0    }  },複製代碼

//渲染區域

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'複製代碼

複製代碼

//也能夠 template:'#id'  渲染在<script src='html/template' id='id'>複製代碼

props:['自定義屬性']//經過自定義屬性接受父組件傳過來的data複製代碼

<button-counter :自定義屬性='num' @add='add'>  
methods:{    
    add(){      子組件觸發父組件的方法把子組件的數據傳給父組件      
        this.$emit('add',data)    
    }  
}  ...其他的與Vue實例方法一致；})###建立局部組件 
在Vue實例中components掛載
 var child = {   
template:'',  
 props:[''],  
 data(){     
    return{       count:1,     }  
 },   
methods:{
   }
 }複製代碼

##vue動畫

注：當元素點擊之後 show顯示爲true時，會先立馬到enter時間點狀態，不過由於是個時間點，因此它瞬間要回到自己本身的位置；可是由於你在v-enter-active設置了過渡，因此從enter位置到元素自己位置過渡；

當元素點擊後show爲false時，會從自己元素的位置到v-leave-to元素已經離開的位置過渡；

至關於

v-enter ------》 v-enter-to -----》元素自己位置 -------》v-leave -------》v-leave-to

動畫要用trasition標籤包起來

時間段控制哪些屬性過渡；

/* .v-enter 元素的起始狀態是一個時間點； */

/* .v-leave-to 動畫的離開時候的狀態時一個時間點； */

<style>

.v-enter,

.v-leave-to{

opacity: 1;

transform: translateX(150px);

}

.v-enter-active,

.v-leave-active {

transition: all 1s ease;

}

.my-enter,

.my-leave-to{

opacity: 0;

transform: translateY(150px);

}

.my-enter-active,

.my-leave-active {

transition: all 1s ease;

}

</style>

<body>

</transition>

//能夠給transition指定name屬性='自定義動畫名'，經過自定義動畫名-enterl來寫css

//也能夠對元素指定過渡模式：in-out新元素先進來，老元素離開；out-in當前元素先進行過渡，完成以後新元素過渡進入

</transition>

</div>

var app = new Vue({

el:"#app",

data:{

flag:true,

flag1:true,

}

})

</script>

##組件切換

<keep-alive>

</keep-alive>

var app = new Vue({

el:"#app",

data:{

flag:true,

spa:"login"

components:{

'login':{

template:"<li>登陸組件</li>"

} ,

'regist':{

template:"<li>註冊組件</li>"

'travel':{

template:"<li>遊客組件</li>"

}

})

</script>

##vue路由

<p>

<router-link to="/foo" tag='渲染標籤的形式'>Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

</p>

<router-view></router-view>

</div>

###路由組件

1.定義組件

const login = {template：'',...}

2.建立路由對象

const router = new VueRouter({

3.註冊路由規則

routes:[{path:'/',redirect:'/login'},

{path:'/login',components:'login'}

]

})

能夠經過this.$route.params訪問到路由的參數

this.$router.push({ name: 'news', params: { userId: 123 }})獲取經過this.params.userId

或者在定義路由規則時：{path:'/login/:userId'}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。