最近開發公司vue前端項目，做一下筆記，偶爾上來查漏補缺 組件操作： 使用flag標識符結合v-if和v-else切換組件 頁面結構： Vue實例定義： 使用:is屬性來切換不同的子組件,並添加切換動畫 組件實例定義方式： 使用component標簽，來引用組件，並通過:is屬性來指定要載入的組件： ...
最近開發公司vue前端項目，做一下筆記，偶爾上來查漏補缺
組件操作：
-
頁面結構：
<div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <my-com1 v-if="flag"></my-com1> <my-com2 v-else="flag"></my-com2> </div>
-
Vue實例定義：
<script> Vue.component('myCom1', { template: '<h3>奔波霸</h3>' }) Vue.component('myCom2', { template: '<h3>霸波奔</h3>' }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true }, methods: {} }); </script>
使用:is屬性來切換不同的子組件,並添加切換動畫
-
組件實例定義方式：
// 登錄組件 const login = Vue.extend({ template: `<div> <h3>登錄組件</h3> </div>` }); Vue.component('login', login); // 註冊組件 const register = Vue.extend({ template: `<div> <h3>註冊組件</h3> </div>` }); Vue.component('register', register); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { comName: 'login' }, methods: {} });
-
使用
component標簽，來引用組件，並通過:is屬性來指定要載入的組件：
<div id="app"> <a href="#" @click.prevent="comName='login'">登錄</a> <a href="#" @click.prevent="comName='register'">註冊</a> <hr> <transition mode="out-in"> <component :is="comName"></component> </transition> </div>
-
添加切換樣式：
<style> .v-enter, .v-leave-to { opacity: 0; transform: translateX(30px); } .v-enter-active, .v-leave-active { position: absolute; transition: all 0.3s ease; } h3{ margin: 0; } </style>
父組件向子組件傳值
-
組件實例定義方式，註意：一定要使用
props屬性來定義父組件傳遞過來的數據
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的消息'
},
components: {
son: {
template: '<h1>這是子組件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
-
使用
v-bind或簡化指令，將數據傳遞到子組件中：
<div id="app"> <son :finfo="msg"></son> </div>
子組件向父組件傳值
-
原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
-
父組件將方法的引用傳遞給子組件，其中，
getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱
<son @func="getMsg"></son>
-
子組件內部通過
this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用
<div id="app"> <!-- 引用父組件 --> <son @func="getMsg"></son> <!-- 組件模板定義 --> <script type="x-template" id="son"> <div> <input type="button" value="向父組件傳值" @click="sendMsg" /> </div> </script> </div> <script> // 子組件的定義方式 Vue.component('son', { template: '#son', // 組件模板Id methods: { sendMsg() { // 按鈕的點擊事件 this.$emit('func', 'OK'); // 調用父組件傳遞過來的方法，同時把數據傳遞出去 } } }); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { getMsg(val){ // 子組件中，通過 this.$emit() 實際調用的方法，在此進行定義 alert(val); } } }); </script>
-
導入 vue-router 組件類庫：
<!-- 1. 導入 vue-router 組件類庫 --> <script src="./lib/vue-router-2.7.0.js"></script>
-
使用 router-link 組件來導航
<!-- 2. 使用 router-link 組件來導航 --> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link>
-
使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
-
創建使用
Vue.extend創建組件
// 4.1 使用 Vue.extend 來創建登錄組件 var login = Vue.extend({ template: '<h1>登錄組件</h1>' }); // 4.2 使用 Vue.extend 來創建註冊組件 var register = Vue.extend({ template: '<h1>註冊組件</h1>' });
-
創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則 var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] });
-
使用 router 屬性來使用路由規則
// 6. 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', router: router // 使用 router 屬性來使用路由規則 });
設置路由高亮
設置路由切換動效
在路由規則中定義參數
-
在規則中定義參數：
{ path: '/register/:id', component: register }
-
通過
this.$route.params來獲取路由中的參數：
var register = Vue.extend({ template: '<h1>註冊組件 --- {{this.$route.params.id}}</h1>' });
children 屬性實現路由嵌套<div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <script> // 父路由中的組件 const account = Vue.extend({ template: `<div> 這是account組件 <router-link to="/account/login">login</router-link> | <router-link to="/account/register">register</router-link> <router-view></router-view> </div>` }); // 子路由中的 login 組件 const login = Vue.extend({ template: '<div>登錄組件</div>' }); // 子路由中的 register 組件 const register = Vue.extend({ template: '<div>註冊組件</div>' }); // 路由實例 var router = new VueRouter({ routes: [ { path: '/', redirect: '/account/login' }, // 使用 redirect 實現路由重定向 { path: '/account', component: account, children: [ // 通過 children 數組屬性，來實現路由的嵌套 { path: 'login', component: login }, // 註意，子路由的開頭位置，不要加 / 路徑符 { path: 'register', component: register } ] } ] }); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { account }, router: router }); </script>
