Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1、hello vue.js!
（1）引入vue.js
<script type="text/javascript" src="js/vue.js"></script>
（2）创建要绑定vue组件的元素，这里制定为id为"dr01"的div
<div id="dr01">
<!-- 这里的双大括号表示从绑定的vue实例中取值vue_dr01 -->
<p>{{vue_dr01}}</p>
</div>
（3）通过<script>标签创建vm实例
var dr01 = new Vue({
//将初始化的vue组件映射到id为"dr01"的标签中
el: "#dr01",
//初始化数据，这里定义了一个名称为"vue_dr01"的字符串对象。
data: {
vue_dr01: "hello vue.js!"
}
});
（4）结果
2、数据双向绑定
（1）引入vue.js
<script type="text/javascript" src="js/vue.js"></script>
（2）创建要绑定vue组件的元素，这里制定为id为"dr02"的div
<div id="dr02">
<p>{{ytCode}}</p>
<input type="text" v-model="ytCode" />
</div>
解释：输入框v-model="ytCode"属性将当前元素的值与vue组件中的ytCode绑定，当一方发生变化后，在vue组件中所有引用ytCode的地方都会发生变化，
这里当input输入框的信息发生更改后，p标签的{{ytCode}}也会跟随渲染更新数据
（3）通过<script>标签创建vm实例
var dr02 = new Vue({
el: "#dr02",
data: {
ytCode: 500331584514
}
});
（4）结果
初始化的数据
更改输入框内的数据，<p>标签内的内容也会根据发生变化
3、渲染列表
（1）引入vue.js
<script type="text/javascript" src="js/vue.js"></script>
（2）创建要绑定vue组件的元素，这里制定为id为"dr03"的div
<div id="dr03">
<ul>
<li v-for="book in books">
{{"name: "+book.name+"; price: "+book.price+"."}}
</li>
</ul>
</div>
v-for="book in books"将会从vue实例中取出books（数组）遍历，遍历的时候将数组中的每一个对象定义为book。
{{book.name}}表示从book中取出name属性的值，{{book.price}}表示从book中取出price属性的值
（3）通过<script>标签创建vm实例
var dr03 = new Vue({
el: "#dr03",
data: {
books: [{
name: "book01",
price: "price01"
}, {
name: "book02",
price: "price02"
}, {
name: "book03",
price: "price03"
}]
}
});
（4）结果
4、事件的处理
（1）引入vue.js
<script type="text/javascript" src="js/vue.js"></script>
（2）创建要绑定vue组件的元素，这里制定为id为"dr04"的div
<div id="dr04">
<p>{{dr04_msg}}</p>
<button v-on:click="reverseMsg">reverseMsg</button>
</div>
v-on:click将会绑定当前标签的click事件，这个事件与vue实例中methods属性中的reverseMsg相对应。
（3）通过<script>标签创建vm实例
var dr04 = new Vue({
el: "#dr04",
data: {
dr04_msg: "this is dr04 message!"
},
methods: {
reverseMsg: function() {
this.dr04_msg = this.dr04_msg.split("").reverse().join("");
}
}
});
创建vue实例的时候初始化一个“reverseMsg”的事件，作用是将dr04_msg的值倒序。
（4）结果
点击按钮之前
点击按钮之后
整合在一起的示例：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/vue.js"></script>
<title>数据双向绑定、列表、简单事件的处理</title>
</head> <body>
<h4>#Hello World!</h4>
<div id="dr01">
<p>{{vue_dr01}}</p>
</div>
<hr />
<h4>#数据双向绑定</h4>
<div id="dr02">
<p>{{ytCode}}</p>
<input type="text" v-model="ytCode" />
</div>
<hr />
<h4>#渲染列表</h4>
<div id="dr03">
<ul>
<li v-for="book in books">
{{"name: "+book.name+"; price: "+book.price+"."}}
</li>
</ul>
</div>
<hr />
<h4>#处理用户输入</h4>
<div id="dr04">
<p>{{dr04_msg}}</p>
<button v-on:click="reverseMsg">reverseMsg</button>
</div>
</body>
<script>
var dr01 = new Vue({
el: "#dr01",
data: {
vue_dr01: "hello vue.js!"
}
});
var dr02 = new Vue({
el: "#dr02",
data: {
ytCode: 500331584514
}
});
var dr03 = new Vue({
el: "#dr03",
data: {
books: [{
name: "book01",
price: "price01"
}, {
name: "book02",
price: "price02"
}, {
name: "book03",
price: "price03"
}]
}
});
var dr04 = new Vue({
el: "#dr04",
data: {
dr04_msg: "this is dr04 message!"
},
methods: {
reverseMsg: function() {
this.dr04_msg = this.dr04_msg.split("").reverse().join("");
}
}
});</script> </html>
结果展示：
Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）的更多相关文章
- Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
- Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
- Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
- Vue.js-----轻量高效的MVVM框架（十、父子组件通信）
#1.父链 html: <h3>#父链</h3> <div> <div>子组件可以用 this.$parent 访问它的父组件.根实例的后代可以用 th ...
- Vue.js-----轻量高效的MVVM框架（八、使用组件）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）
这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- Vue.js-----轻量高效的MVVM框架（五、计算属性）
#基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...
随机推荐
- loj10099 矿场搭建
传送门 分析 我们发现可以将这张图转换为一个联通块来处理.我们求出所有的割点.在求完之后我们我们对于每一个点双连通分量如果它没有割点相连则需要布置两个出口,因为可能有一个出口正好被割掉.而如果有一个割 ...
- ARC073D Simple Knapsack
传送门 题目大意 给你n个物品,你有一个容量为W的背包,每一个物品都有它的重量和价值,让你从n个中选取若干个,使得总重量不超过背包的上限,而且使得价值最大. 分析 首先我们不难发现由于W很大,所以这并 ...
- CF 959E Mahmoud and Ehab and the xor-MST
第一反应是打表找规律……(写了个prim)但是太菜了没找到 于是开始怀疑是不是我的表错了,又写了一个克鲁斯卡尔,然后结果是一样的……(捂脸) 后来从克鲁斯卡尔的算法上发现了一点东西,发现只有2的幂次长 ...
- Servlet处理表单数据
Servlet 表单数据 很多情况下,需要传递一些信息,从浏览器到 Web 服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到 Web 服务器,分别为 GET 方法和 POST 方法. 使用 ...
- SSH (Struts2+Spring3.0+Hibernate3)框架（二） 框架的配置
一.准备工作: 1. JDK -> jdk1.6.0_17 安装(环境变量配置): JAVA_HOME = C:\ jdk1.6.0_17; PATH = %JAVA_HOME%\bin; %J ...
- 数据结构 merge_link合并链表
问题描述 本题任务是维护一条非递减的链表,初始长度为 0,记这条链表为主链表.对主链表做 N 次操作,操作分两种:1 k a1 a2 … ak,表示一条长度为 k 且非递减的链表,需要将这条链表合并到 ...
- python 中的异常处理与种类
异常处理是Python工程中补课避免的,进行异常处理,可以帮我们调试代码,使代码找起问题更加简单,更加容易哦. 一般都是利用Try,比较简单,代码也不复杂. try: print 'try...' r ...
- js学习路线
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流程控制 JavaScript 数组 JavaScript 函数基础 JavaScrip ...
- [C++11]shared_ptr循环引用导致内存泄露
1 /* 2 * shared_ptr循环引用导致内存泄露 3 */ 4 5 struct A 6 { 7 shared_ptr<A> ptr; // 改为weak_ptr<A> ...
- Java基础之开发工具Eclipse的使用
Eclipse简介 Eclipse是由IBM公司投资4000万美元开发的集成开发工具.它是目前最流行的Java集成开发工具之一,基于Java语言编写,并且是开放源代码的.可扩展的(Integrated ...