第2章 Vue数据绑定_第1页
第2章 Vue数据绑定_第2页
第2章 Vue数据绑定_第3页
第2章 Vue数据绑定_第4页
第2章 Vue数据绑定_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章Vue数据绑定课程内容模板语法响应式声明渲染机制Vue属性绑定Vue双向数据绑定Vue计算属性Computed计算属性与methods的区别Vue生命周期2

Vue模板语法3Vue将模板中的文本数据放入DOM中。Vue支持动态渲染文本，以{{}}形式插入，输出纯文本。如果要解析为HTML，需要使用v-html指令主要从文本，HTML，JavaScript表达式这几个方面来介绍模板语法。演示模板语法

4<divid="app"><divv-html="message"></div></div><script>newVue({el:'#app',data:{message:'用户名<inputtype="text"value="中文名"/>'+'密码<inputtype="password"/>'//这里不支持换行，如果要换行用单引号括起来用+号连接。}})</script>

表达式5Vue支持JavaScript的所有表达式。每个绑定只能包含单个表达式，此例都不会生效{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<divv-bind:id="'list-'+id"></div><!--这是语句，不是表达式-->{{vara=1}}<!--流控制也不会生效，请使用三元表达式-->{{if(ok){returnmessage}}}响应式声明渲染机制Vue是一个响应式系统。Vue.js用模板语法声明式将数据渲染进DOM系统。视图是来自状态声明映射，状态发生变化，数据自动渲染。6演示响应式声明渲染7<head><metacharset="UTF-8"><title>hello,world!</title></head><body><divid="myApp"><p>{{message}}</p></div><scriptsrc="lib/Vue.js"></script><script>varmyData={message:'HelloVue'}varapp=newVue({el:'#myApp',data:myData})</script></body></html>数据和DOM已经绑定在一起，所有元素都是响应式的，页面中的<p>标签中的数据自动更新。8使用v-model绑定文本框使用Vue中v-on:click来绑定事件，缩写形式@click（在上示例基础的<div>标签中添加）响应式声明渲染<divid="myApp"><p>{{message}}</p><inputv-model="message"></input><buttonv-on:click="alert('message='+app.message);">点击看看</button><button@click="alert('message='+app.message);">点击看看</button></div>9如果页面需要超链接，初学者会写如下的代码，运行后会发现并没有生成超链接Vue属性绑定<divid="myApp"><ahref={{url}}></a><!--<ahref=url></a>-->//初学者可能会这样写这是一个错误演示</div><script>varapp=newVue({el:'#myApp',data:{bookName:'Vue.js编程入门',url:'/'}})</script>10这时需要用v-bind，修改代码再次运行后发现超链接可以跳转

v-bind主要用于属性绑定，Vue官方提供了一个简写方式例如Vue属性绑定<av-bind:href="url"></a><!—完整语法--><av-bind:href="url"></a><!—缩写--><a:href="url"></a>11v-bind主要用于属性绑定，绑定到文本框中。

绑定一段HTML，可使用v-html来绑定,运行后发现<p>标签中有一个完整的<a>标签Vue属性绑定<inputtype="text"v-bind:value="bookName"></a><pv-html="urlTag"></p>varapp=newVue({el:'#myApp',data:{urlTag:'<ahref=/>Vue.js</a>'}})Vue双向数据绑定Vue是一个MVVM框架，即数据双向绑定，当数据发生变化的时，视图也发生变化，当视图发生变化时，数据也会同步变化。绑定的方式有两种方式表达式{{}}属性名也是一种指令1213模板语法只用于简单运算，当表达式过于复杂时，Vue提供了计算属性computed。引用计算属性computed，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。Vue计算属性14演示计算属性<divid="app"><h2>图书</h2><div>您购买了{{}}共{{book.count}}本===￥{{book.price}}/本</div><div>总价：{{totalPrice}}</div></div><sciprt>varvm=newVue({el:'#app',data:{book:{id:1,price:10,name:'Vue入门',count:1},discount:0.8,deliver:12},computed:{totalPrice(){return(this.book.price*this.book.count)*this.discount+this.deliver;}}})</sciprt>计算属性的setter和getter默认是getter需要时可提供setter15Vue计算属性setter和getter的区别在于，setter是当computed这个属性的值变化时所触发的。16Vue计算属性<divid="app"><inputv-model="firstName"/><inputv-model="lastName"/><inputv-model="fullName"/></div><script>varvm=newVue({el:'#app',data:{firstName:'Foo',lastName:'Bar'},computed:{fullName:{get:function(){returnthis.firstName+''+this.lastName},set:function(newValue){

varnames=newValue.split('')this.firstName=names[0]this.lastName=names[names.length-1]}}}})</script>//getter//setter

17计算属性与methods的区别methods将被混入Vue实例中通过VM实例访问在指令表达式中使用方法中的this自动绑定为Vue实例18计算属性与methods的区别<divid="app"><h2>图书</h2><div>您购买了{{}}共{{book.count}}本===￥{{book.price}}/本</div><div>总价：{{totalPrice()}}</div>//注意括号</div><sciprt>varvm=newVue({el:'#app',data:{book:{id:1,price:10,name:'Vue入门',count:1},discount:0.8,deliver:12},methods:{totalPrice:function(){return(this.book.price*this.book.count)*this.discount+this.deliver;}}})</sciprt>//methods

两种方式的最终结果确实是完全相同的。19数据处理结构清晰依赖于数据，处理结果自动更新计算属性内部this指向vm实例在模板调用时，直接写计算属性名即可常用getter方法获取数据；也可用setter方法改变数据依赖数据不变时，compute

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论