《《JavaScript程序设计案例教程》PPT课件（共13章）第12章 JavaScript程序设计案例教程》由会员分享，可在线阅读，更多相关《《JavaScript程序设计案例教程》PPT课件（共13章）第12章 JavaScript程序设计案例教程（53页珍藏版）》请在金锄头文库上搜索。
1、JavaScript程序设计案例教程第12章Vue1Vue 入门2Vue 实例3数据绑定4计算属性和监听器5模板渲染u掌握安装和在文档中引入Vue的方法u掌握创建Vue实例的方法并了解其生命周期u掌握Vue数据绑定的方法u掌握Vue计算属性和侦听器的应用u了解Vue模板渲染语法学习目标学习目标u培养学生有意识地提高自己的学习和工作效率u培养学生关注新技术、新思想的意识素质目标素质目标 什么是Vue12.1 Vue入门 下载和安装Vue 引入Vue Vue基本语法12.1 Vue入门12.1.1 什么是VueVue是一个聚焦于视图层的MVVM框架。视图层是指Web前端开发中和网页展示相关的部分。
2、MVVM全称为Model View ViewModel，也称为双向绑定，Model为数据层，View为视图层，ViewModel为数据视图中间层，它主要用于串联Model和View，如下图12-1所示。MVVM模式ViewModel是Vue框架的核心，本质上是一个Vue实例。Vue实例是作用于某一个HTML元素的，该元素可以是元素，也可以是指定了id属性的其他元素。那么双向绑定是如何实现的呢？由图12-1可以看出，从View侧来看，View和ViewModel之间进行了数据绑定，当ViewModel接收到数据的变化时，会通知View进行视图更新；而当View触发了输入等事件，又会通知ViewM
3、odel层。从Model侧来看，ViewModel和Model之间是相互关联的，当ViewModel接收到输入事件时，将通知Model更新数据；而Model的数据发生变化时，也会通知ViewModel。12.1 Vue入门下面通过一个实例来看一下Vue.js是如何实现MVVM模式的。【例12-1】 使用Vue.js实现MVVM模式。（实例位置：example/ch12/12-1.html）详情见教材12.1 Vue入门12.1 Vue入门在例12-1中，和元素表示View层，变量data表示Model层，对象vm表示ViewModel层。当View层的输入内容改变时，Model层的变量data
4、通过ViewModel层的vm进行修改；当Model层的data变量改变时，ViewModel层的vm将会更新View层的，这样就实现了一个简单的MVVM效果。网页运行效果如下图12-2所示。网页运行效果12.1 Vue入门Vue和Jquery有着很大的不同，Jquery是将大量的JavaScript方法进行封装处理，减少JavaScript代码的编写。而Vue是改变了传统Web页面开发过程中操作DOM元素的方式，使用将数据和视图绑定的全新开发模式进行Web页面开发。Vue框架相比原生JavaScript和Jquery有以下优势： 减少DOM元素操作，数据更新则DOM元素自动更新； 语法简单，
5、文档结构清晰，上手速度快； 支持组件化的方式，减少重复代码编写； 生态丰富，良好的插件机制支持拓展更多功能； 配合现代化工具类库，极大地提升开发效率； 框架体积小，网页加载速度快。12.1.2 下载和安装Vue首先访问Vue官方网站（https:/cn.vuejs.org/），如下图12-3所示。12.1 Vue入门 Vue官网单击顶部导航栏中的“学习”按钮，在其下拉导航中选择“教程”；在弹出的界面中单击左侧导航栏中的“安装”，并向下滚动页面到“直接用引入”位置，如下图12-4所示。12.1 Vue入门Vue下载地址由图12-4可以看出，Vue提供了开发版本和生产版本两个版本。开发版本提供了完
6、整的错误提示，且能够看到Vue整个文件的原始内容，主要用于本地调试；生产版本文件通常是以min.js结尾，如vue.min.js，且生产版本删除了警告，同时对Vue整个文件进行了压缩，文件加载速度比开发版本更快。12.1 Vue入门12.1.3 引入Vue官方推荐的使用标签引入Vue的方式有两种，分别是将文件下载到本地引入和通过官方CDN引入，代码如下：12.1 Vue入门上述代码，方式1是通过下载文件到本地，然后使用本地文件引入的方式加载Vue框架；方式2则是通过官方提供的CDN进行引入，无需将文件下载到本地。12.1.4 Vue基本语法在正式使用Vue之前，首先来学习一些Vue的基本语法。
7、使用Vue时，首先需要使用new Vue()创建一个Vue的对象实例，同时需要传入一个DOM元素的id值，用于将该实例和DOM元素进行绑定。DOM元素和Vue实例绑定后，DOM元素内部的元素就能使用动态数据进行渲染。Vue使用的是模板语法，即在HTML元素中使用“xxx”这样的模板语法来表示一个动态渲染的变量；同时也提供了一些特有的指令，如表示单击事件的click，条件渲染v-if等指令，这些模板语法和指令有助于开发者更简单地实现网页功能。12.1 Vue入门在引入Vue文件之后，就可以使用Vue的所有功能。下面通过一个实例展示Vue的使用。【例12-2】 在网页上使用标签显示“Hello W
8、orld!”，单击“改变文本”按钮将标签内容自动变更为“World Hello!”。（实例位置：example/ch12/12-2.html）（1）编写HTML代码。 message 改变文本12.1 Vue入门（2）编写JavaScript代码。var app = new Vue( el: #app, data: message: Hello World! )12.1 Vue入门保存并运行上述页面，页面上显示内容“Hello World”，其下有一个“改变文本”按钮，如左图12-5所示。当单击页面上的按钮时，标签中的内容变更为“World Hello”，如右图12-6所示。使用Vue初始状态
9、 使用Vue单击按钮后例12-2很好地展示了Vue双向绑定的特点。当单击页面上的按钮时，我们没有操作任何DOM元素，但是页面内容却发生了变化。 创建Vue实例12.2 Vue实例 数据和方法 Vue实例的生命周期通过前面的学习可以知道，Vue在全局对象上添加了Vue构造器，只需使用new Vue()进行初始化即可创建Vue实例。Vue初始化时接收一个选项参数，它包含挂载元素、初始数据、方法、生命周期等。下面为Vue初始化的方式。12.2.1 创建Vue实例12.2 Vue实例var vm = new Vue(el: #app,)12.2 Vue实例上述代码中，初始化时传入了一个对象，其中一个属
10、性为el，其为Vue实例选择的挂载目标，它既可以是CSS选择器（如示例中的“#app”），也可以是一个DOM元素，如通过document.getElementById获取到的DOM元素。Vue实例挂载到目标元素后，该DOM元素下的关联数据即为响应式数据。所谓响应式数据，就是当改变data对象中的属性时，该属性所关联的DOM元素将会自动更新，如例12-2中单击按钮后，页面中的“Hello World!”变为“World Hello!”。上述代码中的“”表示Vue支持的其他属性，如data、methods、created等，12.2.2节将会详细介绍。Vue初始化时可以传入一些数据和方法，这些数据
11、和方法是Vue实现响应式的基础。一般使用data对象定义数据，使用methods对象定义方法，下面通过实例介绍。【例12-3】 Vue的初始化。（实例位置：example/ch12/12-3.html）12.2.2 数据和方法12.2 Vue实例var vm = new Vue(el: #app,data: 详情见教材由例12-3可以看出，Vue有一个特点，就是它会将data对象的属性和methods对象的方法绑定在Vue实例对象上。例如，vm.a实际指向的是vm.data.a的值，所以输出结果为1；vm.getB()实际调用的是vm.methods.getB()方法，this.b实际指向的是
12、this.data.b，所以输出结果为2。Vue在进行初始化的过程中要经历很多环节，如需要做数据的双向绑定，编译模板语法等；当实例使用完后，还可以将实例销毁。Vue实例经历的整个“创建-运行-销毁”的过程就称为Vue实例的生命周期。在整个生命周期中，Vue实例要经历“创建-挂载-更新-销毁”几个环节，在这些环节中，Vue会运行一些生命周期的钩子函数，如beforeCreate()、Created()、beforeMount()等。开发者可以在这些生命周期钩子函数里做一些自己的操作，如发起ajax请求等。12.2.3 Vue实例的生命周期12.2 Vue实例 文本绑定12.3 数据绑定 HTML
13、绑定 属性绑定 事件绑定 双向绑定 【示例】实现商品数量编辑按钮12.3 数据绑定12.3.1 文本绑定Vue中绑定文本需要使用“Mustache”（双大括号）语法，下面来看一个实例。【例12-4】 使用双大括号语法进行文本绑定。（实例位置：example/ch12/12-4.html）# HTML content 详情见教材例12-4中， content 使用的就是“Mustache”语法，Vue会将data中content变量对应的值显示到HTML中。当content变量对应的值发生变化时，HTML中的 content 将会重新渲染，显示最新的数据。12.3 数据绑定除了使用“Mustac
14、he”语法外，还可以使用Vue提供的v-text语法进行文本绑定，如例12-5所示。【例12-5】 使用v-text语法进行文本绑定。（实例位置：example/ch12/12-5.html）# HTML 详情见教材例12-5中，Vue使用v-text语法实现了文本绑定，具体操作为，为标签新增一个v-text属性，同时设置属性值为content。使用v-text语法和使用“Mustache”语法所显示的HTML结果一致。日常使用来说，使用“Mustache”语法会更普遍一些。12.3 数据绑定12.3.2 HTML绑定日常开发中，经常需要将一段HTML代码插入到页面中显示。在Vue中，如果使用
15、“Mustache”语法或者v-text语法插入HTML代码，Vue会将这段代码作为字符串原样输出，不会生成对应的DOM元素。为此，Vue提供了v-html语法来解决这个问题。【例12-6】 HTML绑定。（实例位置：example/ch12/12-6.html）# HTML 详情见教材由例12-6可以看出，v-html和v-text使用方式一致，Vue会将content中的HTML代码转换成对应的DOM元素并插入到标签中。12.3 数据绑定12.3.3 属性绑定除文本和HTML外，Vue还可以将data对象的数据绑定到DOM元素的属性上，通常使用v-bind:语法进行绑定。【例12-7】 属
16、性绑定。（实例位置：example/ch12/12-7.html）# HTML v-bind详情见教材例12-7中，标签上新增了v-bind:id属性，表示将标签的id属性与dynamicId变量进行绑定，当dynamicId变量发生变化时，标签的id属性值也会发生变化。12.3 数据绑定12.3.4 事件绑定根据之前所学知识，如果为一个DOM元素绑定事件，首先需要通过DOM操作获取该元素，然后使用addEventListener或onXXX（如onclick）进行事件绑定。Vue提供了v-on:语法进行事件绑定，这让事件绑定变得更简单。【例12-8】 事件绑定。（实例位置：example/ch12/12-8.html）# HTML button详情见教材例12-8使用v-on:click语法绑定了一个doSomething()方法，当单击button按钮时，将调用该方法并弹出alert框。12.3 数据绑定12.3.5 双向绑定Vue中的数据绑定分为单向绑定和双向绑定，12.3.1节使用的文本绑定就是一种单向绑定，即数据发生变化，触发视图发生变化。双向绑定是在单向绑定基础上的一个封装
