淘先锋技术网

首页 1 2 3 4 5 6 7

课程介绍

内容概述
认识 Vuejs
为什么学习 Vuejs
简单认识一下 Vuejs
Vuejs 安装方式
CDN 引入
下载和引入
NPM 安装管理
Vuejs 初体验
Hello Vuejs
Vue 列表展示
案例:计数器
Vuejs MVVM
Vue 中的 MVVM
 

为什么学习Vuejs

我相信每个人学习 Vue 的目的是各不相同的。
可能你的公司正要将原有的项目使用 Vue 进行重构。
也可能是你的公司新项目决定使用 Vue 的技术栈。
当然,如果你现在正在换工作,你会发现招聘前端的需求中, 10 个有 8 个都对 Vue 有或多或少的要求。
当然,作为学习者我们知道 Vuejs 目前非常火,可以说是前端必备的一个技能。
 

简单认识Vuejs

Vue ( 读音 /vjuː/ ,类似于 view) ,不要读错。
Vue 是一个渐进式的框架,什么是渐进式的呢?
渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中,带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用 Vue 实现,那么 Vue 的核心库以及其生态系统。
比如 Core+Vue-router+Vuex ,也可以满足你各种各样的需求。
Vue 有很多特点和 Web 开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟 DOM
这些特点,你不需要一个个去记住,我们在后面的学习和开发中都会慢慢体会到的,一些技术点我也会在后面进行
讲解。
学习 Vuejs 的前提?
从零学习 Vue 开发,并不需要你具备其他类似于 Angular React ,甚至是 jQuery 的经验。
但是你需要具备一定的 HTML CSS JavaScript 基础。
 

Vue.js安装

使用一个框架,我们第一步要做什么呢?安装下载它
安装 Vue 的方式有很多:
方式一:直接 CDN 引入
你可以选择引入开发环境版本还是生产环境版本
方式二:下载和引入
方式三: NPM 安装
后续通过 webpack CLI 的使用,我们使用该方式
 
 

Hello Vuejs

我们来做我们的第一个 Vue 程序,体验一下 Vue 的响应式
代码做了什么事情?
我们来阅读 JavaScript 代码,会发现创建了一个 Vue 对象。
创建 Vue 对象的时候,传入了一些 options {}
{} 中包含了 el 属性:该属性决定了这个 Vue 对象挂载到哪一个元
素上,很明显,我们这里是挂载到了 id app 的元素上
{} 中包含了 data 属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如像上面这样。
也可能是来自网络,从服务器加载的。
浏览器执行代码的流程:
执行到 10~13 行代码显然出对应的 HTML
执行第 16 行代码创建 Vue 对象,并且对原 HTML 进行解析和修改。
并且,目前我们的代码是可以做到响应式的。
 
 

Vue列表显示

 

 
现在,我们来展示一个更加复杂的数据:数据列表。
比如我们现在从服务器请求过来一个列表
希望展示到 HTML 中。
HTML 代码中,使用 v-for 指令
该指令我们后面会详细讲解,这里先学会使用。
是不是变得 So Easy ,我们再也不需要在 JavaScript 代码中完成
DOM 的拼接相关操作了
而且,更重要的是,它还是响应式的。
也就是说,当我们数组中的数据发生改变时,界面会自
动改变。
依然让我们打开开发者模式的 console ,来试一下
 
 
案例:计数器
现在,我们来实现一个小的计数器
点击 + 计数器 +1
点击 - 计数器 -1
这里,我们又要使用新的指令和属性了
新的属性: methods ,该属性用于在 Vue 对象中定义方
法(函数)。
新的指令: @click, 该指令用于监听某个元素的点击事
件,并且需要指定当发生点击时,执行的方法 ( 方法通
常是 methods 中定义的方法 )
你可能会疑惑?
这些 @click 是什么东西?
Vue 对象中又是定义 el/data/methods ,到底都有哪些
东西可以定义,以及它们的作用是什么?
这些疑惑在后续学习中都会一一解开。
 
 

Vue中的MVVM

什么是 MVVM 呢?
通常我们学习一个概念,最好的方式是去看维基百科 ( 对,千万别看成了百度百科 )
https://zh.wikipedia.org/wiki/MVVM
维基百科的官方解释,我们这里不再赘述
我们直接来看 Vue MVVM
 
 
View 层:视图层
在我们前端开发中,通常就是 DOM 层。
主要的作用是给用户展示各种信息。
 
Model 层:数据层
数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
在我们计数器的案例中,就是后面抽取出来的 data ,当然,里面的数据可能没有这么简
单。
 
