Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

1、hello vue.js!

（1）引入vue.js

（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

（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

（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

（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>

结果展示：

转载于:https://www.cnblogs.com/wrcold520/p/5505656.html

Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）相关推荐

31款轻量高效的开源 JavaScript 插件和库
31款轻量高效的开源 JavaScript 插件和库目前有很多网站设计师和开发者喜欢使用由[url=http://www.kubiji.cn/forum-id261.html]JavaScript[ ...
Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
DataRabbit 轻量的数据访问框架（13）－－DataRabbit 3.0 ORM性能大幅度提升！
DataRabbit 3.0重写了DataRabbit 2.0的ORM实现的内核,性能提升了90倍左右,结果是DataRabbit 3.0的ORM性能与直接使用ADO.NET的性能已经非常接近. ...
轻量高效！清华智能计算实验室开源基于PyTorch的视频 (图片) 去模糊框架SimDeblur
作者丨科技猛兽编辑丨极市平台清华大学自动化系智能计算实验室团队开源基于 PyTorch 的视频 (图片) 去模糊框架 SimDeblur. 基于 PyTorch 的视频 (图片) 去模糊框架 Si ...
3 ie兼容 vue_前端开发：MVVM框架之Vue势必会取代JQuery吗？
最近接受一个新项目,前端是选用jquery还是用vue这个问题,团队里面就产生了分歧,我作为项目负责人,最终决定新项目采用Vue,原因如下: 1.本次项目界面和后台数据交互比较多,采用mvvm框架开发 ...
MVVM框架与VUE实现原理
1.MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型]mvvm模式的核心,它是连接view和mod ...
2016年31款轻量高效的开源JavaScript插件和库（下）
目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...
推荐轻量高效无依赖的开源JS插件和库
为什么80%的码农都做不了架构师?>>> 在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本.demo Lightga ...
轻量高效的开源JavaScript插件和库【转】
图片布局轮播图弹出层音频视频编辑器字符串表单存储动画时间其它加载器构建工具测试包管理器 CDN 图片 baguetteBox.js- 是一个简单易用的响应式图像灯箱效果脚 ...
31 款轻量高效的开源 JavaScript 插件和库
目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...

Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）相关推荐

最新文章

热门文章