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

    
    
    
    


    
    

        hello Vue!
    

    
    

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）常规用法

    
    
    




本场比赛得分: 1
    加分

（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}}

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