前端知识点总结 -- VUE

一. Vue中基础知识
1. 指令-插值 : {{ }} 、v-html
插入文本：双花括号
语法：<any>{{ mes }}</ant>
作用：将数据绑定到视图

插入HTML: v-html
语法：<any v-html="rawHtml"></any>
作用：输出真正的html

2. 指令-循环指令 : v-for
语法1: 
    <any v-for="item in array"></any>
语法2：
    <any v-for="(item,index) in array"></any>
作用：
    在遍历array集合时，将临时变量保存在 item 、index 中，
    创建多个any标签

3. 指令-选择指令 : v-if、v-else
语法：<any v-if="表达式"></any>
     <any v-else-if="表达式"></any>
     <any v-else="表达式"></any>
作用：
     根据表达式执行结果的真假，来决定是否将当前元素挂载到DOM树

4. 指令-事件绑定 : v-on
语法：
    <any v-on:eventName="handleEvent"></any>
简写：
    <any @:eventName="handleEvent"></any>
作用：
    给指定的元素 将handleEvent的方法绑定给指定eventName事件

5. 指令-属性绑定 : v-bind
语法：
    any v-bind:myProp="表达式"></any>
简写：
    <any :myProp="表达式"></any>
作用：
    将表达式执行的结果 绑定 到当前元素的myProp属性

动态绑定src: 
    <img v-bind:src="'img/'+myImg" alt="">

动态绑定style:
    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

动态绑定class:
    <div :class="{ active: isActive }"></div>
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
    <div v-bind:class="[isActive ? activeClass : '', errorClass]">
    <div v-bind:class="[{ active: isActive }, errorClass]">

6. 指令-双向数据绑定 : v-model
方向1: 数据绑定到视图
方向2：将视图中（表单元素）用户操作的结果绑定到数据 
基本语法：<表单元素 v-model="变量"></表单元素>
1
2
3
二. 组件化
1. 组件的创建
1.全局组件
Vue.component('my-com',{
   template: '<div>A custom component!</div>'
})

2.局部组件
var Child = {
  template: '<div>A custom component!</div>'
}   

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

3.直接在template属性中指定模板中内容
 // 创建实例
 new Vue({
    // ...
    components:{
        'my-component':myComponent
    }
 })
 // 定义模板对象
 var myComponent={
    template:`<span>{{mes}}<span>`,
    data () {
      return {
        mes: "chenzhijie"
      }
    },
    methods:{}
 }

2. 组件的使用
作为普通的标签去使用 <my-com></my-com>
3. 注意事项
组件的id和使用遵循 a-b-c 命名方式
全局组件可以在 id 为#example 的范围内的任何组件直接调用
局部组件只能在父模板中直接调用
三. 自定义指令
创建和使用：
// 创建
Vue.directive('change',{
  bind:function(el,bindings){
    // 首次调用
  }，
  insert:function(el){
    // 被绑定元素插入父节点时调用
  },
  update:function(el,bindings){
    // 只要有数据变化都会调用
  }，
  unbind:function(){
    // 解绑时调用
  }
})

// 使用
<any v-change="count"></any>

四. 过滤器
1. 创建过滤器：
// 1. 全局过滤器（在创建Vue实例之前定义）
Vue.filter('myFilter',function(myInput){
    // myInput是在调用过滤器时，管道前表达式执行的结果
    // 针对myInput，按照业务需求做处理
    // 返回
    return '处理后的结果'
})
new Vue({
 ...
})

// 2. 局部过滤器 （在组件的选项中定义）
filters: {
  myFilter: function(myInput){
     return '处理后的结果'
  }
}

2. 使用过滤器:
在双花括号 {{}} 中： 
{{ message | myFilter}}

过滤器可以串联： 
{{ message | filterA | filterB }}

接收参数： 
{{ message | filterA('arg1', arg2) }}

在 v-bind 中 ： 
<div v-bind:id="rawId | myFilter"></div>

