• Vue2 基础一指令

    代码下载

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，官网。

    Vue基本使用

    如何利用Vue将hello world 渲染到页面上
    1、需要提供标签用于填充数据，在标签中使用插值语法的形式 即 {{}} 进行填充数据，插值表达式支持基本的计算操作。

    2、引入vue.js库文件，一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题。

    3、使用vue的语法做功能，使用 new Vue() 创建一个Vue的实例，在构造函数中以对象的形式做一些配置：

    • el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
    • data：模型数据（值是一个对象）

    4、利用Vue将数据渲染到页面上，数据写在data里面。

        
    Hello world!
    
    
    
        
    {{msg}}
    
        
    {{1 + 2}}
    
        
    {{msg + 'a' + 'b'}}
    
    
    

    
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    编译过程（Vue语法→原生语法）

    Vue模板语法

    前端渲染方式：

    • 原生js拼接字符串——（缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。）
    • 使用前端模板引擎——（优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点：没有专门提供事件机制。）
    • 使用vue特有的模板语法

    指令

    指令的本质就是自定义属性，指令的格式：以v-开始（比如：v-cloak）

    v-cloak指令

    插值表达式存在“闪动”的问题，使用v-cloak指令可以解决该问题，原理就是先通过属性选择器隐藏，替换好值之后 v-cloak 属性会被自动去除再显示最终的值。

            
    {{msg}}
    

    • 1
    数据绑定指令

    v-text 指令 填充纯文本:

    • 用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
    • 如果数据中有HTML标签会将html标签一并输出

    注意:此处为单向绑定，数据对象上的值改变，插值会发生变化;但是当插值发生变化并不会影响数据对象的值

    v-html 指令 填充HTML片段：

    • 存在安全问题
    • 本网站内部数据可以使用，来自第三方的数据不可以用
    • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析 后输出

    v-pre 指令 填充原始信息：

    • 显示原始信息，跳过这个元素和它的子元素的编译过程（分析编译过程）
        
    
        
    {{msg1}}
    
        
    
        
    
        
    {{msg1}}
    
    
    
       
     
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    响应式
    • html5中的响应式（屏幕尺寸的变化导致样式的变化）
    • 数据的响应式（数据的变化导致页面内容的变化）

    v-once 只编译一次：

    • 显示内容之后不再具有响应式功能
            
    {{msg1}}
    

    • 1

    mvvm：
    MVVM是前端视图层的概念，主要关注于视图层分离，也就是说MVVM把前端的视图层，分为了三部分 Model, View , ViewModel：

    • m model，数据层 Vue 中 数据层 都放在 data 里面
    • v view 视图，Vue 中 view 即 HTML页面
    • vm (view-model) 控制器 将数据和视图层建立联系，vm 即 Vue 的实例 就是 vm
    双向数据绑定

    v-model指令，限制在 、