基础-vue 的特点和能做什么
**
目标
**了解Vue能做什么以及Vue的特点
数据
驱动视图 可以让我们只关注数据,完全**解耦
数据和视图
**
MVVM
双向绑定通过**
指令
**增强了html功能新特性
组件化
复用代码
开发者一般只需要关注数据
适应当前**
SPA
**的项目开发 single page application传统网站开发 一般来说 需求不大
当下各种新框架都采用了类Vue或者类React的语法去作 为主语法, 微信小程序/MpVue/uni-app
**
结论
**掌握Vue的开发语法 相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境
基础-一些关于Vue学习的文档链接
目标
知道如何查阅文档
- 所有关于Vue的问题都可以通过**
查阅文档
**解决
任务
学会Vue官网官方文档 查阅资料
基础-vue 三种安装方式
目标
: 了解采用几种方式安装vue
- 采用本地文件引入的方式
- 采用 **
在线cdn
**引入的方式
- cdn相当于把一个文件放在了全国各地,然后你离哪里近,就从哪里调拨给你
- 采用
npm
安装的方式- 现状: 都会采用npm的方式来进行正式项目开发
基础-HelloWorld
目标
掌握如何在页面中实例化 一个Vue对象
步骤
:1. body中,设置Vue管理的视图<div id="app"></div> 2. 引入vue.js 3. 实例化Vue对象 new Vue(); 4. 设置Vue实例的选项:如el、data... new Vue({选项:值}); 5. 在<div id='app'></div>中通过{ { }}使用data中的数据
基础-实例选项-el
目标
:了解 Vue实例中el选项的含义
- 作用:当前Vue实例所管理的html视图
- 值:**
通常
**是id选择器(或者是一个 HTMLElement 实例)- 不要让el所管理的视图是html或者body!
- class选择器 只匹配第一个满足条件的元素 (Vue实例 => 管理视图 1对1)
任务
- 尝试用 id选择器 设置el 页面显示hello world
- 尝试用class选择器 设置el 页面显示hello world
- 尝试 用 dom对象 设置el 页面显示hello world
- 尝试设置 html 或者body为el 查看效果
路径
new Vue({ // el: '#app' , id选择器 // el: '.app', class选择器 el: document.getElementById("#app") // dom对象 })
基础-实例选项-data
目标
: 掌握**响应式数据
**的操作方式 和更新方法
数据驱动视图
=> 数据变化 => 视图一定变化 只需要关注数据
- Vue 实例的数据对象,是响应式数据(数据驱动视图) 数据变化 => 视图变化
- 可以通过
vm.$data
访问原始数据对象- Vue 实例也代理了 data 对象上所有的属性,因此访问
vm.a
等价于访问vm.$data.a
- 视图中绑定的数据必须**
显式
**的初始化到 data 中- 数据对象的更新方式 直接 采用 实例.属性 = 值
任务
- 将数据对象中count初始值设置为 1, showMessage为false, list为 数组[1,2,3]
- 通过vm.属性的方式打印 以上三个属性
- 通过 { { 变量名 }} 的方式 将以上三个属性显示在页面上
- 通过vm.属性 = 赋值的方式 改变 count 为 2 showMessage 为 true 数组为 [1,2,3,4]
路径
var vm = new Vue({ el:"#app", data:{ count: 1, showMessage: false, list: [1,2,3] } }) console.log(vm.count) console.log(vm.showMessage) console.log(vm.list) vm.count = 2 vm.showMessage = true vm.list = [1,2,3,4]
基础-实例选项-methods
目标
: 掌握 实例选项methods中方法的使用及注意事项
- methods是一个对象
- 可以直接通过 VM 实例访问这些方法,或者在**
插值表达式中使用
**。- 方法中的
this
自动绑定为 Vue 实例。- methods中所有的方法 同样也被代理到了 Vue实例对象上,都可通过this访问
- 注意,不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++
)。理由是箭头函数绑定了**父级作用域
**的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是 undefinednew Vue({ el:"#app", data:{ name:"Hello world", name2:"Hello world2" }, methods:{ fn1:function(){ // 常规写法 console.log(this.name) this.fn2() // 调用方法2 }, fn2() { // es6 写法 console.log(this.name2) } } })
基础-术语解释-插值表达式(重要)
目标
: 理解和使用插值表达式
作用:会将绑定的数据实时的显示出来:
形式: 通过 **
{ { 插值表达式 }}
**包裹的形式通过任何方式修改所绑定的数据,所显示的数据都会被实时替换(响应式数据)数据驱动视图
插值表达式 =>
为所欲为
需要注意的是
Vue实例上代理里 data中所有的属性 和 methods中的方法,而我们的el作用的视图直接可使用这些属性和方法
但是并不需要**写this.属性 和 this.方法()
**
{ {js表达式、三元运算符、方法调用等}}
- a
- a = 10
- a == 10
- a > 10
- a + b + c
- “1” + “2” + “3”
- a.length.split(’’)
- a > 0 ? “成功” : “失败”
注意
:不能写 var a = 10; 分支语句 循环语句
<!-- js表达式 -->
<p>{
{ 1 + 2 + 3 }}</p>
<p>{
{ 1 > 2 }}</p>
<!-- name为data中的数据 -->
<p>{
{ name + ':消息' }}</p>
<!-- count 为data中的数据 -->
<p>{
{ count === 1 }}</p>
<!-- count 为data中的数据 -->
<p>{
{ count === 1 ? "成立" : "不成立" }}</p>
<!-- 方法调用 -->
<!-- fn为methods中的方法 -->
<p>{
{ fn() }}</p>
基础-术语解释-指令(重要)
**
目标:
**了解指令的基本含义 并应用一个指令
指令 (Directives) 是带有
v-
前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(
v-for
是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
指令位置: 起始标签
代码示例
<p v-text="'我是p标签的内容'"></p>
基础-系统指令-v-text 和 v-html
目标
:掌握如何使用v-text 和 v-html很像innerText和innerHTML
v-text:更新标签中的内容
v-text和插值表达式的区别
- v-text 更新**
整个
**标签中的内容- 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
可以渲染内容中的HTML标签
注意:尽量避免使用,容易造成危险 (XSS跨站脚本攻击)
<div id="app"> <!-- v-text指令的值会替换标签内容 --> <p>{ {str}}</p> <p v-text="str"></p> <p v-text="str">我是p标签中的内容</p> <p v-text="strhtml">我是p标签中的内容</p> <p v-html="str"></p> <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 --> <p v-html="strhtml">我是p标签中的内容</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { str: 'abc', strhtml: '<span>content</span>' } }); </script>
基础-系统指令-v-if 和 v-show
目标
:掌握条件渲染指令的两种方式
场景: 需要根据条件决定 元素是否显示 使用以上指令
使用: v-if 和 v-show 后面的表达式返回的布尔值 来决定 该元素显示隐藏
注意 : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏
<div id="app"> <!-- 如果isShow的值是true ,就显示p标签 --> <p v-if="isShow">我是p标签中的内容</p> <p v-show="isShow">我是p标签中的内容</p> <!-- 如果标签显示与隐藏切换频繁, 就使用v-show v-show本质是通过修改标签的display值 --> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: false } }); </script>
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用
v-show
较好;如果在运行时条件很少改变,则使用
v-if
较好。如果 切换频繁 前者 开销更大
需要**
注意
**的是 如果 有多个元素 需要用v-if或者v-show控制, 但是又不想增加 外部标签怎么办?可以用 **
template
**标签来包裹多个元素 v-if作用在template上,最终template不会形成任何元素
基础-系统指令-v-on绑定事件
**
目标:
**掌握vue绑定事件的方式
场景: 使用v-on指令给元素绑定事件
使用: 绑定 v-on:事件名.修饰符=“方法名” 可使用 @事件名=“方法名的方式”
注意 方法名 中 可以采用$event的方式传形参 也可以直接写事件名 默认第一个参数为event事件参数
修饰符(可不写)
.once
- 只触发一次回调。.prevent
- 调用event.preventDefault()
。<div id="app"> <!-- v-on:xx事件名='当触发xx事件时执行的语句' --> <!-- 执行一段js语句:可以使用data中的属性 --> <button v-on:click="count += 1">增加 1</button> <!-- v-on的简写方法 --> <button @click="count += 1">增加 1</button> <!-- 执行一个方法 --> <button @click="add">增加 1</button> <!-- 执行一个方法、这种写法可以传形参 --> <button @click="fn1(count)">执行fn1方法</button> <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event --> <button @click="fn2($event)">执行fn2方法</button> <hr> <!-- v-on修饰符 如 once: 只执行一次 --> <button @click.once="fn4">只执行一次</button> <p>上面的按钮被点击了 { { count }} 次。</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { count: 0, items: ['a', 'b', 'c'] }, methods: { add: function() { this.count += 1; }, fn1: function(count) { console.log(count); console.log('fn1方法被执行'); }, fn2: function(e) { console.log(e); console.log('fn2方法被执行'); }, fn3: function(index) { console.log(index); console.log('fn3方法被执行'); }, fn4: function() { console.log('fn4方法被执行了'); } } }); </script>
基础-系统指令-v-for-数组
目标
:掌握v-for循环数组的用法
根据一组数组或对象的选项列表进行渲染。
v-for
指令需要使用item in items
或者item of items
形式的特殊语法,
items
是源数据数组 /对象当要渲染相似的标签结构时用v-for
item in items // item为当前遍历属性数组项的值 (item,index) in items //item为当前遍历属性数组项的值 index为数组的索引
注意 v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染 v-for="数组中的元素 in data中的数组名" --> <!-- 数组 --> <p v-for="item in list">{ {item}}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'], }, methods: { } }) </script> </body> </html>
同上面的v-if和v-show,如果 v-for 中同样有多个元素,但是不想增加额外标签,同样可以用**
template
**
基础-系统指令-v-for-对象
目标
:掌握v-for循环对象的用法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染 v-for="元素 in 容器(数组和对象)" v-for="对象中的属性值 in data中的对象名" --> <!-- 对象 --> <!-- (v,k,i)in 对象 v:值 k:键 i:对象中每对key-value的索引 从0开始 注意: v,k,i是参数名,见名知意即可! --> <p v-for="value in per">{ {value}}</p> <hr> <p v-for="(value,key) in per">{ {value}}----{ {key}}</p> <hr> <p v-for="(value,key,i) in per">{ {value}}----{ {key}}--{ {i}}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { per: { name: '老王', age: 38, gender: '男' } }, methods: { } }) </script> </body> </html>
语法:
item in items // item为当前遍历属性对象的值 (item, key, index) in items //item为当前遍历属性对象的值 key为当前属性名的值 index为当前索引的值
基础-系统指令-v-for-key
目标
: 掌握在 v-for循环中给循环项赋值key
场景:列表数据变动会导致 视图列表重新更新 为了 提升性能 方便更新 需要提供 一个属性 key
使用: 通常是给列表数据中的唯一值 也可以用索引值
<div id="app"> <!-- v-for key属性: 值通常是一个唯一的标识 key是一个可选属性 养成好习惯:建议在写v-for时 设置:key="唯一值" --> <ul> <li v-for="(item,index) in list" :key="index">{ {item}}---{ {index}}</li> </ul> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'] }, methods: { } }); </script>
任务
- 初始化一个Vue实例
- 定义data对象中list:[‘北京’,‘上海’,‘天津’]
- 将list中的内容 v-for循环在li标签上显示
- 给每个li标签赋值key
当v-if和v-for相遇
目标
: 了解v-if 和v-for的层级关系及使用
- v-for循环元素时,标签可使用item属性, 如果这个时候用v-if来进行操作 会产生什么效果?
<p v-if="index>1" v-for="(item,index) in list"></p>
以上代码执行: 会将数组中前两个元素忽略掉
说明一个问题: v-for 的优先级大于v-if ,所有v-if才能使用v-for的变量
任务
:
- 初始化一个Vue实例
- 定义一个 list:[ 4,4,3,2,22,2,4643,443,44,34,5,3 ]
3 将大于10 的列表渲染出来 使用v-for 和v-if
**
路径
**参照代码示例
基础-系统指令-v-bind的基本介绍
目标
掌握v-bind的绑定一般属性的用法
- 作用:绑定标签上的任何属性
- 场景: 当标签上的属性是变量/动态/需要改变的
- 语法: <p :属性=“数据对象中的属性名”>
<p v-bind:id="ID"></p> // ID为数据对象中的变量值 or <p :id="ID"></p> // 简写 <p :class="Class"></p> // class的字符串语法
任务
- 实例化一个Vue实例
- 定义一个数据 id: test src:
- 将id属性绑定给到p标签id属性 src属性绑定给img标签src属性
**
路径
**参照实现代码
基础-系统指令-v-bind-绑定class-对象语法
目标
掌握v-bind绑定class的对象语法
- 绑定class对象语法 :class="{ class名称": 布尔值 }"
<p :class="{left:showClass}">内容</p>
注意: 绑定class和原生class会进行合并
基础-系统指令-v-bind-绑定class-数组语法
**
目标
**掌握v-bind绑定class数组语法
- 绑定class数组语法 :class="[class变量1,class变量2…]"
<p :class="[activeClass,selectClass]" class="default">内容</p>
基础-系统指令-v-bind-绑定style-对象语法
目标
:掌握v-bind绑定style对象语法
- 语法: :style="{css属性名: 变量}"
<p :style="{ fonSize:fontsize}"></p>
注意 css属性名 例如 font-size要写成 fontSize 以此类推
原有的style不受影响
基础-系统指令-v-bind-绑定style-数组语法
目标
掌握v-bind绑定style的数组语法
- 语法: :style="[对象1,对象2…]"
注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则
基础-系统指令-v-model-基础用法
基础-系统指令-v-model-语法糖原理
目标
:掌握 v-model的实现原理,分析
表单元素数据改变 => 数据发生改变
- 数据改变 => 页面数据变化
<div id="app"> <input type="text" @input="changeInput" :value="name" /> { { name }} </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { name: "张三" }, methods: { changeInput(event) { // 值发生改变时 会触发这个方法 // 去value值 this.name = event.target.value; } } }); </script>
基础-系统指令-v-model-绑定其他表单元素
**
目标
**掌握 v-model绑定其他表单元素的方式表单元素: input textarea checkbox radio select
注意 checkbox在input标签中需要给定value值
所有表单元素一旦绑定了 v-model 就会忽略掉 原有的value值 checked值 selected值 需要从数据对象中取默认值
任务
:
- 实例化一个Vue实例
- input 绑定 属性 nameInput,实现input同步
- textarea 绑定 属性 nameTextArea 实现textarea同步
- checkbox 绑定一个属性 nameCheckbox 实现 checkbox同步
- 多个 checkbox绑定同一个属性 nameCheckboxs 实现 checkbox同步 北京 上海 天津
- radio 绑定属性 nameRadio 实现同步 男 女
- select 绑定属性 nameSelect 实现同步 北京 上海 天津
**
路径
**参照实例代码
基础-系统指令-v-cloak
**
目标
**学会使用v-cloak解决页面闪烁问题
- 场景: 解决页面初次渲染时 页面模板闪屏现象
1. 编写元素标签
2. 写入v-cloak指令
3. 将v-cloak指令 属性加上style
注意 可以一次性 将v-cloak引用在实例视图上 避免多次写入标签
<div v-cloak id="app"> <p>{ { name }}</p> <p>{ { name }}</p> <p>{ { name }}</p> <p>{ { name }}</p> <p>{ { name }}</p> <p>{ { name }}</p> </div>
[v-cloak] { display: none; }
任务
- 使用v-cloak解决页面闪烁问题
基础-系统指令-v-once
**
目标
**掌握 使用v-once命令,只渲染一次页面视图
作用: 使得所在元素只渲染一次
场景:静态化数据
任务
- 使用v-once标记标签P
- 测试更新数据时 p标签是否会渲染
基础-表格案例-添加商品
目标- 任务
实现在表格案例中 添加商品
路径
: 添加商品1. 绑定input 2. 按钮绑定事件 3. 定义添加方法 4. 数组中添加元素 5. 清空input内容 6. 根据input内容框决定按钮是否可点击
基础-过滤器-过滤器的文档分析
目标
: 了解过滤器的功能 作用以及作用场景
场景: data中的数据格式(日期格式/货币格式/大小写等)需要数据时
使用位置:{ {}}和v-bind=“表达式”
具体用法:{ {msg | 过滤器名字}}
分类:本地(局部)和全局 全局 所有实例均可使用 Vue
本地: 通过选项filters
全局: 在newVue上面 Vue.filter()
基础-过滤器-全局过滤器
目标
:掌握如何注册一个全局过滤器
- 在创建 Vue 实例**
之前
**定义全局过滤器Vue.filter()- Vue.filter(‘该过滤器的名字’,(要过滤的数据)=>{return 对数据的处理结果});
- 在视图中通过{ {数据 | 过滤器的名字}}或者v-bind使用过滤器
Vue.filter("toUpper", function(value) { return value.charAt(0).toUpperCase() + value.substr(1); });// 过滤器核心代码
注意 可使用多种表达式形式 全局过滤器 多个Vue实例可共享使用
<p>{ { text | toUpper }}</p> // 常规用法 or <p> { { text .split("") .reverse() .join("") | toUpper }} </p> // 将字符串翻转
基础-过滤器-局部过滤器
**
目标
**掌握如何注册一个局部过滤器
- 在vm对象的选项中配置过滤器filters:{}
- 过滤器的名字: (要过滤的数据)=>{return 过滤的结果}
- 在视图中使用过滤器: { {被过滤的数据 | 过滤器的名字}}
filters: { toUpper(value) { return value.charAt(0).toUpperCase() + value.substr(1); } }
注意 局部过滤器只能用在当前Vue实例视图上
基础-过滤器-传参数和串联使用
**
目标
**掌握在过滤器中如何传参数 和串行使用
- 过滤器可以传递参数,第一个参数永远是前面传递过来的过滤值
- 过滤器也可以多个串行起来并排使用,
// index为传入的参数 toUpper(value, index) { return value .split("") .map(function(item, i) { if (i === index) { return item.toUpperCase(); } return item; }) .join(""); } } // 根据传入的索引找到对应的字母换成大写字母
<p>{ { text | toUpper(2) }}</p>
- 串行使用 过滤器
<p>{ { text | toUpper(2) | reverse }}</p> // 语法 多个过滤器用 | 分割
基础-表格案例-使用过滤器完成日期 格式处理
**
目标-任务
**利用所学过滤器知识 完成日期格式处理 路径:实现列表中日期的格式化
1 . 引入 第三方格式化日期插件
2 . 定义格式化日期过滤器
3. 实现其格式化功能
4 . 使用过滤器
formatDate(value, format) { return moment(value).format(format); } // 过滤器代码
基础-ref 操作 DOM
**
目标
**掌握如何通过ref来获取dom对象
作用: 通过ref特性可以获取元素的dom对象
使用: 给元素定义 ref属性, 然后通过$refs.名称 来获取dom对象
<input type="text" ref="myInput" /> // 定义ref
focus() { this.$refs.myInput.focus(); } // 获取dom对象 聚焦
基础-自定义指令-全局自定义指令
**
目标
**掌握如何全局自定义一个指令
- 使用场景:需要对普通 DOM 元素进行操作,这时候就会用到自定义指令
- 分类:全局注册和局部注册
- 在创建 Vue 实例之前定义全局自定义指令Vue.directive()
- Vue.directive(‘指令的名称’,{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
- 在视图中通过"v-自定义指令名"去使用指令
// 定义指令
// 自定义指令是不需要加v-前缀的
// 第二个参数为一个对象 对象中要实现 inserted的方法
// inserted中的参数为当前指令所在元素的dom对象
Vue.directive("focus", {
inserted(dom) {
dom.focus();
}
});
基础-自定义指令-局部自定义指令
**
目标:
**掌握如何自定义一个局部指令directives: { focus: { inserted(dom) { dom.focus(); } } } // 局部自定义指令实现
基础-表格案例-使用自定义指令完成自动获取焦点功能
**
目标-任务
**在表格案例中 实现自定义指令 完成 输入框自动聚焦功能**
路径
**参照实现代码
基础-实例选项-计算属性-文档分析
- 表格案例中 实际显示的数据 依赖 原有list和 input输入框的值
目标
掌握实例选项中计算属性的基本含义
- 场景:当表达式过于复杂的情况下 可以采用计算属性 对于任何复杂逻辑都可以采用计算属性
- 使用: 在Vue实例选项中 定义 computed:{ 计算属性名: 带返回值的函数 }
- 说明: 计算属性的值 依赖 数据对象中的值 数据对象发生改变 => 计算属性发生改变=> 视图改变
- methods 和 计算属性的区别
- methods 每次都会执行
- 计算属性 会每次比较更新前后的值 如果前后一致 则不会引起视图变化
- methods每次都会执行 性能较计算属性较差
基础-实例选项-计算属性-基本使用
目标
掌握如何使用计算属性完成基本业务 示例: 通过计算属性实现字符串的翻转
1 定义数据对象
2 实现计算属性
3 使用计算属性
-->
computed: { nameReverse() { return this.name .split("") .reverse() .join(""); } } // 定义计算属性
当 数据对象中 name发生变化时 计算属性也会重新计算计算=> 改变页面视图
计算属性 和 methods方法的区别:
计算属性不需要调用形式的写法 而methods方法必须采用 方法() 调用的形式
表格案例-用计算属性实现商品搜索
**
目标-任务
**在表格案例中使用计算属性实现商品搜索
- 搜索框内容变化=> 列表内容变化
- 计算属性: 依赖 输入值和 列表的变化实现
使用计算属性实现品牌搜索
1 定义 品牌搜索的内容
2 定义计算属性
3 实现计算属性的筛选功能
4 计算属性替换原有得列表数据
computed: { // 实现计算属性 newList() { if (!this.searchValue) return this.list; return this.list.filter(item => { return item.name.startsWith(this.searchValue); }); } }
当data中无法完成复杂逻辑时,通通可以在**计算属性
**中实现