vue.js声明式渲染和条件与循环基础知识
vue.js声明式渲染和条件与循环的具体内容,分享给大家
绑定 DOM 元素文本值
html代码:
<div id="app"> {{ message }} </div>
JavaScript代码:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
运行结果:Hello Vue!
总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素会相应地更新。
绑定 DOM 元素属性
用v-bind指令绑定span元素的title属性
html代码:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停此处几秒, 可以看到此处动态绑定的 title! </span> </div>
JavaScript代码:
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } })
运行结果:
总结:v-bind 属性被称为指令,是由 Vue 提供的专用属性,该指令的作用就是:“将此元素的 title 属性与 Vue 实例的 message 属性保持关联更新”。当我们改变app2.message的值时,绑定了title属性的元素会进行更新。
条件
用v-if指令判断条件
html代码:
<div id="app-3"> <p v-if="seen">现在你可以看到我</p> </div>
JavaScript代码:
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
运行结果:你可以看到我
总结:当我们把app3.seen的值改为false以后,我们会看到 span 消失。说明我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。从而通过数据的更改实现元素的插入/更新/删除操作。
循环
v-for 指令,可以使用数组中的数据来展示一个项目列表
html代码:
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
JavaScript代码:
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '创建激动人心的代码' } ] } })
运行结果:1.学习 JavaScript
2.学习 Vue
3.创建激动人心的代码
在控制台,输入 app4.todos.push({ text: ‘新的 item' }),你会看到列表中追加了一个新的 item。
总结:可以通过数据确定我们项目列表的长度和内容,从而减少了html的代码量
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
关于vue-router的beforeEach无限循环的问题解决
最近在使用vue-router的beforeEach钩子时候遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题 代码如下: router.beforeEach((to, from, next) => { if(isLogin){ next() }else{ console.log('测试') next('login') } }) 结果chrome的debug中看到: 这个问题我是这样理解的: router.beforeEach((to, from, next)
-
浅谈vue.js中v-for循环渲染
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
-
Vue.js常用指令之循环使用v-for指令教程
前言 Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. v-for 可以绑定数据到数组来渲染一个列表: <div id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <sc
-
VUE中的无限循环代码解析
代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:
-
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
-
vue.js声明式渲染和条件与循环基础知识
vue.js声明式渲染和条件与循环的具体内容,分享给大家 绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素
-
关于React中的声明式渲染框架问题
目录 1. 命令式和声明式 1.1 命令式 1.2 声明式 1.3 两种范式的性能和易维护性 2. 虚拟DOM的性能如何 3. 运行时和编译时 3.1 运行时 3.2 运行时 + 编译时 3.3 编译时 4. 总结 在学习React源码之前,我们先搞清楚框架的范式都有哪些.框架范式主要有两种:命令式和声明式,目前大部份流行框架都采用声明式渲染,为什么都选择声明式渲染呢?对比命令式它有什么优势呢?为了搞清楚这些问题,我们先从动态渲染页面的三种方式:纯JS运算,innerHTML,虚拟DOM,分别比
-
JS声明式函数与赋值式函数实例分析
本文实例讲述了JS声明式函数与赋值式函数.分享给大家供大家参考,具体如下: 引言 "程序是不会骗人的"我们项目中的一个哥们经常这样说,为什么他会有这样的感叹呢?就是有时候我么程序员会出现的这样的问题,当我们让别人来调试错误的时候,别人什么都没有说,在我们给人家复现错误的时候发现,错误竟然没有了,留下自己在风中凌乱.此处中枪的童鞋们请顶起来......下面说说小编给别人调BUG时候遇到的问题如下: 请听题:说出下面几段js脚本的结果是什么? <script type="t
-
Vue.js实现表格渲染的方法
我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢? 我们查看vue的官方文档,如下: 值域 v-for v-for 也可以接收一个整数,此时它将重复模板数次. <div> <span v-for="n in 10">{{ n }} </span> </div> 结果: 那我们就可以通过如下方法来渲染列表: <table class="table table
-
Vue声明式渲染详解
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,也就是将模板中的文本数据写进DOM中,使用 {{data}} 的格式写入.此代码都是Vue.js官网上的实例. 1.首先导入Vue.js <script type="text/javascript" src="vue.js"></script> 2.html和js代码 <body> <div id="id"> //i
-
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用
-
Vue.js与 ASP.NET Core 服务端渲染功能整合
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js 服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N
-
详解 vue.js用法和特性
前 言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
-
Vue.js响应式数据的简单实现方法(一看就会)
目录 引言 基本概念 副作用函数 响应式数据 响应式数据的基本实现 实现思路 初步实现尝试 完善响应系统 泛化副作用函数名 修复漏洞 总结 引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri
-
探讨Vue.js的组件和模板
摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为. 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('<li>one</li>')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态, Vue的内置指令 1. v-bind v-bind主要用于绑定DOM元素属性(
随机推荐
- 谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
- PJBlog存在SQL注入漏洞大家要快下补丁了
- Java用正则表达式如何读取网页内容
- 关于树形菜单 Checkbox的全选
- php利用cookies实现购物车的方法
- python自动化工具日志查询分析脚本代码实现
- asp中让function同时返回多个值的代码
- C#实现多选项卡的浏览器控件
- js中escape对应的C#解码函数 UrlDecode
- php实现留言板功能(会话控制)
- 配置SQL Server数据库恢复模式(2种方法)
- jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
- 简单实现jQuery弹窗效果
- alert中断settimeout计时功能
- 日常整理linux常用命令大全(收藏)
- Android中搜索图标和文字居中的EditText实例
- Android数据持久化之SQLite数据库用法分析
- 源码分析 Laravel 重复执行同一个队列任务的原因
- Python基础教程之内置函数locals()和globals()用法分析
- angular多语言配置详解