Web前端：Vue.js摘要

一、基本语法：
1.创建Vue构造器：
(1)创建Vue实例:
<script type="text/javascript">
    var Vue实例名 = new Vue({
        el: '#html标签id',          //<html标签 id = "标签id" />，指定对此html标签生效
        data: {                     //data用于定义属性
            属性名1: "值1",            //属性个数随意
            属性名2: "值2"
        },
        computed: {   //computed用于定义计算属性，在此内部的属性都是计算属性(使用：{{计算属性名1}})
            计算属性名1: function () {  //只有属性的get方法
                return 计算表达式;   //将计算结果赋值给计算属性名1
            },
            计算属性名2: {  //有属性的get和set方法
                get: function () {
                    return 计算表达式;
                }
                set: function (参数值) {
                    this.属性名1 = 参数值; //对其他属性进行赋值
                    ...
                }
            }
        },
        methods: {                   //methods用于定义函数
            函数名: function() {     //函数名
                return 表达式或值;   //函数返回值
            }
        },
        mixins: [对象名]     //使用混入对象
    })
    实例名.$属性名;  //调用实例中系统自带的属性
</script>

(2)混入对象(类似java中的基类，定义通用函数/计算属性，供继承)
var 混入对象名 = {  // 定义混入对象
    //created: function () {  //定义通用函数，created名称固定，此函数在其他通用函数被调用时自动调用
    //    ...
    //}
    methods: {                   //定义通用函数
        通用函数: function() {
            //var 变量名 = this.$options.属性;  //可以在混入对象中使用Vue实例的属性(又名全局混入)
            ...
        }
    }
}
var Vue实例 = new Vue({
    //属性: '值',
    mixins: [混入对象名],  //使用混入对象，继承通用函数
    ...
});
Vue实例.通用函数();  //Vue实例已经继承了通用函数，并且能直接调用

2.插入文本：
(1){{}}符号方式：
<html标签>{{属性名}}</html标签>  //将属性值填入标签中
<html标签>{{函数名()}}</html标签> //将函数返回值填入标签中
<html标签>{{js表达式}}</html标签> //将js表达式计算的结果填入标签中

(2)v-text方式：
<html标签 v-text="属性名" />  //属性值为文本时使用

(3)v-html方式插入html标签：
<html标签 v-html="属性名" />  //属性值为<html标签>时用v-html，例<div>...</div>

(4)v-pre方式插入原始信息(显示原始信息，跳过编译过程)：
<html标签 v-pre>{{信息}}</html标签>  //最终显示为"{{信息}}"

3.v-bind绑定html标签属性：
格式：
<html标签名 v-bind:html标签属性="vue属性名">
或简写
<html标签名 :html标签属性="vue属性名">

例如：
<1>html部分：
<html标签 v-bind:属性="vue属性名">
  ...
</html标签>

<2>vue部分：
var app = new Vue({
  data: {
    vue属性名: '值'
  }
})

(1)绑定html标签class属性设置样式：
<html标签 v-bind:class="{ 'CSS属性1': vue属性名1, 'CSS属性2': vue属性名2 }">...</html标签> //将vue属性值赋值给CSS属性
<html标签 v-bind:class="vue对象名">...</html标签> //使用vue单个对象设置样式，vue对象中定义CSS属性，例Vue数据中：data: {vue对象名: {width: '10px', height: '10px'}}
<html标签 v-bind:class="[vue对象名1, vue对象名2]">...</html标签> //使用vue对象数组设置样式

(2)绑定html标签style属性设置样式：
<html标签 v-bind:style="{ 'CSS属性1': vue属性名1, 'CSS属性2': vue属性名2 }">...</html标签> //将vue属性值赋值给CSS属性
<html标签 v-bind:style="vue对象名">...</html标签> //使用vue单个对象设置样式，vue对象中定义CSS属性，例Vue数据中：data: {vue对象名: {width: '10px', height: '10px'}}
<html标签 v-bind:style="[vue对象名1, vue对象名2]">...</html标签> //使用vue对象数组设置样式

4.v-show与v-if条件判断：
(1)v-show控制是否显示此标签：
<html标签 v-show="true或false">...</html标签>   //true显示，false隐藏

(2)v-if条件判断：
<html标签 v-if="条件表达式">        //v-else-if可以有多个
   此行条件为true时执行
</html标签>
<html标签 v-else-if="条件表达式">   //v-else-if可以有多个
   此行条件为true时执行
</html标签>
<html标签 v-else>
   此行当以上条件都为false时执行
</html标签>

