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

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}}</h2><h2>{{info.split(“-”)}}</h2>h2>{{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:{bookCount(){//`this`指向当前组件实例returnthis.books.length>0?"Yes":"No";}},<h2>书籍是否存在库存：{{bookCount}}</h2>Vue.js计算属性二、计算属性与methods的区别计算属性是有缓存的，在其依赖的数据不发生变化时计算属性不需要重新计算。只有当依赖的数据发生变化，计算属性才会重新进行计算。目

录模板语法响应式声明渲染机制Vue.js计算属性Vue.js生命周期Vue.js生命周期一、Vue.js实例生命周期图解在生物学上，生命周期指的是一个生物体从生命开始到结束周而复始所历经的一系列变化过程。在Vue.js中，每个组件从创建开始都可能需要经历挂载、更新、卸载等一系列的过程。在这个过程中的某一个阶段，可能想要添加一些特定的代码。Vue.js提供了组件的生命周期函数可以实现这一需求。生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue.js源码内部进行回调，在生命周期函数中可以编写属于自己的逻辑代码。Vue.js生命周期二、Vue.js各生命周期适合开