vueJs01

接下主要知识点：
1.Vue、webpack、vue项目
2.React、React项目、React-native
3.Angular
4.微信小程序
5.Git PS

1.Vue 在前端三大框架中使最简单的
Vue的使用群体：国内有不少公司会选用的vue。用来快速的构建单页面应用，开发中小型的项目。
React：facebook，重量级的，学习成本也会比vue要大。开发大型项目，首选react。
Angular：Goggle，也有一定学习成本

为什么要学框架：1.提高开发效率 2.提高程序的性能

1.框架和库区别：
1.框架：提供一整套解决方案，对于项目的倾入性非常大，如果项目要切换框架，往往要重构整个项目。
2.库：类似于一个小插件，提供了某些特定功能，对项目的倾入性非常小。比如我们从jQuery切换到Zepto，往往代码都不需要怎么修改。

2.Vue和核心思想
数据驱动
组件化
Vuex

3.MVC和MVVM
Vue是一个MVVM的框架
MVC ： M指定的是模型层(提供数据)
V指的是视图层(页面)
C指的是控制层(业务逻辑)

MVC模式缺点：
1.M层和V层直接通信，造成M和V的耦合度高，数据流式双向的
2.业务逻辑都写在了控制器层，造成控制器层代码量特别大

MVVM : M 指的是模型层(提供数据)
V指的是视图层(页面)
ViewModel 是同步View和Model的对象

MVVM 模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。angular 和vue都采用这种模式。

一个好程序的代码 高内聚，低耦合的代码 ： 耦合类和类之间的关联程序，如果我们以后写代码一个地方修改了，结果发现一堆地方报错了，说明我们代码是高耦合的。如果代码之间的耦合度越高，说明代码的维护越困难。

4.插值表达式

       app1: 

{{msg}}

       

{{number+1}}

       

{{‘hello world’}}

       

{{true?“OK”:“NO”}}

       

{{‘hello world’.split("").reverse().join("")}}

4常用指令
4.1 v-cloak插值表达式的闪烁问题

++++++++++++++++++++{{msg}}---------------------

/在使用v-cloak指令的时候，我们需要额外写下面的样式来解决插值表达式的闪烁问题/
[v-cloak] {
      display: none;
}

4.2 v-text v-html v-bind v-on

p文本内容

p文本内容

p文本内容

        

//注意：上面三个方法都应该写在VM实例中的methods中

6.事件修饰符

7.v-model
在vue中，只有v-model是双向数据绑定的，v-model指令往往用在表单元素中 ：input(radio, text, address, email…) select checkbox textarea

8.双向绑定的原理
页面 --> 模型层：其实是给元素添加事件监听来完成
<input type=“text” :value=“num1” @input=“inputChange($event)”>

模型层 --> 页面 ：通过数据劫持+发布订阅模式来实现的

数据劫持：拦截数据的变化，常用方案：Object.defineProperty(Vue 2.0) Proxy(Vue 3.0)
设计模式：单例模式、工厂模式、代理模式、观察者模式、适配器模式

9.v-for

        

• 
              
• {{item}}
• 
          

        

• 
              
• {{idx}}—>{{item.id}}—>{{item.name}}
• 
          

        
            {{value}}–>{{key}}–>{{idx}}
        

        

这是第 {{ count }} 次循环

        
        

             {{item.id}}---->{{item.name}}
        

10. v-if和v-show

        

div1

        

div2

        

            {{item.name}}–>{{item.completed}}