`
baobeituping
  • 浏览: 1064673 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

vue模块的用法

    博客分类：
  • vue
 
阅读更多

前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性，以及一个小实例，通过实例来跟大家分享，想必更容易理解。

先来看一下，看完这篇博客，你会做出什么样的效果吧。

就是这样的一个小的demo，其中主要用到了vue-router 2.0 和vue的单文件组件，这里再细分一下如下

 

  • vue-router 2.0 定义路由配置
  • router-view 和 router-link 来控制路由
  • transition 控制页面之间的跳转动画
  • .vue后缀名的单文件组件
  • 简单的ES6语法
 

修改项目目录结构

 

先来看一下项目的机构，我在原项目目录结构上稍作调整，让目录结构更清晰一些。如下图

在 src 目录下，删除 App.vue ，增加 pages 文件夹，该文件夹用来用来放置我们创建的“页面”（比如，Home.vue）。其实，这里说的“页面”也是组件，只是它变现为一个“页面”而已，跟components 目录下的组件没有本质的区别，我们分开目录放置主要是更语义化，结构更清晰易懂。

可能有的刚接触的同学还不太了解组件（.vue后缀结尾的文件），不要着急，接着往下看。

 

.vue后缀名的单文件组件

 
这里先说一下我对组件的理解。组件，顾名思义就是一组元素组成的一个原件（理解的比较浅显、直白），在Vue.js中，表现为一个自定义元素。开篇展示的图中，首页的的列表中的每一项就可以看成一个组件（事实上，在demo中，我也是这么做的），这个组件由一张图片，一个显示价格的元素，一个显示名称的元素组成，我就可以先把它定义为一个list组件。
首先，我们先来分析一下两个页面中组件，如下图
 
 
主页可以看做由两个组件组成，homeHeader和list组件，而详情页则可以看成是有detailHeader跟下边的图文内容组成（这里的图文内容也可以写成组件，但是博主这里想偷懒一下，有兴趣的，可以自己试着写成组件）。
分析完两个页面的组件构成之后，我们修改项目目录如下
 
 
这样的目录结构，就一目了然了吧。两个页面，Home和detail和其中用到的三个组件。ps：assets目录下新建的img目录，里边放的一张图片是测试用的。
做了这么一大堆铺垫，现在来简单说一说单文件组件.vue文件。拿List.vue为例，说说单文件组件的结构，如下图
 
 
单文件组件，由三大部分组成，template、style、script，想必看到这三个标签元素，大家也都对其作用大概了解了吧。
 

template

template是放置组件的组成部分——html元素的地方，是整个组件的模板构成。不过有一点需要特别注意，template下只能存在一个根html元素作为wrapper，不能存在两个并列的跟元素，否则会报错。
 
 
 

style

style下放置组件的样式，可以用css预处理器less或者sass等，前提是需要安装这些依赖包，和设置lang属性，博主比较懒，直接用css了。这个style里的样式表在项目运行的时候会生成一个style标签，插入到index.html的head标签里，如果组件里的style标签为空，则会在index.html的head里插入一个空的style标签，所以，建议大家，这个组件没有用到css，就不要写一个空的style，直接省略就好。
 
既然每个组件的样式都会生成一个style插入到index.html中，我们做的又是单页面应用，所有的代码都基于index.html的，那如果我们的项目比较大或者是多人协作开发的，难免会在写组件的时候会命名相同的class，这样的话，具有相同class的不同组件的样式就会收到影响，产生不可预估的样式问题，那岂不是很头疼。其实，vue早就替我想到了这个问题，可以给style设置一个scoped的属性，意思是该style里的样式只对这个组件起作用，不会影响其他组件中含有相同class的元素。那vue是怎么做到的呢？这里先卖个关子，后边再探究竟。
 

script

script里自然是放的js代码。这里会用到一些ES6的语法，大家可以去 这里 学习ES6的一些新的语法特性。在List.vue的script中，大致意思就是导出一个对象（这个组件），其中设置可以通过属性price和title传递数据。看下边的示意图
 
 
具体的怎样利用props传递数据，请看 这里。
 
.vue单文件组件的三大组成部分大概就是这些，具体的内容，主要是script，整个组件的功能代码全在这里边，大家还要多去学习和了解，由于在下才疏学浅，也只能介绍这些了。
 

vue-router 2.0

由于用vue主要开发单页面应用，没有页面之间的跳转，在vue中，一个所谓的“页面”实则是一个看起来很像“页面”的一个组件（这个组件大部分情况下包含其他子组件）而已。既然没有页面，那怎样实现页面之间的切换呢？那就是我们现在要介绍的主角——vue-router 2.0。
vue-router是在vue中控制路由的。ps：如果你不太理解路由这个概念，可以简单的理解为url重的hash部分，只不过vue做了一些封装和完善。要控制路由，还需要借助两个vue-router自带的两个组件router-view和router-link。
 

安装vue-router 2.0

打开命令行，cd到当前项目的目录，运行 cnpm install vue-router --save  ，f等待安装完成即可。
 
 

router-view

router-view是现实路由内容的地方，即如果有多个“页面”需要切换，显示当前“页面“的地方。需要注意的是，使用vue-router控制路由则必须router-view作为容器。
 
 
router-view还可以嵌套，即嵌套路由，详情去 这里学习哟~
 

router-link

router-link有一个to属性，其属性值是目标路由，在运行项目的时候，router-link表现为a标签，to属性则表现为a标签的href属性。至于，为什么不直接用a标签，我也不知道呢疑问。如果你知道的话，可以留言告诉我，不胜感激的呢~
 
 
这是List组件中用到的router-link组件。
 
基本的概念和准备工作都做好了，剩下的就是贴代码了，瞬间感觉轻松好多。
 
修改根目录下的index.html如下：
[html] view plain copy
 
  1. <!-- index.html -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
  7.     <title>first-vue</title>  
  8.     <style type="text/css">  
  9.         * { margin: 0; padding: 0; }  
  10.         html,body { background: #eee; }  
  11.         ul,li { list-style: none; }  
  12.         a { text-decoration: none; }  
  13.         img { vertical-align: middle; }  
  14.         /* 跳转页面动画 */  
  15.         .slide-enter,  
  16.         .slide_back-enter {  
  17.             position: absolute;  
  18.             width: 100%;  
  19.         }  
  20.         .slide-leave,  
  21.         .slide_back-leave {  
  22.             position: absolute;  
  23.             width: 100%;  
  24.         }  
  25.         .slide-enter-active,  
  26.         .slide_back-enter-active {  
  27.             transition: all 0.3s linear;  
  28.         }  
  29.         .slide-leave-active {  
  30.             position: absolute;  
  31.             transition: all 0.3s linear;  
  32.             transform: translate(-100%);  
  33.         }  
  34.         .slide-enter{  
  35.             transform: translateX(100%);  
  36.         }  
  37.         .slide_back-leave-active {  
  38.             position: absolute;  
  39.             transition: all 0.3s linear;  
  40.             transform: translate(100%);  
  41.         }  
  42.         .slide_back-enter {  
  43.             transform: translateX(-100%);  
  44.         }  
  45.     </style>  
  46.   </head>  
  47.   <body>  
  48.     <div id="app">  
  49.         <transition :name="transitionName">  
  50.             <router-view></router-view>  
  51.         </transition>  
  52.     </div>  
  53.   
  54.     <script type="text/javascript">  
  55.   
  56.         // 计算html的font-size  
  57.         (function(){  
  58.             function resizeBaseFontSize(){  
  59.                 var rootHtml = document.documentElement,  
  60.                     deviceWidth = rootHtml.clientWidth;  
  61.   
  62.                 if(deviceWidth > 640){  
  63.                     deviceWidth = 640;  
  64.                 }  
  65.   
  66.                 rootHtml.style.fontSize = deviceWidth / 7.5 + "px";  
  67.             }  
  68.   
  69.             resizeBaseFontSize();  
  70.   
  71.             window.addEventListener("resize", resizeBaseFontSize, false);  
  72.             window.addEventListener("orientationchange", resizeBaseFontSize, false);  
  73.         })();  
  74.     </script>  
  75.   </body>  
  76. </html>  
其中 transition组件是用来控制页面切换的动画用的，transitionName绑定到的是main.js中的data中的transitionName字段。
 
修改src目录下的main.js如下：
[javascript] view plain copy
 
  1. // main.js  
  2.   
  3. // 导入Vue，这个是必需的，在使用Vue之前，必须先导入  
  4. import Vue from 'vue'  
  5.   
  6. // 导入 vue-router，并使用  
  7. import VueRouter from 'vue-router'  
  8. Vue.use(VueRouter)  
  9.   
  10. // 导入 pages 下的 Home.vue   
  11. import Home from './pages/Home'  
  12. import Detail from './pages/Detail'  
  13.   
  14. // 定义路由配置  
  15. const routes = [  
  16.     {  
  17.         path: '/',  
  18.         component: Home  
  19.     },  
  20.     {  
  21.         path: '/detail',  
  22.         component: Detail  
  23.     }  
  24. ]  
  25.   
  26. // 创建路由实例  
  27. const router = new VueRouter({  
  28.     routes  
  29. })  
  30.   
  31. // 创建 Vue 实例  
  32. new Vue({  
  33.   el: '#app',  
  34.   data(){  
  35.     return {  
  36.         transitionName: 'slide'  
  37.     }  
  38.   },  
  39.   router, // 在vue实例配置中，用router  
  40.   watch: {  
  41.     // 监视路由，参数为要目标路由和当前页面的路由  
  42.     '$route' (to, from){  
  43.         const toDepth = to.path.substring(0, to.path.length-2).split('/').length  
  44.         // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'  
  45.         // 按照官方给的例子，这两个路由路径深度都为 2 ，所以，这里稍作调整，不知道有什么不妥  
  46.         // 但目前在这个demo中能正常运行，如果知道更好的方法，欢迎留言赐教  
  47.         const fromDepth = from.path.substring(0, from.path.length-2).split('/').length  
  48.         this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'  
  49.         // 根据路由深度，来判断是该从右侧进入还是该从左侧进入  
  50.     }  
  51.   }  
  52. })  

HomeHeader.vue代码
[plain] view plain copy
 
  1. <!-- HomeHeader.vue -->  
  2. <template>  
  3.     <header class="header">  
  4.         <div class="header_inner">  
  5.             <div class="header_cont">主页</div>  
  6.         </div>  
  7.     </header>  
  8. </template>  
  9.   
  10. <style>  
  11.     .header {  
  12.         height: 0.88rem;  
  13.     }  
  14.     .header_inner {  
  15.         position: fixed;  
  16.         top: 0;  
  17.         left: 0;  
  18.         right: 0;  
  19.         z-index: 99;  
  20.         max-width: 640px;  
  21.         height: 0.88rem;  
  22.         box-sizing: border-box;  
  23.         margin: 0 auto;  
  24.         padding: 0 0.24rem;  
  25.         border-bottom: 0.02rem solid #80ccd6;  
  26.         background-color: #fff;  
  27.     }  
  28.     .header_cont {  
  29.         text-align: center;  
  30.         padding: 0 0.4rem;  
  31.         line-height: 0.86rem;  
  32.         font-size: 15px;  
  33.         overflow: hidden;  
  34.         text-overflow: ellipsis;  
  35.         white-space: nowrap;  
  36.     }  
  37. </style>  

List.vue代码
[plain] view plain copy
 
  1. <!-- List.vue -->  
  2. <template>  
  3.     <li class="sec_li">  
  4.         <router-link to="/detail" class="lp_li_a">  
  5.             <div class="lp_li_imgWrap">  
  6.                 <img src="../assets/img/lp_01.jpg" alt="">  
  7.             </div>  
  8.             <p class="lp_li_name">{{ title }}</p>  
  9.             <p class="lp_li_price">￥{{ price }}元</p>  
  10.         </router-link>  
  11.     </li>  
  12. </template>  
  13.   
  14. <style scoped>  
  15.     .sec_li {  
  16.         float: left;  
  17.         width: 50%;  
  18.         margin-bottom: 0.1rem;  
  19.     }  
  20.     .lp_li_a {  
  21.         display: block;  
  22.         padding: 0.3rem 0;  
  23.         margin: 0 0.05rem;  
  24.         text-align: center;  
  25.         background: #fff;  
  26.     }  
  27.     .lp_li_imgWrap {  
  28.         padding: 0.24rem 0;  
  29.     }  
  30.     .lp_li_imgWrap > img {  
  31.         width: auto;  
  32.         height: 2.3rem;  
  33.     }  
  34.     .lp_li_name {  
  35.         height: 0.5rem;  
  36.         line-height: 0.5rem;  
  37.         font-size: 16px;  
  38.         color: #333;  
  39.     }  
  40.     .lp_li_price {  
  41.         height: 0.5rem;  
  42.         line-height: 0.5rem;  
  43.         font-size: 16px;  
  44.         color: #fb3b3b;  
  45.     }  
  46. </style>  
  47.   
  48. <script>  
  49.     export default {  
  50.         props: ['price', 'title']  
  51.     }  
  52. </script>  

DetailHeader.vue代码
[plain] view plain copy
 
  1. <!-- DetailHeader.vue -->  
  2. <template>  
  3.     <header class="header">  
  4.         <div class="header_inner flexWrap">  
  5.             <div   
  6.                 id="header_btn_nav"   
  7.                 class="header_btn header_btn_back"  
  8.                 v-on:click="goBack"  
  9.                 >返回</div>  
  10.             <div class="header_cont flex">详情</div>  
  11.             <div class="header_btn header_btn_cart"></div>  
  12.         </div>  
  13.     </header>  
  14. </template>  
  15.   
  16. <style>  
  17.     .flexWrap {  
  18.         display: -webkit-flex;  
  19.         display: flex;  
  20.     }  
  21.     .flex {  
  22.         flex: 1;  
  23.     }  
  24.     .header {  
  25.         height: 0.88rem;  
  26.     }  
  27.     .header_inner {  
  28.         position: fixed;  
  29.         top: 0;  
  30.         left: 0;  
  31.         right: 0;  
  32.         z-index: 99;  
  33.         max-width: 640px;  
  34.         height: 0.88rem;  
  35.         box-sizing: border-box;  
  36.         margin: 0 auto;  
  37.         padding: 0 0.24rem;  
  38.         border-bottom: 0.02rem solid #80ccd6;  
  39.         background-color: #fff;  
  40.     }  
  41.     .header_btn {  
  42.         width: 0.5rem;  
  43.         height: 100%;  
  44.         background-repeat: no-repeat;  
  45.     }  
  46.     .header_btn_back {  
  47.         line-height: 0.86rem;  
  48.     }  
  49.     .header_cont {  
  50.         text-align: center;  
  51.         padding: 0 0.4rem;  
  52.         line-height: 0.86rem;  
  53.         font-size: 15px;  
  54.         overflow: hidden;  
  55.         text-overflow: ellipsis;  
  56.         white-space: nowrap;  
  57.     }  
  58.     .header_btn:active {  
  59.         opacity: 0.7;  
  60.     }  
  61. </style>  
  62. <script>  
  63.     export default {  
  64.         methods: {  
  65.             goBack(){  
  66.                 window.history.back();  
  67.             }  
  68.         }  
  69.     }  
  70. </script>  

Home.vue代码
[plain] view plain copy
 
  1. <!-- Home.vue -->  
  2. <template>  
  3.     <div class="container">  
  4.         <!-- 由于html不区分大小写，所以js中驼峰命名方式在html中要改成用短横线连接的形式 -->  
  5.         <home-header></home-header>  
  6.         <div class="content">  
  7.             <ul class="cont_ul">  
  8.                 <list  
  9.                     v-for="item in items"  
  10.                     :price="item.price"  
  11.                     :title="item.title">  
  12.                 </list>  
  13.             </ul>  
  14.         </div>  
  15.     </div>  
  16. </template>  
  17. <style>  
  18.     .container {  
  19.         max-width: 640px;  
  20.         margin: 0 auto;  
  21.         overflow-x: hidden;  
  22.     }  
  23.     .cont_ul {  
  24.         padding-top: 0.05rem;  
  25.         margin: 0 -0.12rem;  
  26.     }  
  27.     .cont_ul:after {  
  28.         content: "";  
  29.         display: block;  
  30.         width: 0;  
  31.         height: 0;  
  32.         clear: both;  
  33.     }  
  34. </style>  
  35. <script>  
  36.     // 导入要用到的子组件  
  37.     import HomeHeader from '../components/HomeHeader'  
  38.     import List from '../components/List'  
  39.   
  40.     export default {  
  41.         data () {  
  42.             return {  
  43.                 items: [  
  44.                     { price: "129.00", title: "大学" },  
  45.                     { price: "256.00", title: "中庸" },  
  46.                     { price: "399.00", title: "论语" },  
  47.                     { price: "998.00", title: "孟子" },  
  48.                     { price: "99.00", title: "道德经" },  
  49.                     { price: "89.00", title: "老子" },  
  50.                     { price: "188.00", title: "金刚经" },  
  51.                     { price: "209.00", title: "易筋经" },  
  52.                 ]  
  53.             }  
  54.         },  
  55.         // 在components字段中，包含导入的子组件  
  56.         components: {  
  57.             HomeHeader,  
  58.             List  
  59.         }  
  60.     }  
  61. </script>  

Detail.vue代码
[plain] view plain copy
 
  1. <!-- Detail.vue -->  
  2. <template>  
  3.     <div class="detail">  
  4.         <detail-header></detail-header>  
  5.         <img src="../assets/img/lp_01.jpg" alt="">  
  6.         <p>崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。</p>  
  7.         <p>其间，在季羡林、冯其庸等国学大师及著名文史学家傅璇琮、毛佩琦先生指导下，耕注先贤原典，以宣纸线装精品形式呈奉世人。作为一家国学传播机构，崇贤馆始终致力于中华传统文化的传承和推广，以古籍线装宣纸书的形式，对浩繁的史海巨著进行经典复刻。不仅如此，崇贤馆还延请了傅璇琮、毛佩奇等诸位在国学界内享有盛誉的专家和学者担纲学术顾问，以精益求精的治学态度面对每一部崇贤馆的作品，使之成为学术史中无尚的精品。</p>  
  8.     </div>  
  9. </template>  
  10. <style>  
  11.     .detail {  
  12.         padding: 0.24rem;  
  13.         font-size: 12px;  
  14.     }  
  15.     img {  
  16.         display: block;  
  17.         width: 80%;  
  18.         margin: 0 auto 0.2rem;  
  19.     }  
  20.     p {  
  21.         font-size: 14px;  
  22.         line-height: 0.5rem;  
  23.         text-align: justify;  
  24.         padding-bottom: 0.24rem;  
  25.     }  
  26. </style>  
  27. <script>  
  28.     import DetailHeader from '../components/DetailHeader'  
  29.   
  30.     export default {  
  31.         components: {  
  32.             DetailHeader  
  33.         }  
  34.     }  
  35. </script>  

最后，差点忘了，style的scoped属性的问题。现在，我们把List.vue中的style加上scoped属性，然后在命令行cd到项目目录，运行 npm run dev ，在浏览器访问localhost:8080，然后审查列表标签，会发现在列表标签中多了一个自定义属性，如下
 
 
相应的css选择器也成了复合选择器，在原有选择器基础上复合了一个属性选择器，so~~这就是style scoped的奥秘之处。
 
这下应该没有什么遗漏了吧，好累，心好累~~~
 
哦，对了，如果用sublime开发，建议安装vue的插件，支持语法高亮哟~
 
应有些朋友的需求，把项目源码托管到github上，项目网址 https://github.com/Angewell/firstVue
 
分享到：
| Vue.js2路由学习2
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Vue模块篇.pdf

    使用@vue/cli脚手架可以快速搭建Vue模块化项目的开发环境。@vue/cli提供了一套基于Node.js的命令行接口，可以通过npm或yarn等包管理工具安装。安装完成后，可以通过vue命令快速创建项目、开发和构建。 4. 项目结构...

    vite+vue3使用模块化批量发布Mockjs接口

    "vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...

    vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar

    本资源包含`vue基础篇`、`vue进阶篇`和`Vue模块篇`三个部分，旨在帮助开发者全面理解和掌握Vue.js。 在`vue基础篇`中，你将学习到Vue的基础概念和核心特性，包括： 1. **安装与设置**：如何通过CDN或npm引入Vue.js...

    vue的npm模块安装使用方法

    ### vue的npm模块安装使用方法 #### 知识点概览 - **npm配置路径设置** - **环境变量配置** - **安装cnpm** - **全局安装vue-cli与webpack** - **安装Vue Router** - **运行开发服务器** - **安装Webpack CLI及插件...

    vite+vue3动态模块化导入并使用pinia

    4. **使用Pinia**：Vue3组件内，可以使用`useStore`函数来获取对应的Pinia store实例，然后直接调用store中的方法或访问状态。这样，组件就能根据需要即时获取和修改状态，同时避免了不必要的初始加载开销。 5. **...

    Vue模块用于在vuejs应用中懒加图片

    Vue 模块 Vue-Lazyload 正是为此而生，它能够有效地在 Vue.js 应用中实现图片的延迟加载。 Vue-Lazyload 插件允许我们在 Vue 应用中按需加载图片，即只有当图片进入视口时，才会发起请求加载图片，这样可以显著减少...

    vue3.x+vite+ts+vue-router@4.x 路由使用demo

    4. **Vue Router 4.x**：Vue Router 4.x 配置路由时，主要涉及`createRouter`和`createWebHistory`方法。路由定义包括 path、component、props、beforeEnter 等选项。还可以使用 `router-link` 和 `router-view` ...

    基于vue的uniapp原生蓝牙模块插件-soket流读写蓝牙数据

    uniapp基于vue的原生蓝牙模块插件，使用nativejs调用底层蓝牙模块，支持蓝牙数据读写，可自定义扩展方法

    vue3中router和store详细使用教程方法vuex和route.zip

    在本教程中，我们将深入探讨这两个组件在Vue3中的详细使用方法，以及与`vue`和`route`的结合。 **Vue Router 3.x 在Vue3中的使用** Vue Router 3.x 已经支持Vue3，引入方式与Vue2有所不同。首先，需要通过npm安装...

    基于Vue的模块化组件化工程化编码应用例子

    在现代Web开发中，Vue.js已经成为了非常流行的前端框架，尤其在实现模块化、组件化和工程化的项目中，Vue.js展现出了强大的能力。本文将深入探讨基于Vue的模块化、组件化和工程化编码应用。 一、Vue.js模块化 模块...

    vue3.x中使用cesium，vue3.x+Cesium

    同时，也可以通过设置Cesium对象的属性或调用其方法来响应Vue数据的变化。 7. **优化性能**: 考虑到Cesium可能带来的性能问题，可以使用Vue的`v-if`指令有条件地渲染Cesium组件，或者使用`v-show`来控制其可见性。...

    vue3-captcha（vue3行为验证码）

    8. **插件API**：Vue3-Captcha作为一个插件，会提供安装方法和配置选项，允许开发者自定义验证码的样式、行为和验证规则。 9. **测试和调试**：Vue3-Captcha的开发过程中，可能使用Vue Test Utils和Jest等工具进行...

    vue模块拖拽实现示例代码

    总的来说，Vue模块拖拽实现的核心在于监听鼠标事件，计算元素的相对位置，并在数据模型中反映这些变化。这种数据驱动的方法使得Vue非常适合构建此类交互丰富的应用程序。通过理解并实践这个示例，开发者可以进一步...

    vue源码解析 vue教程使用

    组件有自身的状态、方法和生命周期，可以嵌套使用，形成复杂的UI结构。 4. **指令系统**：Vue提供了一系列内置指令，如`v-if`、`v-for`、`v-bind`和`v-on`，这些指令简化了DOM操作，使得模板语法更加直观。 5. **...

    vue的国际化实现，包括ant-design-vue与自定义的实现

    在`App.vue`或者其他组件中，你可以使用`$t`方法来获取翻译。比如： ```html &lt;h1&gt;{{ $t('message.hello') }} ``` 4. **Ant Design Vue的国际化**： Ant Design Vue也提供了国际化的支持。首先，你需要...

    VUE---store中引入多modules/*.js 文件

    3. **使用模块**：在Vue组件中，我们可以直接通过`this.$store`访问到各个模块的方法和属性，只需在访问时加上模块名前缀。 ```javascript // 访问moduleA的state const moduleAState = this.$store.state.moduleA ...

    EasyPlayer.js 在VUE中使用

    在Vue.js框架中集成EasyPlayer.js，是一种常见的实现视频播放功能的方法。EasyPlayer.js是一款轻量级的HTML5视频播放器，它提供了丰富的API和自定义样式能力，使得在前端项目中实现视频播放变得简单易行。下面我们将...

    使用d3vue开发的Topo图

    3. **创建自定义Vue组件**：在Vue项目中，创建一个专门用于绘制Topo图的组件，导入d3vue模块，利用其提供的方法如`d3vueGraph`进行渲染。 4. **数据绑定**：将上一步创建的数据模型绑定到组件的属性上，使数据变化...

    VUE打印demo，自动分页

    在项目中，我们可能需要安装这个插件（通过`npm install vue-print-nb`），然后在Vue组件中引入并使用它。例如： ```javascript import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) ``` 接...

Magicbox
Global site tag (gtag.js) - Google Analytics