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.双向绑定的原理
页面 --> 模型层:其实是给元素添加事件监听来完成

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

数据劫持:拦截数据的变化,常用方案: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}}
        

  1. v-if和v-show


        

div1

        
div2


        


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

你可能感兴趣的:(vue,vue.js)