前端知识点总结 -- VUE

一. Vue中基础知识

1. 指令-插值 : {{ }} 、v-html

插入文本：双花括号
语法：{{ mes }}
作用：将数据绑定到视图

插入HTML: v-html
语法：
作用：输出真正的html

2. 指令-循环指令 : v-for

语法1: 
    
语法2：
    
作用：
    在遍历array集合时，将临时变量保存在 item 、index 中，
    创建多个any标签

3. 指令-选择指令 : v-if、v-else

语法：
     
     
作用：
     根据表达式执行结果的真假，来决定是否将当前元素挂载到DOM树

4. 指令-事件绑定 : v-on

语法：
    
简写：
    
作用：
    给指定的元素 将handleEvent的方法绑定给指定eventName事件

5. 指令-属性绑定 : v-bind

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

动态绑定src: 
    

动态绑定style:
    
动态样式绑定

动态绑定class:
    

    

    

    

6. 指令-双向数据绑定 : v-model

方向1: 数据绑定到视图
方向2：将视图中（表单元素）用户操作的结果绑定到数据 
基本语法：<表单元素 v-model="变量">

二. 组件化

1. 组件的创建

1.全局组件
Vue.component('my-com',{
   template: '
A custom component!
'
})

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

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

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

2. 组件的使用

• 作为普通的标签去使用

3. 注意事项

• 组件的id和使用遵循 a-b-c 命名方式
• 全局组件可以在 id 为#example 的范围内的任何组件直接调用
• 局部组件只能在父模板中直接调用

三. 自定义指令

创建和使用：

// 创建
Vue.directive('change',{
  bind:function(el,bindings){
    // 首次调用
  }，
  insert:function(el){
    // 被绑定元素插入父节点时调用
  },
  update:function(el,bindings){
    // 只要有数据变化都会调用
  }，
  unbind:function(){
    // 解绑时调用
  }
})

// 使用

四. 过滤器

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 中 ：
  

五. 常用属性

1. 计算属性 : computed

• 用于模板中，搞定复杂的业务逻辑，因为有依赖缓存

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

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.发送
    

    2.接收
       到son组件：

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

        // 对象语法，提供校验
        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.绑定
    
    methods:{
      handleEvent:function(mes){
        // mes 就是子组件传过来的100
      }
    }
    2. 触发（子组件）
    this.$emit('customEvent',100);     

3. 在父组件中，得到子组件中的数据、方法 : ref

     1. 指定ref属性
         

     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.使用组件来导航
        
        
        

    3.指定路由出口，路由匹配到的组件在此渲染
        

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

    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: ''
        });

九. axios

Axios中文说明