關於vue基礎總結

櫻子醬發表於2019-02-27
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>
<div id="app">
<input type="button" @click='flag=!flag, flag1=!flag1' value="toggle">
<transition>
<h3 v-if='flag'>h3</h3>
</transition>
//可以給transition指定name屬性='自定義動畫名'，通過自定義動畫名-enterl來寫css
//也可以對元素指定過渡模式：in-out新元素先進來，老元素離開；out-in當前元素先進行過渡，完成之後新元素過渡進入
<transition name='my' mode='過渡模式'>
<h3 v-if="flag1">my</h3>
</transition>
</div>
<script src="../lib/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
flag:true,
flag1:true,
}
})
</script>

##元件切換
<a href="/#/login" @click.prevent="spa='login'">登入</a>
<a href="/#/regist" @click.prevent="spa='regist'">註冊</a>
<a href="/#/travel" @click.prevent="spa='travel'">遊客</a>
<keep-alive>
<component :is="spa"></component>
</keep-alive>
<script>
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` 屬性指定連結. -->
<!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
<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'}


相關文章