第2章 Vue数据绑定《Vue应用程序开发》教学课件.pptxVIP

第2章 Vue数据绑定《Vue应用程序开发》教学课件.pptx

  1. 1、本文档共22页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
《Vue应用程序开发》?精品课件合集?精品课件合集Vue应用程序开发(第二章 Vue数据绑定)1、模板语法2、Vue属性与数据绑定目 录3、Vue生命周期1.1 Vue模板语法模板语法11.3 响应式声明渲染1.2 表达式1. 模板语法1.1 Vue模板语法Vue 将模板中的文本数据放入 DOM 中。Vue 支持动态渲染文本,以 {{ }}形式插入,输出纯文本。如果要解析为 HTML,需要使用 v-html 指令主要从文本,HTML,JavaScript 表达式这几个方面来介绍模板语法。1. 模板语法1.1 Vue模板语法演示模板语法: div id=app div v-html=message/div /div script new Vue({ el: #app, data: { message: 用户名input type=text value=中文名/ +密码input type=password/ //这里不支持换行,如果要换行用单引号括起来用+号连接。 } }) /script1. 模板语法1.2 表达式Vue 支持 JavaScript 的所有表达式。每个绑定只能包含单个表达式,此例都不会生效{{ number + 1 }} {{ ok ? YES : NO }} {{ message.split().reverse().join() }} div v-bind:id=list- + id/div!-- 这是语句,不是表达式 -- {{ var a = 1 }} !-- 流控制也不会生效,请使用三目表达式 -- {{ if (ok) { return message } }}1. 模板语法1.3 响应式声明渲染Vue 是一个响应式系统。Vue.js 用模板语法声明式将数据渲染进 DOM 系统。视图是来自状态声明映射,状态发生变化,数据自动渲染。1. 模板语法1.3 响应式声明渲染使用 v-model 绑定文本框使用 Vue 中 v-on:click 来绑定事件,缩写形式@click(在上示例基础的div标签中添加) div id=myApp p {{ message }} /p input v-model=message/input button v-on:click=alert(message=+app.message); 点击看看 /button button @click=alert(message=+app.message); 点击看看 /button /divVue属性与数据绑定2.1 Vue属性绑定22.3 Vue计算属性2.2 Vue双向数据绑定2. Vue属性与数据绑定2.1 Vue属性绑定如果页面需要超链接,初学者会写如下的代码,运行后会发现并没有生成超链接div id=myApp a href={{url}} /a !--a href=url/a -- /div//初学者可能会这样写这是一个错误演示script var app = new Vue({ el: #myApp, data: { bookName: Vue.js 编程入门, url: / } })/script2. Vue属性与数据绑定2.1 Vue属性绑定这时需要用 v-bind,修改代码再次运行后发现超链接可以跳转 v-bind 主要用于属性绑定,Vue 官方提供了一个简 写方式例如a v-bind:href=url/a!—完整语法-- a v-bind:href=url/a !—缩写-- a:href=url/a2. Vue属性与数据绑定2.1 Vue属性绑定v-bind 主要用于属性绑定,绑定到文本框中。 绑定一段 HTML,可使用 v-html 来绑定,运行后发现p标签中有一个完整的a标签input type=text v-bind:value=bookName/ap v-html=urlTag/p var app = new Vue({ el: #myApp, data: { urlTag:a href=/Vue.js/a } })2. Vue属性与数据绑定2.2 Vue数据双向绑定Vue 是一个 MVVM 框架,即数据双向绑定,当数据发生变化的时,视图也发生变化,当视图发生变化时,数据也会同步变化。绑定的方式有两种方式:表达式{{ }}属性名也是一种指令2. Vue属性与数据绑定2.3 Vue计算属性模板语法只用于简单运算,当表达式过于复杂时,Vue 提供了计算属性 computed。引用计算属性 computed ,同时 computed 有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。计算属性的 setter 和 getter默认是 getter 需要时可提供settersetter 和 ge

您可能关注的文档

文档评论(0)

臂老师 + 关注
实名认证
文档贡献者

教师资格证持证人

臂老师,祝您一臂之力,成功(公)上岸!

领域认证该用户于2023年09月27日上传了教师资格证

1亿VIP精品文档

相关文档