5.v-for循环：
<html标签 v-for="value in 整数">  //遍历整数，value为0 1 2...
<html标签 v-for="value in 数组">  //遍历数组，value为每个数组元素
<html标签 v-for="value in 对象">  //遍历对象属性，value为每个属性值
<html标签 v-for="(value, key) in 对象">  //遍历对象属性，key为属性名
<html标签 v-for="(value, key, i) in 对象">  //遍历对象属性，key为属性名，i为当前索引值
   {{value}}  //取出当前遍历的值
   {{key}}    //取出当前遍历的属性名
   {{i}}      //取出当前索引值
</html标签>
<html标签 v-if='value==指定值' v-for="(value, key, i) in 对象">  //v-if与v-for联合使用
   ...
</html标签>

6.v-model双向绑定表单(属性与表单绑定)：
修饰符：
v-model.lazy       -将(默认)输入时触发事件 改为 失去焦点时触发事件
v-model.number     -将原值字符串类型转为数值类型
v-model.trim       -去掉首尾空格
使用：
<input type="text" v-model="vue属性名">   //1.单行文本框，显示属性值在文本框中
<input v-model.lazy="vue属性名" >         //单行文本框修饰符使用，可以为lazy、number、trim
<textarea v-model="vue属性名" />          //2.大文本，显示属性值在大文本框中
<input type="radio" value="值1" v-model="vue属性名">       //3.单选框，value值与vue属性值一致时选中此单选框，例vue数据中：data: {vue属性名: '值1']}
<input type="checkbox" value="值1" v-model="vue数组属性名"> //4.复选框，value值在vue数组中时选中此复选框，例vue数据中：data: {vue数组属性名: ['值1', '值2']}
<select v-model="vue属性名">    //5.下拉选择列表(单选)，例vue数据中：data: {vue属性名: '值1'}
  <option value="值1">...</option>  //value值与vue属性值一致时选中此item项
  <option value="值2">...</option>
  ...
</select>
//<select v-model="vue数组属性名" multiple>    //下拉选择列表(多选)，例vue数据中：data: {vue数组属性名: ['值1', '值2']}
  <option value="值1">...</option>  //value值与vue属性值一致时选中此item项
  <option value="值2">...</option>  //value值与vue属性值一致时同时选中此item项
  ...
</select>

7.v-on:监听点击等事件：
(1)系统自带按键：
说明：
v-on:click              -  点击事件
v-on:submit             -  提交事件
v-on:keyup              -  键盘按键弹起事件
v-on:事件名.stop        - 阻止冒泡
v-on:事件名.prevent     - 阻止默认事件
v-on:事件名.capture     - 阻止捕获
v-on:事件名.self        - 只监听触发该元素的事件
v-on:事件名.once        - 只触发一次
v-on:事件名.left        - 左键事件
v-on:事件名.right       - 右键事件
v-on:事件名.middle      - 中间滚轮事件
v-on:事件名.enter                  - 回车键
v-on:事件名.tab                    - Tab键
v-on:事件名.delete                 - 删除/退格键
v-on:事件名.esc                    - Esc键
v-on:事件名.space                  - 空格键
v-on:事件名.up                     - 向上箭头键
v-on:事件名.down                   - 向下箭头键
v-on:事件名.left                   - 向左箭头键
v-on:事件名.right                  - 向右箭头键
v-on:事件名.ctrl                   - Ctrl键
v-on:事件名.alt                    - Alt键
v-on:事件名.shift                  - Shitf键

使用：
methods: {                   //methods用于定义函数
   函数名: function(event) {     //无参函数，event为原生DOM事件，可改成自定义名称，接收外部传值
 //函数名: function(param) {     //带形参函数
 //函数名: function(param, event) {     //带形参+事件对象函数，事件对象参数必须放最后一个
      ...
   }
}
<html标签 v-on:click='函数名'>...</html标签>   //点击时根据函数名调用methods中的函数，事件对象为默认形参，需要传值时用：函数名('参数值')
<html标签 v-on:click='函数名("实参值")'>...</html标签>   //点击调用函数并传实参
<html标签 v-on:click='函数名("实参值",$event)'>...</html标签>   //点击调用函数并传实参+事件对象，事件对象参数必须放最后一个
<html标签 @click='函数名'>...</html标签>       //简写

(2)自定义按键名：
JS代码中定义：
Vue.config.keyCodes.自定义按键名 = 键盘按键对应的数值
使用：
<html标签 v-on:keyup.自定义按键名 ='函数名'>...</html标签>  //键盘按键弹起时调用此函数

8.$watch监听属性值变化：
实例名.$watch('属性值', function(参数1, 参数2) {  //监听指定属性值的变化
    ...
});

9.v-cloak指令：
(1)作用：在使用vue插值表达式时，防止页面先显示"{{变量名}}"，再显示变量值的闪动问题。

(2)使用：
为v-cloak指令定义CSS隐藏样式：
[v-cloak] {
   display: none; //隐藏{{变量名}}，直接显示变量值
}

在html标签中使用v-cloak指令：
<html标签名 v-cloak>
   {{变量名}}
