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

《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