Vue.js前端开发框架应用（微课版） 课件 第二章 数据绑定.pptx

Vue.js框架应用

数据绑定

目录模板语法响应式声明渲染机制Vue.js计算属性Vue.js生命周期

目录模板语法响应式声明渲染机制Vue.js计算属性Vue.js生命周期

模板语法一、了解模板语法Vue.js使用模板语法可以将数据声明式地绑定呈现到DOM上。Vue.js使用一种基于HTML的模板语法，所有的Vue.js模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。在底层机制中，Vue.js会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue.js能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。模板语法包括插值、文本、表达式、属性绑定、指令等方面的内容。

模板语法二、插值最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（即双大括号）。注意：双大括号会将数据解释为纯文本，而不是HTML。如果需要浏览器解析标记，需使用v-html指令，该指令将在后面章节介绍。data(){return{msg:“青春筑梦，强国有我”}}h2{{msg}}/h2

模板语法三、表达式Vue.js模板中除了可以绑定简单的属性名，还支持完整的JavaScript表达式。注意：每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。这样的写法是无效的：{{varage=20}}、{{if(age){returninfo}}}，因为双大括号里面是一条语句而不是一个表达式。h2{{age+2}}/h2h2{{info.split(“-”)}}/h2h2{{age=18?“成年人”：“未成年人”}}/h2

目录模板语法响应式声明渲染机制Vue.js计算属性Vue.js生命周期

响应式声明渲染机制一、响应式声明渲染机制简介Vue.js是一个响应式系统，当Vue.js数据发生改变时，视图中的数据会自动更新。声明式渲染是Vue.js对数据进行操作的模式，也叫作响应式渲染。模型（Model）层是普通的JavaScript对象，当视图（View）层中的DOM节点上绑定了Vue.js的对象时，如果这个对象的属性发生了任何改变，无须进行其他操作，页面上的对应的数据会自动发生变化，即更新，所以叫作响应式渲染。声明式渲染主要包括声明响应式状态和声明方法。

响应式声明渲染机制一、响应式声明渲染机制简介1.声明响应式状态data(){return{msg:“青春筑梦，强国有我”}}h2{{msg}}/h2

响应式声明渲染机制一、响应式声明渲染机制简介2.声明方法data(){return{msg:“青春筑梦，强国有我”}},methods:{showInfo(){returnthis.msg;}}h2{{showinfo()}}/h2

响应式声明渲染机制二、Vue.js属性绑定Vue.js也可以将数据响应式地绑定到一个HTML属性上。这时不能使用双大括号也不能直接使用数据，而应该使用v-bind指令，关于指令的内容将在第3章详细介绍。data(){return{mytitle:“响应式标题”}}h2v-bind:title=“mytitle”标题文本/h2语法规则:v-bind:html属性名=“绑定的数据名”

响应式声明渲染机制三、Vue.js双向数据绑定Vue.js可以通过v-model指令实现双向数据绑定，即当数据发生变化时，视图随之更新，同时，当视图变化时，数据也会同步变化。双向绑定是Vue.js的特色之一。data(){return{country:China,}}p{{country}}/p//单向绑定inputtype=“text”v-model=“country”///双向绑定语法规则:v-model=“绑定的数据名”

目录模板语法响应式声明渲染机制Vue.js计算属性Vue.js生命周期

Vue.js计算属性一、计算属性在Vue.js的模板中可以直接通过插值语法显示一些data中的数据，也可以使用表达式作为值，但是在模板中放入太多的逻辑会让模板过重和难以维护。如果多个地方都使用到相同的逻辑，还会产生大量重复的代码。解决这个问题的一种方法是将逻辑抽取到一个method中，但是这种做法有一个直观的弊端，就是所有的data使用过程都会变成了一个方法的调用。Vue.js给我们了另外一种方式是使用计算属性computed。computed也是组件实例的一个选项。data(){return{books:[美丽中国,建设新时代社会主义文化强国,教育强国战略],};},computed:{bo