</html标签名>

10.v-once指令(只编译1次)：
<html标签 v-once>{{属性名}}</html标签>  //值显示后不再变更，即使数据实时变化


11.Vue.set添加对象属性：
var 对象名 = {"旧属性":值};
...
Vue.set(对象名, '新属性', 值);  //添加对象属性

12.Vue.delete删除对象属性：
var 对象名 = {"属性":值};
...
Vue.delete(对象名, '属性');  //删除对象属性


二、组件：
1.局部组件：
注册局部组件：
<script type="text/javascript">
    var 变量名 = {
        template: '<html标签>...<html标签>'  //自定义封装，template为固定名称
    }
    new Vue({
        el: '#html标签id',          //<html标签 id = "标签id" />，指定对此html标签生效
        components: {   //components用于定义局部组件
           '局部组件名': 变量名   // <局部组件名> 只允许在父模板可用
        }
    })
</script>
使用局部组件：
<父标签 id="html标签id">
    <局部组件名></局部组件名>
</父标签>

2.全局组件：
注册全局组件：
<script>
  Vue.component('全局组件名', {   // 注册全局组件
    template: '<html标签>...<html标签>'  //自定义封装，template为固定名称
  })
</script>
使用全局组件：
<全局组件名 组件属性名1="值">...</全局组件名>

3.使用props定义组件的属性：
(1)定义无验证的属性：
Vue.component('组件名', {   // 注册组件
   props: ['属性名1'， '属性名2'],
   ...
})

(2)定义带类型验证的属性：
类型：
String
Number
Boolean
Array
Object
Date
Function
Symbol

使用：
Vue.component('组件名', {
  props: {
    属性1: 类型,                     //此属性使用单个类型验证 (`null` 和 `undefined` 会通过任何类型验证)
    属性2: [类型1, 类型2],           //此属性使用多个可能出现的类型验证，或关系
    属性3: {                         //此属性使用更详细的验证条件
      type: 类型,
      required: true或false,         //表示必填
      default: 默认值                //基础类型的默认值
      //default: function () {
      //  return 表达式              //对象或数组类型的默认值，必须从工厂函数获取
      //}
    },
    属性4: {                         //此属性使用自定义函数验证
      validator: function (形参名) {
        return 验证表达式;           //验证形参值是否满足
      }
    }
  },
  ...
})
 
(2)使用属性：
<组件名 组件属性名1="值">...</组件名>  //使用组件属性
<组件名 v-bind:组件属性名2="值">...</组件名>  //动态Prop，使用v-bind绑定组件属性值

4.自定义事件：
使用$on(eventName) 监听事件
使用$emit(eventName) 触发事件
(1)定义：
<script>
Vue.component('组件名', {
  template: '<html标签 v-on:click="方法名1" />',   //模板，封装html标签，监听点击时调用"方法名1"
  data: function () {
    return 函数或对象或表达式
  },
  methods: {
    方法名1: function () {                    //被模板中html标签触发的点击事件调用
      this.$emit('自定义事件名')              //触发事件
    }
  },
  //model: {  //可以省略，model选项指定当前的事件类型和传入的 props
  //  prop: '属性名',
  //  event: '自定义事件名'  //定义事件名，与$emit()中一致
  //},
  //props: {  //可以省略，与model配合使用，定义带类型验证的属性
  //  属性名: 类型
  //},
})
</script>

(2)使用属性：
<组件名 v-on:自定义事件名="方法名2" />      //触发事件时调用方法，，事件名与$emit()中一致
<组件名 v-on:click.native="任意方法名" />   //监听原生点击事件


三、自定义指令：
1.局部指令：
<script>
 new Vue({
   ...
   directives: {  // 注册局部的自定义指令 v-指令名
     指令名: {   
       inserted: function (el) {  //当绑定元素插入到 DOM 中
         ...   //执行指令具体逻辑
       }
     }
   }
 })
</script>

2.全局指令：
钩子函数名：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数：
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

定义：
<script>
  Vue.directive('指令名', {  //注册全局的自定义指令 v-指令名
    钩子函数名: function (el, binding, vnode) {  //钩子函数有inserted、bind、update、componentUpdated、unbind，不用钩子函数时可以省略钩子函数名
      ...   //执行指令具体逻辑
    }
  })
</script>

3.使用：
<input v-指令名>


四、路由跳转：
1.导入vue-router依赖包：
<head>
  <script src="https://unpkg.com/vue/dist/vue.js" />
  <script src="https://unpkg.com/vue-router/dist/vue-router.js" />
</head>

