Visual User Environment基础_html-js-css

Vue

vue是一套前端框架，免除原生JavaScript中的dom *** 作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现书记的双向绑定，将编程的关注点放到数据上

vue快速入门：

新建HTML页面，引入VUE.js文件

在js代码区域，创建vue核心对象，进行数据绑定

编写视图




    
    Title





    
    
    
    {{username}}

插值表达式

插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom *** 作可以直接将数据从模型到视图。

插值表达式就是{{ }}，括号里面可以执行简单的js代码。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。

Vue常用指令：

指令：HTML标签上带有v-前缀的特殊指令，不同的指令具有不同的意义

指令	作用
v-bind	为HTML标签绑定属性值，如设置herf，css样式
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器元素或者对象的属性

v-model上面已经提过，不再过多赘述

v-bind





  点击一下
    
    
     点击一下

v-on(为HTML标签绑定事件)

v-if






    div1
    div2
    div3

    
    

    
    div v-show

v-if和v-show的区别

一、功能区别两个都能实现控制显示和隐藏，但是本质上有巨大的区别：

1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。。

1.2 v-if v-if是真正意义上的“条件渲染”。浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM。

二、vue生命周期区别

v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期，v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了。

三、性能区别 1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期 *** 作的性能。

3、需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if

Visual User Environment基础