VUE

vue

• vue 安装

   $ npm install -g vue-cli
    $ vue init webpack my-project
    $ cd my-project
    $ npm install
    $ npm run dev

• 目录结构
  ├── build/ # webpack配置文件
  │ └── ...
  ├── config/
  │ ├── index.js# 主要项目配置
  │ └── ...
  ├── src/
  │ ├── main.js # 应用入口文件
  │ ├── App.vue # 主应用程序组件
  │ ├── components/ # ui组件
  │ │ └── ...
  │ └── assets/ # 模块资源（由webpack处理）
  │ └── ...
  ├── static/ # 纯静态资源（直接复制）
  ├── test/
  │ └── unit/ # 单元测试
  │ │ ├── specs/ # 测试spec文件
  │ │ ├── index.js# 测试构建条目文件
  │ │ └── karma.conf.js # 测试跑步者配置文件
  │ └── e2e/# e2e测试
  │ │ ├── specs/ # 测试spec文件
  │ │ ├── custom-assertions/ # e2e测试的自定义断言
  │ │ ├── runner.js # 测试跑步脚本
  │ │ └── nightwatch.conf.js # 测试跑步者配置文件
  ├── .babelrc# babel 配置
  ├── .postcssrc.js # postcss 配置
  ├── .eslintrc.js# eslint 配置
  ├── .editorconfig # editor 配置
  ├── index.html # index.html模板
  └── package.json# 构建脚本和依赖关系

• main.js文件引入

import Vue from 'vue'
   import FastClick from 'fastclick'
   import VueRouter from 'vue-router'
   import App from './App'
   import router from'./router/memberRouter.js'  //---------自定义的路由文件
   import Base from './assets/js/baseFun.js' //---------自定义的公共函数和公共请求方法
   import stores from './store/store'//---------自定义的全局变量
   import './assets/css/base.css'//---------引入的全局公共css
   FastClick.attach(document.body)
   Vue.config.productionTip = false
   //注册全局函数和全局常量
   Vue.prototype.baseFun=Base.baseFun;  //-----注册到vue的全局，方便各个组件和页面js调用公共函数
   Vue.prototype.baseAjax=Base.baseAjax;//-----将封装的ajax请求函数注册到vue的全局   
   Vue.use(VueRouter)
   var globalVm=new Vue({
   router,//-----router文件
   el: '#app',
   store:stores,  //-----全局变量
   template: '',
   components: { App }
   })

指令

v-if 不会占位

v-show 会占位

v-for

v-bind

v-bind:class="{isActive:true}"
v-bind:href 等价于 :href
v-bind:src  等价于 ：src

v-on

• v-on:click
  可以绑定多个事件，所以可以定义一个对象

v-on:="{mouseenter:onEnter,mouseleave:onLeave}"
v-on:submit.prevent="onSubmit"
//判断回车
v-on:keyup.enter="keyup"

v-model 数据绑定

• v-model.lazy //延迟更新
• v-model.trim //去空格
• v-model.number //转换成数字类型

# vue-router
- 安装

npm install vue-router --save-dev

# vue-resource

- 安装

npm install vue-resource --save-dev

 
-  引入

/引入Vue框架/
import Vue from 'vue'
/引入资源请求插件/
import VueResource from 'vue-resource'

/*使用VueResource插件*/
Vue.use(VueResource)

 
- 语法 
    ```
    // 基于全局Vue对象使用http
    Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
    
    // 在一个Vue实例内使用$http
    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
    this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

　　then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});

// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
// 响应成功回调
}, (response) => {
// 响应错误回调
});

## 移动端前端框架 vux
   说明书：https://doc.vux.li/zh-CN/components/actionsheet.html

//安装
vue init airyland/vux2 projectName