han-y
han-y

vue学习

一、什么是Vue.js 

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

    

二、Vue的好处 

    灵活，方便，简单，轻量，渐进式框架(方便项目增量开发，可以使用一部分组件或库，也可以全部使用)， VUE不支持IE8及以下版本，因为Vue使用了 IE8 无法模拟 ECMAScript5 特性

 

三、Vue的使用

   ① 在html页面使用script引入vue.js的库即可使用。

   ② 使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。大型应用推荐此方案。

   ③ Vue-CLI脚手架，使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

 

四、Vue.js有哪些功能

   官网介绍: https://cn.vuejs.org/v2/guide/index.html

   ① 声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

    比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。

 

   ② 条件与循环

    dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。

 

   ③ 双向数据绑定

    Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素

    中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

 

   ④ 处理用户输入

    为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在

    Vue 实例中定义的方法

 

   ⑤ 组件化应用构建

    vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

 

 

五、MVVM模式

    ✪ vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

    ✪ MVVM拆分解释为： Model:负责数据存储 View:负责页面展示 View Model:负责业务逻辑处理（比如Ajax请求等）

    ✪ MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单

    ✪ 用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM模式是如何来解决这个缺点的

     vue学习_第1张图片

   MVVM案例：




    
    MVVM案例
    


    
    

         {{name}}

 

六、双向数据绑定 

   ① 由模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变

   ② 由Dom对象绑定到模型数据，Dom对象的值改变，模型数据就改变

   双向数据绑定实现加法运算案例：




    
    双向数据绑定
    




    
    
    +
    
    = {{Number.parseInt(num1) + Number.parseInt(num2)}}
    

    
    
    +
    
    =

 

  v-model  仅能在 input、select、textarea、components(Vue中的组件)

      {{}}       插值表达式不需要标签就可以使用，会引发网速慢闪烁问题

    v-text    需要标签才能使用，不会引发闪烁问题

 

七、事件绑定 

   ①  v-on事件绑定，简写@，$event 当前对象   

   事件绑定实现加法运算案例：




    
    绑定事件
    




    
    
    +
    
    =

 

八、Class与Style绑定

   ① v‐bind可以将数据对象绑定在dom的任意属性中。

   ② v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class

   ③ v‐bind 可以简写:，

   ④ 他只能做单向绑定，模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变




    
    Class与Style绑定
    




    百度
    
    
123

 

九、条件控制语句

v-if

   ① v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

   ② 在