Introduction to Vue.js
What is Vue.js
Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。
Vue.js 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与 现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/v2/guide/
Why Use Vue.js?
- 声明式渲染:前后端分离是未来趋势。
- 渐进式框架:适用于各种业务需求。
- 简单易学:中文文档,易于理解和学习。
Basic Knowledge
使用 Vue.js
在 html 页面使用 script 引入 vue.js 的库即可使用:
- 远程CDN:
- 本地:
Vue-CLI 脚手架:使用 vue.js 官方提供的 CLI 脚本架可以方便地去创建 vue.js 工程雏形。
入门程序
创建一个 vue_test 目录,并且在目录下创建 01_vue入门程序.html 文件。
- 定义 html,引入 vue.js
- 定义 app div,此区域作为 vue.js 的接管区域
- 定义 Vue.js 实例,接管 app 区域。
- 定义 model(数据对象)
- 在 app 中展示数据
Document
{{name}}
{{}} 插值表达式:通常用来获取 Vue.js 实例中定义的数据(data);属性节点中不能够使用插值表达式。
el 挂载点:定义 Vue.js 实例挂载的元素节点,表示 vue.js 接管该区域。
Vue 的作用范围 :Vue 会管理 el 选项中的元素及其内部元素。
选择挂载点时,可以使用其他选择器,但是建议使用 ID 选择器。
挂载点可以设置其他的 DOM 元素进行关联,但是建议选择 DIV,不能使用 HTML 和 Body 标签。
data 数据对象:Vue 中用到的数据定义在 data 中;data 中可以写复杂类型;渲染复杂类型数据的时候遵守 js 语法。
{{name}}
{{school.name}} {{school.number}}
{{names[0]}} {{names[1]}} {{names[2]}}
声明式渲染的好处
Vue 中的声明式渲染,简单理解就是 Vue 将声明的数据渲染到 HTML。
{{name}}
Vue 常用指令
Vue 指令是带有 v- 前缀的特殊属性;通过指令来操作 DOM 元素 。
v-text 指令
作用:获取 data 数据,设置标签的内容。 注意:默认写法会替换全部内容,使用插值表达式 {{}} 可以替换指定内容。
{{message}}高级
高级
v-html 指令
作用: 设置元素的 innerHTML (可以向元素中写入新的标签)
{{message}}
v-on 指令
作用:为元素绑定事件, 比如: v-on:click 可以简写为 @click="方法"
绑定的方法定义在 VUE 实例的 method 属性中
{{food}}
v-on 指令补充
传递自定义参数:函数调用传参
事件修饰符:对事件触发的方式进行限制
- 事件绑定方法,可以传入自定义参数
- 定义方法时,需要定义形参来接收实际的参数
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有许多,使用时可以查询文档
计数器案例
- data 中定义数据:比如 num 值为 1
- methods 中添加两个方法:比如 add(递增),sub(递减)
- 使用 {{}} 将 num 设置给 span 标签
- 使用 v-on 将 add、sub 分别绑定给加、减按钮
- 累加到 10 停止
- 递减到 0 停止
{{num}}
总结:
- 创建 VUE 实例:el 挂载点,data 数据,methods 方法
- v-on 指令的作用是绑定事件,简写为 @
- 方法中使用 this 关键字,获取 data 中的数据
- v-text 与 {{}} 的作用都是用来设置元素的文本值
v-show 指令
作用:v-show 指令,根据真假值切换元素的显示状态
- 原理是修改元素的 display 实现显示或者隐藏
- 指令后面的内容,最终会解析为布尔值
- 值为 true 显示,为 false 则隐藏
- 数据改变之后,显示的状态会同步更新
v-if 指令
根据表达式的真假,切换元素的显示和隐藏(操作是 dom)
- v-if 指令的作用:根据表达式的真假切换元素的显示状态
- 本质是通过操作 dom 元素,来切换显示状态
- 表达式为 true 时元素存在于 dom 树,为 false 则从 dom 树中移除
- 频繁切换使用 v-show,反之使用 v-if
v-bind 指令
作用:设置元素的属性(比如:src,title,class)
v-bind 指令
- v-bind 指令的作用是:为元素绑定属性
- 完整写法 v-bind:属性名,可以简写为 :属性名
v-for 指令
作用:根据数据生成列表结构
{{index+1}}城市:{{item}}
{{p.name}}
- 数组经常和 v-for 结合使用,数组有两个常用方法:push() 向数组末尾添加一个或多个元素;shift() 把数组中的第一个元素删除
- 语法是: (item, index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组的长度变化,会同步更新到页面上,是响应式的
MVVM 模式
MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式 MVVM 模式将页面分层了 M、V、和 VM,解释为: Model:负责数据存储 View:负责页面展示 View Model:负责业务逻辑处理(比如 Ajax 请求等),对数据进行加工后交给视图展示
{{name}}
首先,我们将 View Model 的 DOM Listeners 和 Data Bindings 看作两个工具,它们是实现双向绑定的关键:
- 从 View 看,View Model 中的 DOM Listeners 工具会监测页面上 DOM 元素的变化,如果有变化,则更改 Model 中的数据;
- 从 Model 看,当 Model 中的数据更新时,Data Bindings 工具会更新页面中的 DOM 元素。
MVVM 的思想主要是为了让开发更加方便,因为 MVVM 提供了数据的双向绑定。
v-mode 指令
作用:获取和设置表单元素的值,实现双向数据绑定。
- 单向绑定:将 model 绑定到 view 上,当 model 发生变化时 view 会随之变化。
- 双向绑定:除了单向绑定的功能外,用户更新了 View,而 Model 的数据也自动被更新。
填写表单:当用户填写表单时,View 的状态就被更新了,此时 MVVM 框架可以自动更新 Model 的状态,就相当于把 Model 和 View 做了双向绑定。绑定的数据会和表单元素值相关联。
{{message}}
{{password}}
实现简单记事本
新增内容
- 生成列表结构(v-for 数组)
- 获取用户输入(v-model 双向绑定)
- 点击回车键新增数据(v-on .enter 事件修饰符)
- 页面布局不熟悉,可以通过审查元素的方式快速找到元素
删除内容
- 点击删除指定的内容(根据索引删除元素)
- 在 methods 中添加一个删除的方法,使用 splice 函数进行删除
统计操作
- 统计页面信息的个数,就是列表中的元素的个数
- 获取 list 数组的长度,就是信息的个数
清空数据
- 点击清除所有信息
- 本质就是清空数组
记事本
VUE 记事本
{{index+1}} {{item}}
{{list.length}} items left Clear
Axios
Ajax
What is Ajax?
Ajax 是指一种创建交互式网页应用的开发技术
Ajax = 异步 JavaScript + XML
Ajax 的作用
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(局部更新)。传统的网页如果需要更新内容,必须重载整个网页页面。 简单记:Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,维护用户体验性,进行网页的局部刷新.。
异步和同步
同步访问:客户端必须等待服务器端的响应,在等待过程中不能进行其他操作 异步访问:客户端不需要等待服务的响应,在等待期间浏览器可以进行其他操作
案例
AjaxServlet
@WebServlet("/ajax")public class AjaxServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取请求参数 String username = req.getParameter("name"); // 模拟业务操作的延时 try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } // 打印 username System.out.println(username); resp.getWriter().write("Hello Ajax"); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); }}
ajax.jsp
Ajax
axios 介绍
VUE 中结合网络数据进行应用的开发:
- 目前十分流行网络请求库,专门用来发送请求,其内部还是 ajax,进行封装之后使用更加方便
- axios 作用:在浏览器中可以帮助我们完成 ajax 异步请求的发送
Vue 2.0 之后推荐用 axios 替换 JQuery ajax。
axios 入门
导包:
GET:axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});
POST:axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){});
- axios 必须导包才能使用
- 使用 get 或者 post 方法就可以发送请求
- then 方法中的回调函数会在请求成功或者请求失败的时候触发
- 通过回调函数的形参可以获取响应的内容或者错误信息
接口 1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话
接口 2:用户注册
请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败
接口 3:天气查询
请求地址:http://wthrcdn.etouch.cn/weather_mini 请求方法:get 请求参数:city(要查询的城市名称) 响应内容:天气信息
获取笑话案例
{{joke}}
axios 回调函数中 this 指向已经改变,无法访问 data 中的数据。
解决方案:将 this 进行保存,回调函数中直接使用保存的 this 即可。
天气查询案例
js/main.js
var VM = new Vue({ el: "#app", data: { city: "", // 定义数组保存天气信息 weatherList: [], }, // 编写查询天气的方法 methods: { searchWeather: function () { console.log("天气查询"); console.log(this.city); var savedThis = this; // 调用接口 axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then( function (resp) { console.log(resp) // 获取天气信息保存到 weatherList savedThis.weatherList = resp.data.data.forecast; }, function (error) { console.log(error); } ); }, },});
HTML 代码
天气查询
天气查询
回车查询
{{item.type}}
{{item.low}} ~ {{item.high}}
{{item.date}}
- 应用的逻辑代码,建议与页面进行分离,使用单独的 JS 编写
- axios 回调函数中的 this 的指向改变,无法正常使用,需要另外保存一份
- 服务器返回的数据比较的复杂时,获取数据时要注意层级结构
解决页面闪烁问题
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码,可以使用 v-cloak 指令来解决这一问题。
v-cloak 指令:解决插值表达式闪烁问题。
...
computed 计算属性
什么是计算属性
computed 的作用:减少运算次数,缓存运算结果,运用于重复相同的计算。
{{res()}}
{{res()}}
{{resComputed}}
{{resComputed}}
定义函数也可以实现与 计算属性相同的效果,都可以简化运算;
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
filter 过滤器
过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示;值得注意的是过滤器并没有改变原 来的数据,只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工。
过滤器使用位置:
- {{ msg | filterA }}:msg 是需要处理的数据,filterA 是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤加工操作。
- v-bind 绑定的值的地方:
{{ msg }}
Computer Price: {{price | addIcon}}
{{user.name | changeName}}
- 过滤器常用来处理文本格式化的操作;过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。
- 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
watch 侦听器
作用:当有一些数据需要随着其它数据变动而变动时,可以使用侦听属性;它用于观察 Vue 实例上的数据变动。
计数器:{{count}}
First Name: Last Name: {{fullName}}
Component 组件
组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的页面之间,也存在同样的功能。
将相同的功能进行抽取,封装为组件;这样前端人员就可以在组件化开发时,只需要书写一次代码,随处引入即可使用。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
Vue 的组件有两种:全局组件和局部组件 。
注意:
- 组件名以小写开头,采用短横线分割命名:例如 hello-Word
- 组件中的 data 必须是一个函数,注意与 Vue 实例中的 data 区分
- 在 template 模板中,只能有一个根元素
- 创建局部组件时,注意 components 的末尾有 s,而全局组件是不用加 s 的;这意味着 components 里可以创建多个组件
相比起全局组件,局部组件只能在同一个实例内才能被调用。
局部组件的写法和全局组件差不多,唯一不同就是:局部组件要写在 Vue 实例里面。
{{msg}}
- 组件与模板分离后,浏览器会把 html 里的 template 标签过滤掉;所以 template 标签的内容是不会在页面中展示的,直到它被 JS 中的 Vue 调用。
- 在 html 中,template 标签一定要有一个 id,因为通过 id 是最直接被选中的;data 和 methods 等参数,全部都要放到 Vue 实例里面写。
Vue 生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程,这个过程就是 Vue 的生命周期。
生命周期中的钩子函数:钩子函数是在一个事件触发的时候,在系统级捕获到了他,然后做一些操作。
- beforeCreate() - 在创建 Vue 实例之前,可以执行这个方法,例如加载动画操作。
- created() - 实例创建完成,属性绑定好了,但是 DOM 还没有生成。
- beforeMount() - 模板已经在内存中编辑完成了,尚未被渲染到页面中。
- mounted() - 内存中的模板已经渲染到页面,用户已经可以看见内容。
- beforeUpdate() - 数据更新的前一刻,组件在发生更新之前,调用的函数。
- updated() - updated 执行时,内存中的数据已更新,并且页面已经被渲染。
- beforeDestroy () - 钩子函数在实例销毁之前调用。
- destroyed () - 钩子函数在 Vue 实例销毁后调用。
{{message}}
Next
Vue Router 路由
什么是路由?
在 Web 开发中,路由是指根据 URL 分配到对应的处理程序。
路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图单页面 web 应用。
什么是单页面应用?
单页面 Web 应用(single page web application,SPA),就是只有一张 Web 页面的应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
单页应用不存在页面跳转,它本身只有一个 HTML 页面;传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新。
整个 body 的内容从登录组件变成了欢迎页组件,从视觉上感受页面已经进行了跳转。但实际上,页面只是随着用户操作,实现了局部内容更新,依然还是在 index.html 页面中。
单页面应用的好处:
- 用户操作体验好,用户不用刷新页面,整个交互过程都是通过 Ajax 来操作。
- 适合前后端分离开发,服务端提供 http 接口,前端请求 http 接口获取数据,使用 JS 进行客户端渲染。
路由相关的概念
- router:是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌,router 就相当于一个管理者,它来管理路由。
- route:router 相当于路由器,route 就相当于一条路由。比如,Home 按钮 => home 内容, 这是一条 route;news 按钮 => news 内容, 这是另一条 route。
- routes:是一组路由。把上面的每一条路由组合起来,形成一个数组。[{ home 按钮 => home 内容 }, { about 按钮 => about 内容 }]。
- router-link 组件: router-link 是一个组件,是对 标签的一个封装。该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。
- router-view 组件:路由导航到指定组件后,进行渲染显示页面。
使用路由
Vue.js 路由需要载入 vue-router 库:
// 方式 1: 本地导入// 方式 2: CDN
使用步骤:
- 定义路由所需的组件
- 定义路由,每个路由有两部分 path(路径),component(组件)
- 创建 router 路由器实例,管理路由
- 创建 Vue 实例,注入路由对象,使用 $mount() 指定挂载点
Vue 的 $mount() 为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等),之后要手动挂载上。新建 Vue 时,el 和 $mount 并没有本质上的不同。
renda.com
Go to Home Go to News
- router 是 Vue 中的路由管理器对象,用来管理路由
- route 是路由对象,一个路由就对应了一条访问路径,一组路由用 routes 表示
- 每个路由对象都有两部分 path(路径)和 component(组件)
- router-link 是对 a 标签的封装,通过 to 属性指定连接
- router-view 路由访问到指定组件后,进行页面展示