zoukankan      html  css  js  c++  java
  • nodejs+webpack+vue之vue

    vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具,vue-cli主要是用于构建单页应用的脚手架。

    使用方法:

    1、安装vue-cli:npm install -g vue-cli

    2、安装webpack-simple模板:vue init webpack-simple 项目名称,如: vue init webpack-simple demo

    3、安装项目依赖:npm install

    4、执行代码:执行webpack命令,在dist目录下生成build.js文件,执行npm run dev命令,自动启动web服务127.0.0.1:8080

    本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。

    本项目用到了两个html模板页:index.html、users.html,因此,在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。

    index.html模板,<router-view>把路由匹配到的组件渲染在这里

    <body>
        <div id="app">
         <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script src="/dist/build.index.js"></script> </body>

    index.js入口文件,引入了logon.vue组件,在'/'目录下默认引入该组件。

    import Vue from 'vue'
    import VueResource  from 'vue-resource'
    import VueRouter  from 'vue-router'
    import Login from './components/login.vue'
    require('./scss/reset.scss')
    require('./scss/layout.scss')
    
    Vue.use(VueResource)
    Vue.use(VueRouter)
    
    const router= new VueRouter({    
        routes:[
            {path:'/',component:Login}
        ]
    });
    
    new Vue({
        router,
        el:'#app'
    });

    users.html模板,使用 router-link 组件来导航,通过传入 `to` 属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签,<router-view>,<router-view>把路由匹配到的组件渲染在这里

    <body>
    <div id="app"> <ul id="nav" class="clearfix"> <li><router-link to="/index">首页</router-link></li> <li><router-link to="/userList">报名人员</router-link></li> </ul> <div id="banner"></div> <router-view></router-view> </div>
    <script src="/dist/build.index.js"></script>
    </body>

    user.js入口文件,引入了index.vue和userList.vue两个组件,在'/'及'/index'目录下默认引入index.vue组件,在'/userList'目录下默认引入userList.vue组件。

    import Vue from 'vue'
    import VueResource  from 'vue-resource'
    import VueRouter  from 'vue-router'
    import Index from './components/index.vue'
    import UserList from './components/userList.vue'
    require('./scss/reset.scss')
    require('./scss/user.scss')
    
    Vue.use(VueResource)
    Vue.use(VueRouter)
    
    const router= new VueRouter({    
        routes:[
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {path:'/userList',component:UserList}
        ]
    });
    
    new Vue({
        router,
        el:'#app'
    });

    每个组件下都有各自的js页面效果及数据请求,如:login.vue

    <template>
      <div class="login-box">
        <div>
          <p>
            <input type="text" placeholder="手机号" v-model.trim="phone"/>
            <input type="text" placeholder="验证码" v-model="code" readonly="readonly"/>      
          </p>
          <input type="button" value="发送验证码" @click="getCode"/>
        </div>
        <button id="login-btn" @click="loginUser">登 录</button>        
      </div>
    </template>
    
    <script>
    import {hex_md5} from '../util/md5'
    import httpHelper from "../util/httpHelper"
    import {setTelPhone} from '../util/cacheManger'
    
    export default {  
      data () {
        return {
          phone: '15365655565',
          code:''     
        }
      },
      methods:{
        getCode(){
          let _self = this;
          let tel = /^[0-9]{11}$/.test(_self.phone)
          if(!tel){
            _self.phone = '手机号不正确';       
            return;
          }
          if(_self.phone){
            let params = {num:_self.phone}        
            httpHelper.get(_self,"getVeryCode",params,(data)=>{
              if(data.body.code<0){
                alert(data.body.description);
                return;            
              }
              _self.code = data.body.data;                                    
            },(err)=>{
                alert("shi bai")
            })
          }      
        },
        loginUser(){
          let _self = this;
          if(_self.phone && _self.code){  
              setTelPhone(_self.phone);        
              window.location.href = '/users.html'; 
          }
        }
      }
    }
    </script>

     上一篇:nodejs+webpack+vue之node

  • 相关阅读:
    021.day21 反射 Class类 反射常用操作
    020.day20 线程概述 多线程优缺点 线程的创建 线程常用方法 生命周期 多线程同步
    019.day19 缓冲流 对象流 标准输入输出流
    018.day18 map集合如何实现排序 File类 IO流 字节流 字符流 编码
    017.day17 Map接口 克隆 treeSet集合排重缺陷
    016.day16 HashSet TreeSet 比较器Comparable Comparator
    015.day15
    014.day14
    013.day13
    线程
  • 原文地址:https://www.cnblogs.com/kerry-xu/p/6360169.html
Copyright © 2011-2022 走看看