基础

options vue object——new Vue({})

• el： dom元素对象
  • "#DomObj"
  • document.querySelector('#DomObj') //更为优化，避免了vue判断查询
• data：数据
  • data:{key:"数据"} //可选
  • data:function(){return{key:"数据"}} //可选
• methods // 在 methods 对象中定义方法
• components:{} //声明局部组件 components:{'templateName':template}
• template： //模板或调用组件 {'templateName':template}
• watch //监控数据,主要监控值的变化
  • 深度监控,主要监控引用类型，对象，数组等
    • obj:{deep:true,handler:function(a){console.log(a.data)}}
• cumputed 监事多个数据

指令

• v-text //innertext

• v-html //innerHtml

• v-model //双向绑定（一般用在input[text] ）

• • v-bind 给元素的属性赋值 (单向绑定)
    • v-bind:'atrr="value"
    • 简写 :atrr="value"

• if-else 判断,以下三个指令必须是相邻的DOM，（删除DOM元素）

  • v-if
  • v-else-if
  • v-else

• v-show (隐藏DOM元素)

• v-on 给元素添加事件

  • v-on:click='on'
  • 简写 @click='on'

• v-for

  • 数组(item,index) in item
  • 对象(key,value,index) in items

组件 component

• 父组件通过 props 向下传递数据给子组件
  • props的值可以是数组或是对象
  • 如果是数组则是声明属性，如props:['属性1','属性2']
  • 如果是对象则可以写默认值，如porps:{属性1:{},属性2:{type:String,default:'默认值'}}
    • validator 属性检查器（给属性添加可选值）
  • 注意的是如果porps声明的属性是有大写的，dom节点则需要使用-表示，如helloWorld则需要dom标签的属性则需要写成hello-world
• 子组件通过 events 给父组件发送消息

全局组件

Vue.component('componentName',templateName)

插槽slot

vue提供的内置组件用于占位给子组件传递DOM给父组件

具名插槽slot

如果父组件有多个插槽可以用名字分类 调用的时候就

过滤器（管道）

Vue.filter('dataReverse',(data)=>{
    return data.split('').reverse().join('')
})

生命周期(事件函数)

组件加载触发

• beforeCreate——组件加载完成前触发
• created————组件加载完成触发
  • 应用场景：触发ajax请求

页面加载触发

• beforeMount——页面加载前触发
• mounted————页面加载完成后触发(到这里后的是Vue完成组装好的DOM)
  • 如果存在异步加载组件可以使用this.$nextTick(function () { })

页面数组更改时触发

• beforeUpdate——页面数据发生更改前触发
• updated————页面数据发生更改后触发

组件销毁的时候触发（如：v-if）

• beforeDestroy——销毁前

• destroyed————销毁后

• 创建前 / 后（beforeCreate / created）：在 beforeCreate 阶段，Vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，Vue 实例的数据对象 data 有了，el 还没有。

• 载入前 / 后（beforeMount / mounted）：在 beforeMount 阶段，Vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 DOM 节点，data 尚未替换。在 mounted 阶段，Vue 实例挂载完成，data 成功渲染。

• 更新前 / 后（beforeUpdate / updated）：当 data 变化时，会触发 beforeUpdate 和 updated 方法。这两个不常用，且不推荐使用。

• 销毁前 / 后（beforeDestroy / destroyed）：beforeDestroy 是在 Vue 实例销毁前触发，一般在这里要通过 removeEventListener 解除手动绑定的事件。实例销毁后，触发 destroyed。

路由 (opens new window)

使用路由5步骤

0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)用于创建router-view和router-link组件
1. 定义 (路由) 组件:{template:'
   123
   '}
2. 定义路由配置:{ path: '/foo', component: { template: '
   foo
   ' } }
3. 创建 router 实例，然后传路由配置

new VueRouter({routes // (缩写) 相当于 routes: routes})
注意 new VueRouter({routes:[path:'/xxx',component:xxx]}) 建名字一定是routes.

4. 创建和挂载根实例。记得要通过 router 实例参数注入路由

全局路由和渲染前事件（全局路由守卫）

router.beforeEach可以做路由的权限转跳

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    console.log(to) //即将要进入的目标 路由对象
    console.log(from) //当前导航正要离开的路由
    next // 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
})

全局配置

// 对writd-开头的标签不会报未注册组件的错误
Vue.config.ignoredElements = [
  /^wired-/
]

全局API

• Vue.extend
• Vue.directive
• Vue.filter

实例属性

• vm.$data (opens new window)
• vm.$props (opens new window) 获取props对象属性
• vm.$el (opens new window) 获取当前组件的对象属性
• vm.$options (opens new window)
• vm.$parent (opens new window)
• vm.$root (opens new window)
• vm.$children (opens new window)
• vm.$slots (opens new window) 获取插槽对象属性
• vm.$scopedSlots (opens new window)
• vm.$refs (opens new window) 获取带ref标识的对象属性
• vm.$isServer (opens new window)
• vm.$attrs (opens new window)
• vm.$listeners (opens new window)

computed、watch、methods的区别

• 理论上computed能做的watch也能做，watch能做的computed也能做，只是应用场景不同。
• computed是watch、methods综合的优化版，只有渲染的变量变了才回执行。

watch——监听 computed——计算 methods——方法

VUE动画

• css
  • transition

vue-cli3

• 安装 npm install -g @vue/cli
• 查看版本 vue --version
• 创建项目 vue create hello-world
  • window下交互提示符不起作用则需要使用 winpty vue.cmd create hello-world
• 安装插件（从npm上安装并调用他的生成器）
  • vue add @vue/eslint
  • vue add router
  • vue add vuex

坑

vue中要修改按引用传值的类型要用this.$set()，这样数据和视图才能同时刷新 其中对象修改已存在的key的属性值可以不用set函数

我在组件里面用watch监控了data，但是在组件外面用v－if之后监控就失效了

如果一个组件内部监控watch了异步请求的props，外面加了v-if的话，组件内部的watch不会触发。

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  props:["data"],
  watch:{
      data:{
          handler(val){
              console.log(val)
          },
          deep:true
      }
  }
};
</script>

<style>
</style>

<template>
  <div>
    <cp v-if="isVisibel" :data="arr"></cp>
  </div>
</template>

<script>
import cp from "./cp.vue";
export default {
  components: { cp },
  data() {
    return {
      arr: {},
      isVisibel: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.isVisibel = true;//当v-if等于true的时候，组件内部还没渲染到watch就得到了this.obj的值，所以不会触发组件内部的watch。
        this.$set(this.arr, "a", "aaa");//因此要给这行套上$nextTick等组件渲染完成了，watch才会触发。
    }, 300);
  },
};
</script>