VUE [入门篇]

目录

VUE简介

        Vue优点

        两个核心点

        虚拟DOM

        MVVM

        声明式渲染 

Vue入门 

        1.1入门示例

                1. 安装

                 2. helloworld

        1.2  内部指令

        1、 v-if 、v-else、v-else-if、v-show

        2、v-for

        3、v-text 、v-html

        4、v-on

        5、v-model

        6、v-bind

        7、v-pre、v-cloak、v-once

---

VUE简介

渐进式框架

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

渐进式: 构建项目可以由简单到复杂

Vue优点

1.体积小 压缩后的文件只有33k
2.运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3.双向数据绑定 让开发者不再去操作DOM,将更多的经历投入到业务中
4.生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定.

两个核心点

（1）响应式数据绑定
当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
（2）组合的视图组件
即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM

1).字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制

2).当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定 绑定到页面中

声明式渲染 

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
额外补充：
渲染分为：命令式渲染和声明式渲染
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染 ：只需要告诉程序想要什么效果，其他的交给程序来做
具体区别看如下代码，执行结果一样，实现方式不同。

1.Vue入门 

1.1入门示例

1. 安装

(1) CDN引入

(2) NPM安装

npm install vue

2. helloworld

    
    
    
    


    
    

        
        {{message}}
    

    
    

1.2  内部指令

1、 v-if 、v-else、v-else-if、v-show

这几个条件指令用于显示与隐藏各类元素，使用方式如下：

	
		
		
	
	
		

			
根据根据分数评级
			
			
优秀
			
良好
			
中等
			
不及格
			
			
			
测试show数据
			展现
		
		
		
		
	

 

 v-if与v-show的区别

• v-if： 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
• v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。

2、v-for

(1) 基本用法

    
    
    




    

        

            {{item}}
        
    

 (2) 对象遍历

参数: 第一个为值,第二个为键名,第三个为索引

    
    
    




    

        

            {{ index }}. {{ key }} - {{ value }}
        
    

 

3、v-text 、v-html

（1）v-text

{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}} (插值闪烁)，Vue提供的v-text可以解决这个问题

作用: 直接展现解析数据

    
    
    




    {{ message }}

（2）v-html

用于解析html的数据

4、v-on

（1）常规用法

    
    
    




本场比赛得分: {{count}}
    加分

 

 （2）缩写

加分

5、v-model

用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.

以下的model都需要在data中声明初始值

data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }

（1）input

（2）textarea

 （3）checkbox

有效

无效
状态：{{status}}

（4）radio

男

女
性别：{{sex}}

（5）select

    请选择
    A
    B
    C

Selected: {{ selected }}

完整代码如下:

    
    
    




    
    


    
    


    
    有效
    
    无效
    
状态:{{status}}
    


    
    男
    
    女
    
性别:{{sex}}
    


    
        请选择
        A
        B
        C
    
    
Selected {{ selected }}
    

6、v-bind

用于处理html标签的动态属性，即动态赋值。

(1) 常规用法

 (2) 缩写

7、v-pre、v-cloak、v-once

（1）v-pre

        用法:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

    
    
    


    

        
{{ message }}
    


    

（2）v-cloak

介绍:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    
    
    







    
{{message}}

（3）v-once

用法:
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    
    
    



    {{message}}