vue 常用命令

### vue命令

+ -g是装到本机电脑的全局配置
+ -save-dve 简写-D开发环境，上线程序运行不需要的使用到的依赖包
+ -save 简写-S生产环境，上线程序需要用到的依赖包，比如一些UI组件
+ npm install webpack webpacl-cli -g    安装webpack
+ npm install vue-cli -g                      安装vue脚手架工具
+ npm install nrm -g                        查看安装镜像
+ nrm ls 查看镜像源        nrm use taobao 切换镜像
+ npm install -g yarn                     npm安装yarn
+ npm install vuex -S                        安装vuex
+ npm install axios -S                        安装axios
+ npm install less less-loader -D            安装less
+ npm install node-sass --save-dev
+ npm install sass-loader --save-dev       安装sass
+ npm install px2rem-loader -s
+ npm install lib-flexible -s                rem适配插件
+ npm install http-server -g
+ http-server      简写hs                项目打包之后运行

### Vue的构造函数属性

+ el           string   id
+ data         object   渲染的数据
+ methods      object   绑定的方法
+ filters      object   自定义的私有过滤器
+ directives   object   自定义的私有指令
+ components   object   自定义的私有组件
+ children     object   子路由挂载
+ watch        object   主要是用来监听路由的变化，也可以监听DOM数据的变化，也可以监听地址栏的变化
+ computed     object   主要目的用于计算属性
+ created      function 这是第二个生命周期函数，表示data 和 methods 都已经被初始化好了！
+ mounted      function 这是第4个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中

### 指令

+ {{}}    渲染指令配合v-cloak可以解决页面闪烁问题
+ v-text  渲染text文本 (没有页面闪烁问题)
+ v-html  可以解析标签 (没有页面闪烁问题)
+ v-bind  属性绑定  简写 :   (只能单向数据绑定)
+ v-model 属性绑定  (双向数据绑定)
+ v-on    事件绑定  简写 @
+ v-show  通过样式操作元素的显示隐藏
+ v-if    通过DOM操作元素的添加删除 对应可以写v-else
+ v-for   循环遍历数据    例：v-for="(item,index) in arr" :key="item.id"

### 事件修饰符

+ stop 阻止事件冒泡
+ prevent 阻止默认行为
+ capture 事件捕获
+ self 只阻止自己的事件
+ once 只阻止一次的默认行为

### 样式绑定

class

+ 普通数组 :class="['red','blue']" red、blue 都是在css里面定义好的
+ 数组三元 :class="['blue',flag?'active':'']" flag 是在data里面定义好的布尔值
+ 数组对象 :class="['blue',{active:flag}]" flag 是在data里面定义好的布尔值
+ 对象方式 :class="{red:true,blue:true}" 对象里面的样式名可以用引号包含 key:value key是样式名 value 是布尔值

style （几乎不用）

+ 对象 :style="{color: red}"
+ 数组 :style="[{color:red},{width:50px}]"

### 自定义修饰符

+ Vue.config.keyCodes.键名=对应的键盘码

### ref 获取DOM和组件

1. ref 两个作用  

+ 获取原生的DOM  
+ 获取子组件的data和methods

1. 如何获取  

+ 在指定的元素上面定义 ref="定义的名字"
+ DOM this.$refs.ref名.innerText
+ 组件 this.$refs.ref名.msg

### computed  （计算属性）

+ 注意1： 计算属性，直接把方法名当做data中的属性使用
+ 注意2： 只要计算属性方法中的function内部，所用到的任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
+ 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用；只要计算属性的方法中任何数据，都没有发生过变化，则不会重新对计算属性求值

### 过滤器

在文本渲染的时候定义  例：{{msg | datafmt('haha','xixi')}}

1. 全局过滤器

+ Vue.filter('datafmt',(data,arg1,arg2)=>{
    // data  第一个参数一定是要过滤的数据  其他的都是实参对应的形参
    // 必须要有return 不然返回undefined
    return
  }))

1. 私有过滤器

+ 在Vue实例中定义filters: { datafmt(data,arg1,arg2){ return } }

### 自定义指令

在文本中设置指令的名称，设置时需要前缀v-  例：v-color="'red'" 可以不要参数 v-color

1. 全局自定义指令

+ Vue.directive('color',{
    // el 是绑定的指令的元素的原生DOM
    // binding 是一个对象 可以获取到 指令的值 value 、expression
    bind(el,binding){
      // 一般用于操作css样式 ，在内存中使用
      el.style.color=binding.value
    },
    inserted(el,binding){
      // 一般用于操作DOM， 在DOM加载完毕的时候可以执行一些js
    },
    updated(el,binding){
      // 多次的更新操作  VNode
    }
})

1. 私有自定义指令

+ directives: { color(el,binding){  } }

### 组件之间的传值

1. 父组件传子组件 

+ 在子组件上绑定事件 例：<home :inputName="name"></home>  name是data中定义的数据

2. 子组件传父组件

+ 在子组件上绑定一个方法 例：<home @childByValue="childByValue"></home>

+ 父组件定义方法 childByValue (name) { console.log(logchildValue);}

+ 在子组件中调用父组件定义的方法 例：this.$emit('childByValue', this.childValue)

+ 也可以通过this.$parent.childByValue()调用父组件方法

+ <home ：childByValue="childByValue"></home>  直接调用 this.fatherMethod();

3. 兄弟组件传值

+ 兄弟组件没有直接的联系，所以先定义一个中间层的js文件
  import Vue from 'vue'  
  export default new Vue()

+ 在传值的页面引入中间层js文件
  例：import Help from './Help.js'
      Help.$emit('val', this.elementValue)   this.elementValue是定义在data中的数据

+ 在接受的页面引入中间层js文件
  例：import Help from './Help.js'
      Help.$on('val', (data) => {console.log(data)})