Vue知识点总结

• 属性绑定: v-bind:props="hello" <=> :props="hello"
• 事件绑定： v-on:click="handleFun" <=> @click="handleFn()" ()括号可省略
• 数组遍历： v-for="(item,index) in List"
• 条件渲染： v-if="true/false" v-else-if="true/false" v-else
• 显示隐藏： v-show="true/false"
• innerHTML： v-html=""
• innerText: v-text="" <=> {{}}
• 隐消{{}}: v-cloak [v-clock]{display: none;}(css) 绑定模型数据在页面渲染时短暂显示{{}}
• 代码文本： v-pre
• 单次绑定： v-once 只绑定一次模型数据、即使数据改变也不会重新渲染
• 双向绑定： v-model:value="" <=> v-model=""
• 样式绑定： :class="{className: true/false}" :style="{'color': 'red'}"
• 插槽绑定： v-slot:a <=> #a 使v-bind的值和v-html的值相等

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

<navigation-link url="/profile">
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

<button type="submit">
  <slot>Submit</slot> //后备内容，默认显示的值
</button>
复制代码

2、指令修饰符（多个修饰符可以同时使用）

• v-on

• • .stop - 调用 event.stopPropagation()，阻止冒泡。
• • .prevent - 调用 event.preventDefault()，取消事件默认动作。
• • .capture - 添加事件侦听器时使用 capture 模式。
• • .self - 事件从侦听器绑定的元素本身触发时才触发回调。
• • .{keyCode | keyAlias} - 特定键触发时回调。
• • .native - 监听组件根元素的原生事件。
• • .once - 只触发一次回调。
• • .left - 当点击鼠标左键时触发。
• • .right - 点击鼠标右键时触发。
• • .middle - 点击鼠标中键时触发。
• • .passive - 以 { passive: true } 模式添加侦听器

• v-bind

• • .prop - 绑定 DOM 属性 (property)。
• • .camel - 将 kebab-case 特性名转换为 camelCase。
• • .sync - 扩展成一个更新父组件绑定值的 v-on 侦听器。

• v-mode

• • .lazy - 取代 input 监听 change 事件。
• • .number - 输入字符串转为有效的数字。
• • .trim - 输入首尾空格过滤

3、生命周期钩子函数

! 不能使用箭头函数来定义一个生命周期方法

• beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。挂载未开始，$el属性目前不可见。
• **beforeMount：**在挂载开始之前被调用：相关的 render 函数首次被调用。
• **mounted：**el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• **beforeUpdate：**数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM。
• **updated：**虚拟 DOM 重新渲染和打补丁之后调用。
• activated： keep-alive 组件激活时调用。
• **deactivated：**keep-alive 组件停用时调用。
• beforeDestroy： 实例销毁之前调用。
• **destroyed：**Vue 实例销毁后调用。
• **errorCaptured：**当捕获一个来自子孙组件的错误时被调用。此钩子可以返回 false 以阻止该错误继续向上传播。

errorCaptured(err: Error, vm: Component, info: string) => ?boolean

4、数据和选项

var vm = new Vue({
    data: {
        return {
            price: 1,
            amount: 5
        };
    },
    props: ['size', 'myMessage']
    computed: {
        getTotal: function () {
            return this.price * this.amount;
        },
        plus:{
            get: function(){
                return this.a * 2;
            },
            set: function(){
                this.a = v + 2;
            }
        }
    },
    methods: {
        fun1: function(){}  
    }
    watch: {
        amount: function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        }
    }
})

//data:
1、组件只接受函数：组件可被用来创建多个实例，否则所有的实例将共享引用同一个数据对象。
2、vm.$data.a = vm.a
3、深拷贝对象： JSON.parse(JSON.stringify(Obj))

//props的对象语法
props: {
    age: {
        type: Number,  //类型检测
        default: 0,    //设置默认值
        required: true, //是否为必填
        validator: function (value) {  //对值进行验证
            return value >= 0
        }
    }
}

//computed: 计算属性的结果会被缓存,依赖的响应式属性变化才会重新计算
复制代码

5、内置的组件

transition
属性：
    name: 自动生成css过度类名, 默认"V"
    appear： 是否在初次渲染时使用 默认false
    css: 是否使用css过度类，默认 true
    type: 指定过渡事件类型， transition和animation
    mode: 控制离开和进入的过渡时间序列，有效的默认有out-in和in-out
    duration: 指定过渡的持续时间
    enter-class:
    leave-class:
    appear-class:
    enter-to-class:
    leave-to-class:
    appear-to-class:
    enter-to-class:
    leave-active-class:
    appear-active-class:
事件：
    before-enter:
    before-leave:
    bafore-appear:
    enter:
    leave:
    appear:
    after-enter:
    after-leave:
    after-appear:
    enter-cancelled:
    leave-cancelled:
    appear-cancelled:

keep-alive:  包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
复制代码

6、Vue编程规则：

• 组件名应该始终是多个单词的；

• 组件的 data 必须是一个函数；

• Prop 定义应该尽量详细。（尽量用对象的形式）

• 为 v-for 设置键值；

• 为组件样式设置作用域 scoped 或 modules；

• 把每个组件单独分成文件；

• 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

• 应用特定样式和约定的基础组件应该全部以一个特定的前缀开头，比如 Base、App 或 V。

• 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

• props: { greetingText: String }

• 组件/实例的选项的顺序： name components directives filters props data computed watch (生命周期钩子函数) methods render renderError

• 元素特性的顺序 is v-for v-if v-else-if v-else v-show v-cloak v-pre v-once id ref key slot v-model v-on v-html v-text

• 如果一组 v-if + v-else 的元素类型相同，最好使用 key;

• 禁止使用元素选择器

Vue-Router

编程式导航：

命名视图

<div>
 <h1>User Settings</h1>
 <NavBar/>
 <router-view/>
 <router-view name="helper"/>
</div>

{
 path: '/settings',
 // 你也可以在顶级路由就配置命名视图
 component: UserSettings,
 children: [{
       path: 'emails',
       component: UserEmailsSubscriptions
     }, {
       path: 'profile',
       components: {
         default: UserProfile,
         helper: UserProfilePreview
     }
 }]
}
复制代码

路由组件传参

const router = new VueRouter({
 routes: [
   { path: '/user/:id', component: User, props: true },
   {
     path: '/user/:id',
     components: { default: User, sidebar: Sidebar },
     props: { default: true, sidebar: false }
   }
 ]
})
复制代码