vue 学习总结 （一）

一、项目搭建

npm i vue-cli -g  //安装vue-cli
vue init webpack demo  //初始化项目

linux使用vue需要创建软连接

sudo ln -s /home/chenying/Downloads/node-v12.16.2-linux-x64/bin/vue  /usr/local/bin

二、模板语法

{{ }}双大括号插值

v-if(元素不渲染，类似注释)

v-show(就是display:none，切换频繁时用比较好)

v-on(事件绑定)  v-html (xss攻击)  v-bind(缩写：)   v-for(for-in for-of)

v-once(只会插入值一次，当数据发生改变时，页面不会刷新)  

三、计算属性(computed)和侦听(watch)和方法(methods)的区别

1.计算属性

   初衷：避免模板{{}}中放过多、过于复杂，过重的东西

   在computed中定义，若依赖于data中的变量，当data中的变量发生改变时，其也会改变

2.计算属性和方法的区别

    计算属性是响应式的依赖缓存，只有依赖发生改变时才会重新求值，只要不是依赖改变，多次访问不会重新计算，直接返回缓存值，方法是每次访问都会重新计算求值

3.何时用侦听属性

    需要处理异步或较大开销操作

四、事件修饰符、按键修饰符、表单修饰符

• .stop：阻止事件冒泡
• .prevent：提交事件不再重载页面(阻止默认事件) 
• .capture：即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .self：只当在 event.target 是当前元素自身时触发处理函数
• .once：点击事件只会触发一次
• .passive

v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。    

<input v-on:keyup.enter="submit">  

.enter .tab .page-down . delete .esc .space .up .down .left .right   

.lazy .number .trim

五、组件通信

参考博客

1.父传子

    a.props(单向数据流)

    b.中央事件总线

    c.vuex

    d.子组件通过$parent拿到父组件实例

2.子传父

    a.父组件将修改自身的方法传给子组件，子组件通过this.$emit触发,也可传值vuex

    b.中央事件总线

    c.vuex

    d.refs:父组件通过refs可以拿到子组件的实例

    f:父组件通过$children拿到子组件实例，是个数组

refs:无法跨级或兄弟组件通信

六、插槽（slot）

向子组件传递html内容，类似于angular的锚点

v-slot 只能添加在 <template> 上

<template>
    <div>
        {{msg}}
        <p>{{type}}</p>
        <slot></slot>
    </div>
</template>

is属性动态渲染组件或HTML，is属性的值得是data、computed、methods里的值，不能直接写组件名

<component v-bind:is="currentTabComponent" class="tab"></component>

七、全局注册和局部注册

全局注册是通过new vue（Vue.component）

局部注册，先创建组件对象，然后在需要用的组件的components中声明后使用

let component2={
  data:function(){
    return {
      data1:"局部组件"
    }
  },
  template:`<div>{{data1}}</div>`
}
export default {
  name: 'HelloWorld',
  components:{Template1,component2},
}

八、props(单向数据流)

九、中央事件总线

中央事件总线eventBus，创建一个空实例，通过空实例作为桥梁实现非父组件通信

  var Event=new Vue();
  Event.$emit(事件名,数据);
  Event.$on(事件名,data => {});

十、provide/inject跨级组件通信

跨级组件通信：provide/inject  依赖注入，可跨级、父子组件通信，但不是响应式的

改响应式方法：

    1.注入实例，子组件直接从实例中取

  provide(){
    return{
      prod1:this
    }
  },

2.加监听

十一、$attrs与$listeners 

$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，可以通过 v-bind="$attrs" 传入内部组件，$listeners里存放的是父组件中绑定的非原生事件(例如input，focus)，可以通过 v-on="$listeners" 传入内部组件，

是响应式的