Vue.js双向数据绑定模板渲染
准备知识
1. 前端开发基础 html、css、js
2. 前端模块化基础
3. 对ES6有初步的了解
vuejs官网：cn.vuejs.org
HTML：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
<style>
.finished {
text-decoration: underline;
}
</style>
</head>
<body> <div id="demo">
<h1 v-text="title"></h1>
<ul>
<li v-for="item in items" :class="{finished: item.isFinished}">
{{item.label}}
</li>
</ul>
</div> <script src="vue.js"></script>
<script src="demo01.js"></script> </body>
</html>
Js：
var demo = new Vue({
el: '#demo',
data: function () {
return {
a: 1,
title: 'this is a todo list',
items: [
{
label: 'coding',
isFinished: false
},
{
label: 'walking',
isFinished: true
}
],
liClass: 'thisIsLiClass'
};
},
methods: {
doSomething: function () {
console.log(this.a);
}
}
});
实例2：
html：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
<style>
.finished {
text-decoration: underline;
}
</style>
</head>
<body> <div id="demo">
<h1 v-text="title"></h1>
<!-- v-model随表单控件的不同而不同 -->
<input type="text" v-model="newItem"/>
<ul>
<li v-for="item in items" :class="{finished: item.isFinished}"
@click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div> <script src="jquery-3.1.0.min.js"></script>
<script src="vue.js"></script>
<script src="demo01.js"></script> </body>
</html>
js：
var demo = new Vue({
el: '#demo',
data: function () {
return {
title: 'this is a todo list',
items: [
{
label: 'coding',
isFinished: false
},
{
label: 'walking',
isFinished: true
}
],
newItem: '',
liClass: 'thisIsLiClass'
};
},
methods: {
doSomething: function () {
console.log(this.a);
},
toggleFinish: function (item) {
item.isFinished = !item.isFinished; // 布尔值取反
}
}
});
Vue.js双向数据绑定模板渲染的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- 面试题：你能写一个Vue的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- 浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- Vue原理--双向数据绑定
MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态 ...
随机推荐
- c# 中virtual与abstract
在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...
- 开窗函数Over用法
比如我们有这个表: 销售记录表 日期 姓名 产品 销售额 201601 A 电脑 12560 201601 A 手机 6501 201601 A 平板 8510 201602 A 手机 1560 20 ...
- Generic detail view PostDetailView must be called with either an object pk or a slug.解决
Django 使用DetailView有这个问题,url,和模板统一调用模型时,用pk,而不是id 如果不是用DetailView,只是简单的视图,则用pk 或者id都可以. urls.py: url ...
- luogu3312 [SDOI2014]数表 (莫比乌斯反演+树状数组)
link \(\sum_{i=1}^n\sum_{j=1}^m[s(\gcd(i,j))\le a]s(\gcd(i,j))\) \(=\sum_{p=1}^ns(p)[s(p)\le a]\sum_ ...
- 项目笔记《DeepLung:Deep 3D Dual Path Nets for Automated Pulmonary Nodule Detection and Classification》（三）（上）结果评估
在(一)中,我将肺结节检测项目总结为三阶段,这里我要讲讲这个项目的第三阶段,至于第二阶段,由于数据增强部分的代码我始终看不大懂,先不讲. 结果评估的程序在evaluationScript文件夹下,这个 ...
- Mybatis学习笔记(三) —— DAO开发方法
一.SqlSession的使用范围 SqlSession中封装了对数据库的操作,如:查询.插入.更新.删除等. SqlSession通过SqlSessionFactory创建. SqlSessionF ...
- jquery each循环,实现break和continue的功能
break----用return false; continue --用return ture;
- CAS 5.X 安装
官方文档: https://apereo.github.io/cas/5.1.x/index.html 几个基本概念 CAS Server: SSO服务器端 CAS Client : SSO客户端,内 ...
- Idea如何设置代码超出长度限制时自动换行
在[File]-->[Settings]-->[Code Sytle]中勾选[Wrap on typing]选项
- 基于APPIUM测试微信公众号的UI自动化测试框架（结合Allure2测试报告框架）
框架初衷 前两周组内的小伙伴跟我说她现在测试的微信公众号项目(保险)每次上新产品时测试起来很费时,存在大量的重复操作(点点点),手工测试每个产品可能需要半天到一天的时间,复杂的产品需要两天. 由于保险 ...