Vue2 DAY01
课程介绍
Vue介绍（了解）
Vue准备工作（了解）
MVVM架构详解（了解）
Vue入门（了解）
Vue表达式（掌握）
Vue指令（掌握）
Vue过滤器（了解）
Vue计算属性（了解）
Vue介绍
1.1. Vue是什么
Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的
web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
<!doctype
html>
{{ message }}
<input
v-model=’message’/>
1.2. Vue特性
l
轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
l
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
l
指令
内置指令统一为(v-*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
l
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
l
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
1.3. Vue的历史
Vue是比较新的技术，版本 1.0 是在 2014 年发布的。
Vue作者是
前Google 的员工尤雨溪，在2016年9月宣布以技术顾问的身份加盟阿里巴巴Weex团队。 实现Vue 和 Weex 的 JavaScript runtime 整合，目标是让Vue 的语法跨三端。
Vue准备工作
2.1. Vue准备工作
Vue是一个 JavaScript
框架。它是一个以
JavaScript 编写的库。
Vue是以一个
JavaScript 文件形式发布的，可通过
script 标签添加到网页中：
CDN:全称是Content
Delivery Network，即内容分发网络。CDN的通俗理解就是网站加速，可以让客户端以最快的速度访问资源。
也可以下载Vue文件到本地：http://vuejs.org/v2/guide/installation.html
2.2. 使用Vue
1、加入Vue库
1、拷贝vue.min.js到项目libs目录（如果没有请新建）中；
2、通过 script 标签添加到网页中，就可以使用Vue：
3、检查Vue是否可以用
Vue入门
3.1. 基本理论
Vue扩展了 HTML，为HTML增加了新的功能。
Vue通过 Vue-directive（指令）和 组件扩展了 HTML。其实就是通过自定义标签、属性来增强HTML功能。
常用指令：
v-model 指令把元素值（比如输入域的值）绑定到应用程序。
v-text指令把应用程序数据绑定到元素的更新元素的 textContent。 也可以通过{{表达式}}
v-bind 指令可以动态地绑定一个或多个属性到HTML元素上。
3.2. Hello应用
{{ message }}
网页加载完毕，Vue自动开启。
new Vue({配置})代表建立页面模板和数据间的关系。
v-model 指令把元素值（比如输入域的值）绑定到应用程序.
v-text指令把数据绑定到页面元素中。
3.3. Vue架构认识
Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。
Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.
MVC模式：
Model： 数据模型，一些JavaScript 对象，比如 {name : “小小强”,age : 16};
View: 视图，网页中的内容，一般由HTML模板生成。
Controller : 控制器（路由），视图和模型之间的胶水。
MV VM模式：
Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；
View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；
对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。
VueJS表达式（重点）
VueJS使用 表达式（ {{表达式}} ） 把数据绑定到 HTML。
4.1.1.
表达式语法
VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML，这与 v-html指令有异曲同工之妙。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。
4.1.2.
数字操作
表达式可以算数运算
{{ 10 * 3.123 }}
{{ num1* num2 }}
4.1.3.
字符串操作
表达式使用string属性或方法
字符串长度：{{‘ABCD’.length}
//4
字符串截取：{{‘ABCDEFG’.substring(1,3)}} //BC
字符串转小写：{{‘ABCDEFG’.toLowerCase()}} //BC
4.1.4.
对象操作
Vue中操作对象，就跟JavaScript操作对象一样
{{ person.firstName }}
{{person.sex}}
4.1.5.
数组操作
Vue中操作数组，就跟JavaScript操作数组一样
第三个值为 {{ ns[1] }}，长度为：{{ns.length}}
VueJs指令（重点）
5.1. 什么是指令
VueJs通过被称为 指令 的新属性来扩展 HTML。
VueJs通过内置的指令来为应用添加功能。
VueJs允许你自定义指令。
5.2. 指令特征
所有指令都包含在Vue实例管理的范围内。
VueJs指令是扩展的 HTML 属性，带有前缀 v-。
v-model 指令把元素值（比如输入域的值）绑定到应用程序，存储值。
v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定
初始化vue应用，vm元素是 VueJs应用程序 的"所有者"
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text"
v-model=“username”>
<p>你输入的为： {{ username}}</p>
5.3. v-bind指令（重点中的重点）
v-bind 指令告诉 VueJs动态地绑定一个或多个特性，或一个组件 prop 到表达式，因为 Mustache
不能在 HTML 属性中使用，应使用 v-bind 指令。
v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。
语法结构：v-bind:argument=“js
expression”
这个参数通常是HTML元素的特性（attribute），比如：
v-bind:src=“imgSrc” 可以缩写： :src=“imgSrc”
:class="{ red: isRed }" 或 :class="[classA,
classB]" …
:style="{ fontSize: size + ‘px’
}" 或 :style="[styleObjectA, styleObjectB]" …
5.5. v-show指令
v-show根据表达式的值来显示HTML元素。当赋值给v-show指令的值为false时元素会被隐藏。
原理其实就是在style当中使用display:none来实现的.
<script
type=“text/javascript”>
//定义应用模块
var
vm = new Vue({
el:'#app',
data: {
show:
true,
hide:
false,
score: 90
}
})
</script>
<div id="app">
<p v-if="show">你能看见我!</p>
<p v-if="hide">你不能看见我!</p>
<p v-if="score >= 90">你真棒，考了{{score}}分</p>
</div>
5.6. v-if指令（重点中的重点）
使用v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给v-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。
vm.isVip=true;
你是VIP客户，你可以享受VIP特权。
</div>
5.7. v-for指令（重点中的重点）
v-for 动态遍历一个数组，类似程序的for循环，允许我们取出数组的每一项数据做相应的运算
{{index+1 + ':' + score}}
5.8. v-on指令（重点中的重点）
v-on指令 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。
- 注意：如果用在普通元素上时，只能监听
原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
常用的修饰符包括：
.stop - 调用 event.stopPropagation()；停止冒泡。
.prevent - 调用 event.preventDefault(); 停止监听原生事件。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once - 触发一次。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
-
使用手法：
方法处理器 -->
<button
v-on:click=“doThis”>
<!--
内联语句 -->
<button
v-on:click=“doThat(‘hello’, $event)”>
<!--
缩写 -->
<button
@click=“doThis”>
<!--
停止冒泡 -->
<button
@click.stop=“doThis”>
<!--
阻止默认行为 -->
<button
@click.prevent=“doThis”>
<!--
阻止默认行为，没有表达式
–>
<form
@submit.prevent>
<!-- 串联修饰符 -->
<button
@click.stop.prevent=“doThis”>
<!--
键修饰符，键别名
–>
<input
@keyup.enter=“onEnter”>
<!--
键修饰符，键代码
–>
<input
@keyup.13=“onEnter”>
<!--
the click event will be triggered at most once -->
<button
v-on:click.once=“doThis”>
按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input
@keyup.enter=“submit”>
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。
之前自带许多自带的过滤器：
{{msg | currency}}
{{msg | json}}
现在2.0把内置的过滤器全部删除了。
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式（从 2.1.0 开始支持）。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：
{{ message |
capitalize }}
过滤器函数总接受表达式的值作为第一个参数。
new Vue({
// 创建一个首字母大写的过滤器
filters: {
capitalize:
function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() +
value.slice(1)
}
}
})
过滤器可以串联
{{ message |
filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message |
filterA(‘arg1’, arg2) }}
字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。
计算属性
模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
{{
message.split(’’).reverse().join(’’) }}
在这种情况下，模板不再简单和清晰。在意识到这是反向显示 message 之前，你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候，问题会变得更糟糕。
这就是对于任何复杂逻辑，你都应当使用计算属性的原因。
computed: {
// a
computed getter
reversedMessage: function () {
//
this points to the vm instance
return this.message.split(’’).reverse().join(’’)
}
}
课程总结
8.1. 重点
Vue环境搭建与入门
Vue指令的使用
8.2. 如何掌握？
通过代码验证原理。
将常见的用法截图保存到文件夹中，时常回顾。
课后练习
1、使用计算属性，完成一个老外名称的拼装
firstName lastName
fullName
2、使用Vue完成一个户籍管理系统
面试题
简述MVVM架构模式
v-if 跟 v-show的区别有哪些？？
扫一扫
576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
