vue学习-基础，事件和数据交互

vue数据双向绑定(v-model)原理？

Object.defineProperty(obj,prop,{
   configurable:true,//是否可配置
  enumerable:true,//是否可出现在对象的枚举中
  value：" ", //属性prop是值
  writable: true, //属性值是否可改变
    get:()=>{},
    set:()=>{}
})
Object.defineProperty 返回对象

vue指令

• v-text === {{}}

{{}} 页面会显示变量（bug） 跟网速有关

解决方案：[v-clock]{display:none}

• v-once 只执行一次
• v-html 把html字符串当成HTML渲染

插槽 （slot）

作用：定制模板
slot的name属性默认是 default
在元素标签中 <div slot="content"></div>
插槽slot中  <slot name="content"></slot>

父组件调用子组件方法

  借用ref实现

  <div id="app">
    <loading ref="load"></loading>
</div>
let loading ={
    template:'<p v-show="flag">数据加载中......</p>',
    data(){
        return {
            flag:true,
        }
      },
   methods{
     hide(){
        this.flag = false
      }   
   }
}
let vm = new Vue({
  el:'app',
  mounted(){
    this.$refs.load.hide();
  },
  components:{
    loading
  }
})

父子组件传参

父组件： 
    this.$root.emit("eventName",data),
子组件:
     this.$root.on("eventName",(data)=>{
        console.log(data)
    })

keep-alive

   一般用于缓存

nextTick

防止子组件修改数据后，父组件取不到准确的值，在父组件中取值步骤最外层添加一些方法：

  this.$nextTick(()=>{
      // 取子元素修改后的数据代码块
  })

修改默认样式类名

new VueRouter({
    ......
    //以a标签样式为例
    linkActiveClass:'active'
})

监控路径参数变化使用watch

路由有两方法 
    $router 用来存储方法（.push()、.go()、.back()......）
    $route 用来存储属性 (.params....)
    watch:{
      $route(){
          ......
      }
  }

transition

动画transition 部分属性，需要使用animate动画库
      mode 动画模式(in-out、out-in.....)
      enter-active-class 进入样式(animated  进入样式)
      leave-active-class 出去样式(animated 出去样式)

模块

node模块的规范 common.js
cmd ==> sea.js
amd ==> require.js
babel-core babel-loader babel-preset-es2015 //把es6 转换成 es5语法
babel-preset-stage-0 //把es7 转换成es5语法
css-loader  //把css文件解析成模块
style-loader //把模块插入到style标签中  

less、sass样式预编译

less/sass-loader  less/sass  css-loader  style-loader

图片解析

  file-loader  url-loader

webpack

var path = require('path');
module.exports = {
  entry: {
    //app: './src/main.js'
    /* 为了解决IE兼容问题*/
    app: ["babel-polyfill", "./src/main.js"]
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js'
  },
module: {
    rules: [

  ]
}

钩子函数（生命周期 3346068135-580822cd52898_articlex.png

）