zoukankan      html  css  js  c++  java
  • 如何在require中使用VUE

     现在网上抄的沸沸扬扬的VUE看来是个很NB的东西啊,看了一下,确实相对于angular1来说简化了不少东西,性能方面也比angular1要好很多,所以现在用的人越来越多了,于是作为前端,学习一下新东西不至于被淘汰那是必须的~在网上看了一下,感觉还不错,打算用它写个单页面应用。于是……坑就跟着来了……

      首先声明本人不会webpack和es6但是看了一下网上用VUE写单页面程序的基本上都是用的webpack和ES6,他大爷的!这就有点欺负人了!不会什么非用什么?就不能做一个简简单单的前端吗?非要用什么NPM(虽然装这node但是不想用)。于是就走上了传统道路的VUE之旅,用require写VUE。百度了一下,网上用require写VUE的还真不多,于是把自己用require写VUE的过程写出来,帮助那些跟我一样,不会webpack和ES6又想用VUE的人。好了言归正传,上代码!

    先来看看require的入口JS吧!

    复制代码
     1 require.config({
     2     paths:{
     3         "text":"text",
     4         "jquery":"jquery",
     5         "vue":"vue",
     6         "vueRouter":"vue-router",
     7         "common":"common",
     8         "iview":"iview.min",
     9         "element":"element"
    10     },
    11     waitSeconds:3
    12 });
    13 require(['common','jquery','vue','vueRouter','iview'],function(common,$,Vue,VueRouter,iview){
    14     Vue.use(VueRouter);
    15     Vue.use(iview);
    16     var router=new VueRouter({
    17         routes:[
    18             {
    19                 path:'/foo',
    20                 component:common.ob
    21             },
    22             {
    23                 path:'/bar/:id',
    24                 component:{
    25                     template:'<div>bar{{$route.params.id}}</div>'
    26                 }
    27             },
    28             {
    29                 path:'/home',
    30                 component:{
    31                     template:'<div>这是HTME页面</div>'
    32                 }
    33             },
    34             {
    35                 path:'*',
    36                 redirect:"/home"
    37             }
    38         ]
    39     });
    40 
    41     common.load();
    42     common.load2();
    43     var vm=new Vue({
    44         el:"#app",
    45         data:{
    46             text:"这是一个测试页面!"
    47         },
    48         components:{
    49             "ceshi":common.ob
    50         },
    51         methods:{
    52             zouni:function(){
    53                 this.$router.push('/bar/哎呦我去!')
    54             }
    55         },
    56         router:router
    57     });
    58 
    59 });
    复制代码

      配置文件就不用说了,如果连require也不会的话就先去学学require吧!这里不再赘述了~我这里引用了vueRouter作为单页面的路由,其中我还引入了JQuery,有人说VUE不能和JQ一起使用,但是经过实验是可以的!这里还涉及到了两个前端的UI库,一个是iview,一个是element,虽然看上去差不多,但是具体用起来还是有区别的,这里就以iview为例介绍一下吧(这两个UI库是不能混用的,否则会有意想不到的“惊喜”)!再有一点要说明的就是我用的require和VUE的版本号,都是2.0以上的,我看网上有很多把VUE写到require的shim里面去的,其实是不用的!VUE2.0是支持AMD的!包括它的插件vueRouter和iview都支持!所以shim是不用的!而且我用的JQ是1.9的,也是支持AMD的,这一点来说的话个大库的公司还是有一致性的!

      如果看不懂vueRouter建议先去学一下,这里也不再赘述,其实路由都差不多,学一下就会了,不懂的可以给我留言!教程地址:https://router.vuejs.org/zh-cn/api/route-object.html。好了,这个部分代码没有什么别的好说的了,都是一些正常的使用,学过VUE的应该都能看懂,接下来重点说说第14行和15行,这里用到了Vue.use()方法,从官网的查询来看,说的是在引入VUE插件的时候需要用到这个方法,但是如果直接在页面引用VueRouter路由文件,则不需要,所以这里是个坑,刚开始写的时候我也弄了半天才弄明白,其次是第15行,iview,这个可能有人要说了,这不跟VueRouter是一个意思嘛,确实是一个意思,但是这里有个坑!在引入iview的时候有一个大坑!那就是引入iview时,第5行的vue引入命名必须为小写的vue!这个真是个坑爹货!本来我是打算跟官方保持一直大写V的,结果引入VueRouter没问题,但是引入iview的时候报错了,真是气人!

      好了说完了主文件再来看看模块吧!

    复制代码
      1 define(["vue","text!../vuetemp/1.html","text!../vuetemp/2.html","iview"],function(Vue,templates,templates2,iview){
      2     function load(){
      3         Vue.component("load",{
      4             template:templates,
      5             data:function(){
      6                 return {
      7                     abc:123
      8                 }
      9             }
     10         });
     11     }
     12     function load2(){
     13         Vue.component("load2",{
     14             template:templates,
     15             data:function(){
     16                 return {
     17                     abc:456
     18                 }
     19             },
     20             methods:{
     21                 zouni:function(){
     22                     this.$router.push('/bar/哎呦我去!')
     23                 }
     24             }
     25         });
     26     }
     27     var ob={
     28         template:templates2,
     29         data:function(){
     30             return {
     31                 visible:false,
     32                 movieList: [
     33                     {
     34                         name: '肖申克的救赎',
     35                         url: 'https://movie.douban.com/subject/1292052/',
     36                         num:1,
     37                         rate: 9.6
     38                     },
     39                     {
     40                         name: '这个杀手不太冷',
     41                         url: 'https://movie.douban.com/subject/1295644/',
     42                         num:2.5,
     43                         rate: 9.4
     44                     },
     45                     {
     46                         name: '霸王别姬',
     47                         url: 'https://movie.douban.com/subject/1291546/',
     48                         num:2.5,
     49                         rate: 9.5
     50                     },
     51                     {
     52                         name: '阿甘正传',
     53                         url: 'https://movie.douban.com/subject/1292720/',
     54                         num:2.5,
     55                         rate: 9.4
     56                     },
     57                     {
     58                         name: '美丽人生',
     59                         url: 'https://movie.douban.com/subject/1292063/',
     60                         num:2.5,
     61                         rate: 9.5
     62                     },
     63                     {
     64                         name: '千与千寻',
     65                         url: 'https://movie.douban.com/subject/1291561/',
     66                         num:2.5,
     67                         rate: 9.2
     68                     },
     69                     {
     70                         name: '辛德勒的名单',
     71                         url: 'https://movie.douban.com/subject/1295124/',
     72                         num:2.5,
     73                         rate: 9.4
     74                     },
     75                     {
     76                         name: '海上钢琴师',
     77                         url: 'https://movie.douban.com/subject/1292001/',
     78                         num:2.5,
     79                         rate: 9.2
     80                     },
     81                     {
     82                         name: '机器人总动员',
     83                         url: 'https://movie.douban.com/subject/2131459/',
     84                         num:2.5,
     85                         rate: 9.3
     86                     },
     87                     {
     88                         name: '盗梦空间',
     89                         url: 'https://movie.douban.com/subject/3541415/',
     90                         num:2.5,
     91                         rate: 9.2
     92                     }
     93                 ],
     94                 randomMovieList: []
     95             }
     96         },
     97         methods:{
     98             show:function(){
     99                 this.visible=true;
    100             },
    101             changeLimit:function() {
    102                 function getArrayItems(arr, num) {
    103                     const temp_array = [];
    104                     for (let index in arr) {
    105                         temp_array.push(arr[index]);
    106                     }
    107                     const return_array = [];
    108                     for (let i = 0; i<num; i++) {
    109                         if (temp_array.length>0) {
    110                             const arrIndex = Math.floor(Math.random()*temp_array.length);
    111                             return_array[i] = temp_array[arrIndex];
    112                             temp_array.splice(arrIndex, 1);
    113                         } else {
    114                             break;
    115                         }
    116                     }
    117                     return return_array;
    118                 }
    119                 this.randomMovieList = getArrayItems(this.movieList, 5);
    120             }
    121         },
    122         mounted () {
    123             this.changeLimit();
    124         }
    125     }
    126     return {
    127         load:load,
    128         load2:load2,
    129         ob:ob
    130     }
    131 });
    复制代码

      这里因为没法用.vue文件,所以只能这么写了,就是引入模板,然后再在下面配置组件的各种属性方法等等,然后封装成一个object,然后传出去,在路由的地方使用,或者直接注册进全局的VUE里面,然后上面的两个是定义的一个全局组件,直接在主文件中调用就OK了,可以看一下文章开头那段代码的41和42行。

      接下来就是最重要的模板了(要不是为了方便引入模板,我才不用require呢)~

    复制代码
    1 <div>
    2 <div>远程加载的模板!{{abc}}</div>
    3 <ul>
    4     <li>{{$route.params.id}}</li>
    5     <li @click="zouni">2</li>
    6     <li>3</li>
    7     <li>4</li>
    8 </ul>
    9 </div>
    复制代码
    复制代码
     1 <div>
     2 <Card style="350px">
     3     <p slot="title">
     4         <Icon type="ios-film-outline"></Icon>
     5         经典电影
     6     </p>
     7     <a href="#" slot="extra" @click.prevent="changeLimit">
     8         <Icon type="ios-loop-strong"></Icon>
     9         换一换
    10     </a>
    11     <ul>
    12         <li v-for="item in randomMovieList">
    13             <a :href="item.url" target="_blank">{{ item.name }}</a>
    14             <span>
    15                 <!-- <Rate disabled v-model="item.rate/2"></Rate>
    16                 <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
    17                 <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
    18                 <Icon type="ios-star-half" v-else></Icon> -->
    19                 <Rate allow-half v-model="item.num"></Rate>
    20                 {{ item.num }}
    21                 {{ item.rate }}
    22             </span>
    23         </li>
    24     </ul>
    25 </Card>
    26 <i-button @click="show">Click me!</i-button>
    27 <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
    28 </div>
    复制代码

      这两段就是模板文件,直接引入之后加入进去就行了,虽然不能用.vue文件,但是有个好处就是我们可以直接拿HTML来用~而且还支持语法提示和高亮!也算是一种补偿吧~

      好了,到这里大家就应该知道如何通过require来使用VUE了吧~如果有什么不明白的大家也可以留言,我会及时回复大家的~最后提示一下就是用require+VUE+vueRouter+iview的方法来写项目的话会有点大~因为光这些JS+CSS就已经1M多了~如果再加上本身项目的业务逻辑我估计一个项目下来最少也要几十M,所以想好好用VUE的话还是学习一下webpack和ES6吧!

  • 相关阅读:
    4.深入k8s:容器持久化存储
    3.深入k8s:Deployment控制器
    深入k8s:Pod对象中重要概念及用法
    深入k8s:k8s部署&在k8s中运行第一个程序
    博文大纲
    文字渲染一探
    搭建sonarqube分析golang代码
    MSSQL系列 (四):系统函数之日期和时间函数
    MSSQL系列 (三):系统函数之字符串函数
    MSSQL系列 (二):表相关操作、列操作、(唯一、主键、默认、检查、外键、非空)约束、临时表
  • 原文地址:https://www.cnblogs.com/libin-1/p/6980222.html
Copyright © 2011-2022 走看看