2.定义路由：
<body>
  ...
  <script>
    const 组件名 = { template: '<html标签>...</html标签>' }  // 1. 自定义组件，可以import外部文件
    const 路由列表名 = [                                     // 2. 定义路由列表,支持多个路由
       { path: '/路径', component: 组件名 },   
       ...
    ]
    const 路由实例名 = new VueRouter({                       //3. 创建路由实例
       routes: 路由列表名     //可以缩写为路由名，去掉routes: 
    })
    new Vue({                                                //4. 创建并挂载到指定<html标签>。
       路由实例名
    }).$mount('#html标签id')      //使用<router-link>的父标签id
</script>
</body>

3.使用路由：
(1)使用路由：
<html标签 id="html标签id">
  <router-link to="/路径">...</router-link>    //此路径与路由中配置的一致，点击时将路由组件显示在<router-view>中
  <router-link v-bind:to="'路径'">...</router-link>      //使用 v-bind 的 JS 表达式
  <router-link :to="{path: '路径'}">...</router-link>    //同上，v-bind 的简写，显式写了path
  <router-link :to="{name: '路径', params: { 参数名: 值 }}">...</router-link>    //命名的路由
  <router-link :to="{path: '路径' query: { 参数名: '值' }}">...</router-link>    //带参数的路径，/路径?参数名=值

  <router-view></router-view>                  //路由组件显示在<router-view>中
</html标签>

(2)<router-link>属性：
replace：导航后不会留下记录，例<router-link to="/路径" replace />
append：从 /a 导航到一个相对路径 b，没有配append时路径为/b，如果配了，则为/a/b，例<router-link ... append />
tag：将<router-link>显示为其他标签(功能不变)，例<router-link ... tag="A标签" />，<router-link>显示为<A标签>...</A标签>
active-class：设置模糊匹配激活时的CSS样式，例<router-link ... active-class="CSS样式名" />
exact-active-class：设置精准匹配激活时的CSS样式，例<router-link ... exact-active-class="CSS样式名" />
event：声明触发导航的事件，例<router-link ... event="字符串或含字符串的数组" />


五、动画：
1.使用CSS固定class名实现动画：
(1)class名说明：
格式：
.动画名-过渡名{
}

动画名：
fade
slide-fade
bounce

过渡名：
enter：定义进入过渡的开始状态。
enter-active：定义进入过渡的持续时间。
enter-to：2.1.8+定义进入过渡的结束状态。
leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active：定义离开过渡的持续时间(动画持续时间)。
leave-to：2.1.8+定义离开过渡的结束状态。

(2)定义".动画名-过渡名"CSS样式：
定义CSS样式：
<style>
   .动画名-过渡名 {//定义CSS样式，动画名和过渡名固定，中间以-隔开
      ...  //此处代码与CSS动画一致
   }
   ...  //可定义多个
</style>

(3)使用<transition>标签展示动画：
<body>
   <transition name = "动画名">    //此处动画名必须与CSS样式中的动画名保持一致
      <html标签 v-show="true或false">...</html标签>  //要动画的布局，通过改变v-show或v-if的值触发动画
   </transition>
</body>

2.使用自定义过渡的class名实现动画：
(1)过渡名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

(2)使用<transition>标签展示动画：
<transition 
      过渡名1="三方CSS动画库名称1"
      过渡名2="三方CSS动画库名称2">    //此处过渡名取上面的过渡名
   <html标签 v-show="true或false">...</html标签>
</transition>

3.过渡持续时间(2.2.0新增)：
<transition :duration="毫秒数">
//<transition :duration="{ enter: 进场毫秒数, leave: 离场毫秒数 }">
   ...
</transition>

4.待续：
...

六、Ajax(axios方式)：
1.网络请求：
(1)GET方式请求：
new Vue({
  ...
  mounted () {
    axios.get('url?参数=值')  //参数跟在url后面
    /*axios.get('url', {      //参数通过第2个参数传入，与上面等同
       params: {
         参数: 值
       }
     })*/
    .then(function (response) { //处理成功的数据，如json
       ...
    })
    .catch(function (error) {  //处理失败的情况
       ...
    });
  }
})

(2)POST方式请求：
new Vue({
  ...
  mounted () {
    axios.post('url', {
       参数1: '值',
       参数2: '值'
    })
    .then(function (response) { //处理成功的数据，如json
       ...
    })
    .catch(function (error) {  //处理失败的情况
       ...
    });
  }
})

(3)response响应数据结构：
{
  data: {},          //response.data，数据
  status: 200,       //response.status，HTTP 状态码
  statusText: "OK",  //response.statusText，HTTP 状态信息
  headers: {},       //response.headers，响应头
  config: {}         //response.config，请求提供的配置信息
}

2.并发执行多个请求：
function 函数名1() {
  return axios.get...;
}
function 函数名2() {
  return axios.post...;
}
axios.all([函数名1(), 函数名2()])   //可以有多个函数名
  .then(axios.spread(function (acct, perms) {
    // 两个请求都执行完毕
}));

3.待续：
...