Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）

条件语句

条件判断

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件语句</title>
</head>
<body><div class="app"><div v-if="isStatus"><h2>你好</h2><h2>啊</h2><h2>世界</h2></div><div v-else="isStatus"><h2>我很好</h2><h2>谢谢</h2><h2>嘞</h2></div><button @click='change()' style="cursor: pointer;">切换</button></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {isStatus : true},methods : {change(){this.isStatus = !this.isStatus}}})</script>
</body>
</html>

v-show 与 v-if 区别

1、俩者区别v-if : 当条件为false时，包含v-if指令的元素，根本不会存在dom中v-show : 当条件为false时，v-show只是给我们的元素添加了一个行内样式 display:none--------------------------------------------------------------
2、开发时如何选择？当需要在显示与隐藏之间切片很频繁时，使用v-show当只有一次切换时，通过使用v-if

循环语句

遍历数组

v-for='(iteam,index) in list'例如：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环</title>
</head>
<body><div class="app"><ul ><li v-for='(iteam,index) in arry'>{{index+1}}、{{iteam}}</li></ul></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {arry : ['Curry','Kobe','James','Jine'],}})</script>
</body>
</html>

遍历对象

v-for='(value,key,index)'例如：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环</title>
</head>
<body><div class="app"><li v-for='(value,key,index) in obj'>{{index+1}}、{{key}}:{{value}}</li></ul></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {obj : {name : 'jine',age : 22 ,love : 'basketball',worker : 'code'}}})</script>
</body>
</html>

遍历数组渲染原理（v-for :key）

官方推荐使用 v-for 时，给对应的元素或组件添加上一个 :key 属性。为什么需要这个key属性这和Vue的'虚拟DOM'和'Diff算法'有关描述：有个数组 0:a，1:b, 2:c，已经渲染到dom数页面上 ,若再进行插值操作，假如要插入e元素，要插到a和b的中间，那么此时Vue生成虚拟Dom树，然后进行和页面dom对比，若循环中没有 key这个属性，那么首先e把e替换，然后把b替换到c，最后再进行生成一个新节点索引为3元素为C，这样效率并不高效。这样引进key会使更新虚拟dom更高效。因为有了key这个属性，这个要加入的新节点是直接插进去，并创建出来，不会影响其他元素节点。（index不严谨）'注意：要保持kye的唯一性'

响应式方法

1、push()
在数组的最后新增一个或多个元素2、pop()
删除数组中的最后一个或多个元素3、shift()
删除数组中第一个或多个元素4、unshift()
在数组最前面添加一个或多个元素5、splice()
删除/插入/替换 元素6、sort()
排序元素7、reverse()
反转元素8、Vue.set(obj,index,value)'注意：通过索引值修改数组的元素不是响应式的'

Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）相关推荐

Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录前言一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...
Vue.js（渐进式JavaScript框架）
Vue.js(渐进式JavaScript框架) 渐进式:逐步实现新特性. Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的JavaScript框架.它基于标准HTML.CSS ...
Vue.js 2 渐进式前端框架的最佳学习方法
Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且取得了相当不错的成绩. Vue.js的定位是一个渐进式框架,作者的说法是: 与其他框架的区别就 ...
vue crud_使用Vue和Deepstream构建实时CRUD应用
vue crud Vue is the JavaScript UI tool that parades itself as progressive because it is approachable ...
vue项目查看构建后项目报告，项目个模块依赖占比比例情况
vue项目查看构建后项目报告,项目个模块依赖占比比例情况 npm run build --report or "report": "vue-cli-service bui ...
构建meteor应用程序_我构建了一个渐进式Web应用程序并将其发布在3个应用程序商店中。这是我学到的。...
构建meteor应用程序 by JudahGabriel Himango 犹大(Gabriel Himango) 我构建了一个渐进式Web应用程序并将其发布在3个应用程序商店中. 这是我学到的. (I ...
python for maya_Python for Maya：“对象的名称不唯一。”当从课堂上调用对象来构建用户界面时...
问题: 我没有得到任何语法错误,直到我尝试构建UI时运行脚本.一切似乎都很好,直到我运行最后2行代码.Python for Maya:"对象的名称不唯一."当从课堂上调用对象来构建 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）

条件语句

条件判断

v-show 与 v-if 区别

循环语句

遍历数组

遍历对象

遍历数组渲染原理（v-for :key）

响应式方法

Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）相关推荐

最新文章

热门文章