ViewModel 层:视图模型层
视图模型层是 View Model 沟通的桥梁。
一方面它实现了 Data Binding ,也就是数据绑定,将 Model 的改变实时的反应到 View
另一方面它实现了 DOM Listener ,也就是 DOM 监听,当 DOM 发生一些事件 ( 点击、滚动、
touch ) 时,可以监听到,并在需要的情况下改变对应的 Data
 

计数器的MVVM

计数器的 MVVM
 
我们的计数器中就有严格的 MVVM 思想
 
View 依然是我们的 DOM
 
Model 就是我们我们抽离出来的 data
 
ViewModel 就是我们创建的 Vue 对象实例
 
它们之间如何工作呢?
 
首先 ViewModel 通过 Data Binding obj 中的数据实时的在 DOM 中显示。
 
其次 ViewModel 通过 DOM Listener 来监听 DOM 事件,并且通过 methods 中的操作,来改变 data 中的数据。
 
有了 Vue 帮助我们完成 ViewModel 层的任务,在后续的开发,我们就可以专注于数据的处理,以及 DOM 的编写工作了。
 

创建Vue实例传入的options

 

你会发现,我们在创建 Vue 实例的时候,传入了一个对象 options
这个 options 中可以包含哪些选项呢?
详细解析: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
目前掌握这些选项:
el:
类型: string | HTMLElement
作用:决定之后 Vue 实例会管理哪一个 DOM
data:
类型: Object | Function (组件当中 data 必须是一个函数)
作用: Vue 实例对应的数据对象。
methods:
类型: { [key: string]: Function }
作用:定义属于 Vue 的一些方法,可以在其他地方调用,也可以在指令中使用。
 
 

模板语法

内容概述

插值操作
 
绑定属性
 
计算属性
 
事件监听
 
条件判断
 
循环遍历
 
阶段案例
 
v-model
 
 

Mustache

 

如何将 data 中的文本数据,插入到 HTML 中呢?
我们已经学习过了,可以通过 Mustache 语法 ( 也就是 双大括号 )
Mustache: 胡子 / 胡须 .
我们可以像下面这样来使用,并且数据是响应式的
 
 

v-once

但是,在某些情况下,我们可能不希望界面随意的跟随改变
这个时候,我们就可以使用一个 Vue 的指令
v-once:
该指令后面不需要跟任何表达式 ( 比如之前的 v-for 后面是由跟表达式的 )
该指令表示元素和组件 ( 组件后面才会学习 ) 只渲染一次,不会随着数据的改变而改变。
代码如下:
 
 

v-html

某些情况下,我们从服务器请求到的数据本身就是一个 HTML 代码
 
如果我们直接通过 {{}} 来输出,会将 HTML 代码也一起输出。
 
但是我们可能希望的是按照 HTML 格式进行解析,并且显示对应的内容。
 
如果我们希望解析出 HTML 展示
  可以使用 v-html 指令
 
该指令后面往往会跟上一个 string 类型
 
会将 string html 解析出来并且进行渲染
 
 

v-text

v-text 作用和 Mustache 比较相似:都是用于将数据显示在界面中
 
v-text 通常情况下,接受一个 string 类型
 
 
 

v-pre

v-pre 用于跳过这个元素和它子元素的编译过程,用于显示原本的 Mustache 语法。
 
比如下面的代码:
 
第一个 h2 元素中的内容会被编译解析出来对应的内容
 
第二个 h2 元素中会直接显示 {{message}}

 

v-cloak

 

在某些情况下,我们浏览器可能会直接显然出未编译的 Mustache 标签。
 
cloak: 斗篷
 
前面我们学习的指令主要作用是将值插入到我们 模板的内容 当中。
 
但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定。
 
比如动态绑定 a 元素的 href 属性
 
比如动态绑定 img 元素的 src 属性
 
这个时候,我们可以使用 v-bind 指令:
 
作用 :动态绑定属性
 
缩写 :
 
预期 any (with argument) | Object (without argument)
 
参数 attrOrProp (optional)
 
下面,我们就具体来学习 v-bind 的使用。
 

v-bind基础

v-bind 用于绑定一个或多个属性值,或者向另一个组件传递 props ( 这个学到组件时再介绍 )
 
在开发中,有哪些属性需要动态进行绑定呢?
  还是有很多的,比如图片的链接 src 、网站的链接 href 、动态绑定一些类、样式等等
 
比如通过 Vue 实例中的 data 绑定元素的 src href ,代码如下:
 
 

v-bind语法糖 

v-bind 有一个对应的语法糖,也就是简写方式
 在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。
 
简写方式如下: