经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
vue.js - 2
来源:cnblogs  作者:hongxinerke  时间:2019/3/29 9:12:51  对本文有异议

最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺

组件操作: 

使用flag标识符结合v-ifv-else切换组件

  1. 页面结构:

  1. <div id="app">
  2. <input type="button" value="toggle" @click="flag=!flag">
  3. <my-com1 v-if="flag"></my-com1>
  4. <my-com2 v-else="flag"></my-com2>
  5. </div>
  1. Vue实例定义: 

  1. <script>
  2. Vue.component('myCom1', {
  3. template: '<h3>奔波霸</h3>'
  4. })
  5. ?
  6. Vue.component('myCom2', {
  7. template: '<h3>霸波奔</h3>'
  8. })
  9. ?
  10. // 创建 Vue 实例,得到 ViewModel
  11. var vm = new Vue({
  12. el: '#app',
  13. data: {
  14. flag: true
  15. },
  16. methods: {}
  17. });
  18. </script>

 

使用:is属性来切换不同的子组件,并添加切换动画

  1. 组件实例定义方式:

  1. // 登录组件
  2. const login = Vue.extend({
  3. template: `<div>
  4. <h3>登录组件</h3>
  5. </div>`
  6. });
  7. Vue.component('login', login);
  8. ?
  9. // 注册组件
  10. const register = Vue.extend({
  11. template: `<div>
  12. <h3>注册组件</h3>
  13. </div>`
  14. });
  15. Vue.component('register', register);
  16. ?
  17. // 创建 Vue 实例,得到 ViewModel
  18. var vm = new Vue({
  19. el: '#app',
  20. data: { comName: 'login' },
  21. methods: {}
  22. });
  1. 使用component标签,来引用组件,并通过:is属性来指定要加载的组件:

  1. <div id="app">
  2. <a href="#" @click.prevent="comName='login'">登录</a>
  3. <a href="#" @click.prevent="comName='register'">注册</a>
  4. <hr>
  5. <transition mode="out-in">
  6. <component :is="comName"></component>
  7. </transition>
  8. </div>
  1. 添加切换样式:

  1. <style>
  2. .v-enter,
  3. .v-leave-to {
  4. opacity: 0;
  5. transform: translateX(30px);
  6. }
  7. ?
  8. .v-enter-active,
  9. .v-leave-active {
  10. position: absolute;
  11. transition: all 0.3s ease;
  12. }
  13. ?
  14. h3{
  15. margin: 0;
  16. }
  17. </style>

父组件向子组件传值

  1. 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据

  1. <script>
  2. // 创建 Vue 实例,得到 ViewModel
  3. var vm = new Vue({
  4. el: '#app',
  5. data: {
  6. msg: '这是父组件中的消息'
  7. },
  8. components: {
  9. son: {
  10. template: '<h1>这是子组件 --- {{finfo}}</h1>',
  11. props: ['finfo']
  12. }
  13. }
  14. });
  15. </script>
  1. 使用v-bind或简化指令,将数据传递到子组件中:

  1. <div id="app">
  2. <son :finfo="msg"></son>
  3. </div>

子组件向父组件传值

  1. 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去;

  2. 父组件将方法的引用传递给子组件,其中,getMsg是父组件中methods中定义的方法名称,func是子组件调用传递过来方法时候的方法名称

  1. <son @func="getMsg"></son>
  1. 子组件内部通过this.$emit('方法名', 要传递的数据)方式,来调用父组件中的方法,同时把数据传递给父组件使用

  1. <div id="app">
  2. <!-- 引用父组件 -->
  3. <son @func="getMsg"></son>
  4. ?
  5. <!-- 组件模板定义 -->
  6. <script type="x-template" id="son">
  7. <div>
  8. <input type="button" value="向父组件传值" @click="sendMsg" />
  9. </div>
  10. </script>
  11. </div>
  12. ?
  13. <script>
  14. // 子组件的定义方式
  15. Vue.component('son', {
  16. template: '#son', // 组件模板Id
  17. methods: {
  18. sendMsg() { // 按钮的点击事件
  19. this.$emit('func', 'OK'); // 调用父组件传递过来的方法,同时把数据传递出去
  20. }
  21. }
  22. });
  23. ?
  24. // 创建 Vue 实例,得到 ViewModel
  25. var vm = new Vue({
  26. el: '#app',
  27. data: {},
  28. methods: {
  29. getMsg(val){ // 子组件中,通过 this.$emit() 实际调用的方法,在此进行定义
  30. alert(val);
  31. }
  32. }
  33. });
  34. </script>

vue-router

  1. 导入 vue-router 组件类库:

  1. <!-- 1. 导入 vue-router 组件类库 -->
  2. <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用 router-link 组件来导航

  1. <!-- 2. 使用 router-link 组件来导航 -->
  2. <router-link to="/login">登录</router-link>
  3. <router-link to="/register">注册</router-link>
  1. 使用 router-view 组件来显示匹配到的组件

  1. <!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
  2. <router-view></router-view>
  1. 创建使用Vue.extend创建组件

  1. // 4.1 使用 Vue.extend 来创建登录组件
  2. var login = Vue.extend({
  3. template: '<h1>登录组件</h1>'
  4. });
  5. ?
  6. // 4.2 使用 Vue.extend 来创建注册组件
  7. var register = Vue.extend({
  8. template: '<h1>注册组件</h1>'
  9. });
  1. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则

  1. // 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
  2. var router = new VueRouter({
  3. routes: [
  4. { path: '/login', component: login },
  5. { path: '/register', component: register }
  6. ]
  7. });
  1. 使用 router 属性来使用路由规则

  1. // 6. 创建 Vue 实例,得到 ViewModel
  2. var vm = new Vue({
  3. el: '#app',
  4. router: router // 使用 router 属性来使用路由规则
  5. });

设置路由高亮

设置路由切换动效

在路由规则中定义参数

  1. 在规则中定义参数:

  1. { path: '/register/:id', component: register }
  1. 通过 this.$route.params来获取路由中的参数:

  1. var register = Vue.extend({
  2. template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
  3. });
  1. children 属性实现路由嵌套
  1. <div id="app">
  2. <router-link to="/account">Account</router-link>
  3. ?
  4. <router-view></router-view>
  5. </div>
  6. ?
  7. <script>
  8. // 父路由中的组件
  9. const account = Vue.extend({
  10. template: `<div>
  11. 这是account组件
  12. <router-link to="/account/login">login</router-link> |
  13. <router-link to="/account/register">register</router-link>
  14. <router-view></router-view>
  15. </div>`
  16. });
  17. ?
  18. // 子路由中的 login 组件
  19. const login = Vue.extend({
  20. template: '<div>登录组件</div>'
  21. });
  22. ?
  23. // 子路由中的 register 组件
  24. const register = Vue.extend({
  25. template: '<div>注册组件</div>'
  26. });
  27. ?
  28. // 路由实例
  29. var router = new VueRouter({
  30. routes: [
  31. { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
  32. {
  33. path: '/account',
  34. component: account,
  35. children: [ // 通过 children 数组属性,来实现路由的嵌套
  36. { path: 'login', component: login }, // 注意,子路由的开头位置,不要加 / 路径符
  37. { path: 'register', component: register }
  38. ]
  39. }
  40. ]
  41. });
  42. ?
  43. // 创建 Vue 实例,得到 ViewModel
  44. var vm = new Vue({
  45. el: '#app',
  46. data: {},
  47. methods: {},
  48. components: {
  49. account
  50. },
  51. router: router
  52. });
  53. </script>

 

原文链接:http://www.cnblogs.com/zhenghongxin/p/10613274.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号