这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要为大家详细介绍了 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 的代码量
来源: http://www.phperz.com/article/17/0811/343910.html