vue全家桶:（vue-cli, vue-router, axios, vuex）

#双向绑定原理 1.vue的数据双向绑定,采用es5提出来的一个语法实现的

Object.defineProperty()

2.Object.defineProperty()是一个无法shim的(兼容)ie8以下不兼容

3.作用:添加/修改对象的属性

let obj={}let temp;//以前://obj.name='zs'//console.log(obj.name)//现在:底层//参数1:对象,给那个对象添加属性//参数2:属性名,添加属性,添加什么属性 字符串//参数3:属性描述符set/get//赋值 取值Object.defineProperty(obj,'name',{    //赋值调用set    set(newVal){        console.log('调用了set:'newVal);        temp=newVal    },    //取值调用get    get(){        console.log('调用了get');        return temp    }})复制代码

常用指令

v-model:双向绑定

v-text:展示纯文本内容

v-html:展示含有标签的文本

v-bind:动态绑定一个数据,v-bind:title缩写(语法糖) :title

v-on:注册/绑定事件绑定事件v-on:click='fn' 缩写(语法糖) @click = 'fn'

v-for:遍历数组

v-show 和 v-if v-else v-else-if 都是来进行切换显示和隐藏

不常用

v-once:之渲染一次,数据再变都不渲染

v-pre:不解析

v-cloak:遮罩

v-for时添加 :key='index'(默认) '就地复用'

按键修饰符:@keyup.enter/up/down...

事件修饰符:@click.prevent = 阻止默认行为

this.$nextTick(()=>{    console.log(document.querySelector('h1').innerText)})//DOM更新完毕后会自动调用里面的回调复制代码

监听

//监听简单类型/值类型watch:{    num(newVal,oldVal){        console.log(newVal,oldVal)    }}//监听复杂类型/引用类型watch:{    obj:{        deep:true,//深度监听        handler(newVal){                    }    }}复制代码

过滤器

{
   {date|dateFilter(自定义过滤器名)}}Vue.filter('dateFilter', ( res ) => {            return `${res.getFullYear()}-${res.getMonth()+1} - ${res.getDate()}`     })复制代码

局部过滤器

模板字符串放入vue实例中

const vm = new Vue({      el: '#app',      data: {        date : new Date()       },       // 局部过滤器 私有过滤器       filters : {         dateFilter(res){            return moment(res).format('YYYY-MM-DD')         }       }    })复制代码

反引号`` 模板字符串中放入变量 ${变量名}

生命周期

第一个大阶段:挂载阶段(进入页面阶段)

数据响应阶段 beforeCreate created

找模板先找template模板,没有再找el模板

渲染DOM beforeMounte mounted

第二个大阶段:数据更新阶段 beforeUpdate updated

第三个大阶段:销毁阶段(卸载阶段) beforeDestory destoryed

组件的基本使用

注意点1

注册组件一定要在实例vue之前

component 是一个单数

只能由一个根节点

组件里的配置项和vue实例里面的配置项几乎是一样的

组件里的data 是一个方法,不是一个对象

为什么组件data是方法,而不是对象?

组件是一个可复用的实例,组件是拿来复用的,但是,组件内的数据,不可以共享(复用)

组件通讯

父传子

1.通过自定义属性,父组件将数据传递给子组件

2.子组件通过props配置项,指定一下要接收的数据

子传父

1.在父组件中准备一个方法

2.通过自定义事件,父组件将方法传递给子组件

3.子组件(在created中)调用(触发)这个方法this.$emit()

非父子

1.实例化事件总线(event bus) 事件总线其实就是一个空的vue实例

2.发送数据=>触发事件

3.接收数据=>注册事件

$refs

给要获取的元素或者组件,注册一个ref ref='a'

通过this.$refs 获取this.$refs.a

$refs 是一个对象,它里面都是一些注册过ref的元素(标签/组件)

vuex

1.安装:npm i vue vuex 2.vue vuex都要引入

```3.实例化```const store = new Vuex.Store({    strict:true,    //状态:数据 相当于data    state:{        num:10    },    //相当于methods    mutations:{        updateNum(state){            state.num=400        }    },    //相当于computed    getters:{            },    //异步    actions:{            }})//1.获取数据:store.state.num//2.修改数据:store.commit('updateNum',{    val:200})//异步触发:dispatch=>分发=>actions```复制代码