vue基础知识(指令,属性,组件,简单的组件通信,vue概念)

传统网页开发的弊端

 - DOM操作频繁，代码繁杂
 - DOM操作与逻辑代码混合，可维护性差
 - 不同功能区域书写在一起，可维护性低
 - 模块之间的依赖关系复杂

Vue.js 核心特性

数据驱动视图

数据驱动视图

   数据变化会自动更新到对应元素中，无需手动操作DOM

     对于输入框等可输入的元素，可设置双向数据绑定

      Vue.js的数据驱动视图，是基于M-V-VM模型实现
          MVVM  是一种软件开发思想
          Model:  代表数据
          View :  代表视图模板
          ViewModel： 代表业务逻辑处理的代码

组件化开发

简单说就是将多个模块中相同的代码封装

Vue开发的优缺点

    优点:基于MVVM 实现的数据驱动视图，
    解放了DOM操作 View 与 Model 分离处理， 降低代码的耦合度 高内聚低耦合

---

什么是耦合？

模块与模块之间很多是存在关联的，如果改动一个，其他若干模块都会发生改变，模块之间的关系越是紧密，独立性就越不好。(这种关系，我们称作： 耦合度)

什么内聚？

模块内部的代码，相互之间的联系越强，内聚就越高,
一个模块应该尽量去独立，独立的去完成一个功能！ 如果有新的代码，非得引入到独立的模块中，建议拆分成多模块。

---

缺点： 双向绑定时，Bug调试难度增大,大型项目中，视图和数据过多，维护成本过高。

常用指令

    v-for 遍历数据或对象

    v-text 文本内容 不解析标签

    v-html 文本内容 解析标签

    v-bind 绑定属性 

   例:v-bind:class="" 简写 :属性名=""

    v-on 绑定事件

   例: v-on:事件名   简写: @事件名=""

    v-modul 双向数据绑定

    v-if 控制元素显示隐藏 直接操纵dom元素 

    v-show 控制元素显示隐藏 操纵css样式

常用属性

    data:数据对象

储存组件的基本数据

data和computed的区别

    1.data属性不会随着赋值属性的改动而改动（赋值属性类似 num：obj.num 直接赋值：num：3333）
2.computed属性属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。

    component:挂载子组件

   components:{子组件的名字 }

    computed:计算属性

官方:对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

具有缓存机制 当多个值影响一个值时推荐使用计算属性

    watch:侦听属性

官方 :Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
当一个值改变时想做一些操作时使用

    filters：过滤器 

对数据进行显示操作 结果需要return 返回
例子: filters:{自定义过滤函数(){return 过滤后的值}}

    methods:组件的方法

例子:methods:{自定义函数名(){}}

---

组件

组件：组件就是可被反复使用的，带有特定功能的视图

.vue文件就是单文件组件

所谓的组件化，把封装的组件进行复用,组件拼接在一起，构成一个复杂的页面应用程。

组件结构就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序

组件的创建
  全局组件
    Vue.component('my-com',{
      template:`
        <h2>我是全局组件</h2>
      `
    })
    局部组件
    new Vue({
        components:{
            'my-footer':{
                template:'<p>我是局部组件</p>'
         }
        }
    })
组件使用
    作为普通的标签去使用
    <my-com></my-com>

组件的嵌套

     Vue.component('my-header',{
    template:`<div></div>`
  });

  <my-header></my-header>

 复合组件(嵌套)：组件中可以调用其他的组件

 注意事项：
  1.想在一个组件中使用另一个组件需要挂载

---

什么是组件通信

简单说就是组件间的传值

---

1、父与子通信 
    1.发送
        <f><--父组件的数据zhangsan
            <son :myName='zhangsan'></son><--子组件通过自定义接受参接受
        </f>
    2.接受到子组件：
        Vue.component('son',{
          props:['myName'],
          template:`
           <p>{{myName}}</p>
          `
        })
    
2、子与父通信 
    1.在子组件内部创建：
        this.$emit(‘customEvent’,100);
    1.在子组件上绑定
        <son @customEvent="handleEvent"></son>
    3.在父中监听事件改变触发
        methods:{
            handleEvent:function(msg){}
        }
    
    
3、ref(引用/参考 外号)
     帮助在父组件中 得到子组件中的数据、方法。
        1.指定ref属性
        <son ref="mySon"></son>
        2.根据ref得到子组件实例
        this.$refs.mySon

4、$parent
    this.$parent得到父组件的实例

5、兄弟组件通信
    1.var bus = new Vue();
    2.接收方
    bus.$on('eventName',function(msg){})
    3.发送方
    bus.$emit('eventName',123);

        2.接受到子组件：
            Vue.component('son',{
              props:['myName'],
              template:`
               <p>{{myName}}</p>
              `
            })