五. 常用属性
1. 计算属性 : computed
用于模板中，搞定复杂的业务逻辑，因为有依赖缓存

   // 指定计算属性
   computed : {
     myHandle : function () {
       return 数据
     }
   } 

  //  调用
  <any>{{myHandle}}</any>

2. 侦听器 : watch
表单元素的双向数据绑定

    // 监听
    watch : {
      //  如果  myValue  发生改变，这个函数就会运行
      myValue : function (newValue,oldValue) {
          ...
      }
    }

六. 生命周期
四个阶段 ( 8个钩子 )
create ：准备工作（数据的初始化…），beforeCreate / created
mount ：挂载前后针对元素进行操作，beforeMount / mounted
update ：数据发生变化，beforeUpdate / updated
destroy ：清理工作(关闭定时器、集合清空..)，beforeDestroy/ destroyed
七. 组件间通信
1. 父与子通信 （props , down）：
    1.发送
    <son myName="chenzhijie"></son>

    2.接收
       到son组件：

        //  简单语法 数组 
        Vue.component('child', {
             // 声明 props
             props: ['message'],
             // 就像 data 一样，prop 也可以在模板中使用
             // 同样也可以在 vm 实例中通过 this.message 来使用
             template: '<span>{{ message }}</span>'
        })  

        // 对象语法，提供校验
        Vue.component('child', {
          props: {
            // 检测类型
            height: Number,
            // 检测类型 + 其他验证
            age: {
              type: Number,
              default: 0,
              required: true,
              validator: function (value) {
                return value >= 0
              },
              // 检测类型 + default (对象)
              desc:{
                type:Object,
                default(){
                    return {
                        all:'全部',
                        positive:'满意',
                        negative:'不满意'
                    }
                }
              }
            }
          }

2. 子与父通信 （events , up）：
    1.绑定
    <son @customEvent="handleEvent"></son>
    methods:{
      handleEvent:function(mes){
        // mes 就是子组件传过来的100
      }
    }
    2. 触发（子组件）
    this.$emit('customEvent',100);     
3. 在父组件中，得到子组件中的数据、方法 : ref
     1. 指定ref属性
         <son ref="mySon"></son>

     2. 根据ref得到子组件实例
         this.$refs.mySon
4. 得到父组件实例 ：this.$parent
5. 兄弟组件通信 ：
    1 var bus = new Vue();

    2.发送方
    bus.$emit('eventName',123);

    3.接收方
    bus.$on('eventName',function(msg){})

八. 路由模块
1. SPA的基本概念和工作原理
SPA：single page application 单一页面应用程序，只有一个完整的页面； 
它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 
比如 webApp

工作原理
解析地址栏
根据路由地址，找到要加载的页面
发起ajax请求
向指定的容器中插入加载来的页面
2. 基本用法
    1.引入vue-router

    2.使用<router-link>组件来导航
        <router-link to="/a"></router-link>
        <router-link to="/b"></router-link>
        <router-link to="/c"></router-link>

    3.指定路由出口，路由匹配到的组件在此渲染
        <router-view></router-view>

    4.定义路由组件 
        // 可以从其他文件import
        const a = { template: '<div>a</div>' }
        const b = { template: '<div>b</div>' }
        const c = { template: '<div>c</div>' }

    5.定义路由
        const routes = [
          { path: '/a', component: a },
          { path: '/b', component: b },
          { path: '/c', component: c }

    6.创建 router 实例，然后传 `routes` 配置
        // 还可以传别的配置参数,
        const router = new VueRouter({
              linkActiveClass:'active',
              routes // （缩写）相当于 routes: routes
        })
    4.创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        new Vue({
          el: '#app',
          router,
          components: { App },
          template: '<App/>'
        });

九. axios
Axios中文说明
 ———————————————— 
版权声明：本文为CSDN博主「微笑感染唇角的无奈」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chenzhijie101/article/details/79833313