最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺
组件操作:
使用flag
标识符结合v-if
和v-else
切换组件
-
页面结构:
- <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
-
导入 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>