Vue基础(必会)

基础 -vue 能做什么

1. 不用操作 DOM 2. 单页面应用 web 项目 (SinglePageApplication 项目，例如 https://worktile.com/ ）简称 :SPA 3. 传统网站开发 一般来说 需求不大 4. 当下各种新框架都采用了类似 Vue 或者类似 React 的语法去作为主语法 , 微信小程序 /MpVue..... 结论 : 掌握 Vue 的开发语法 相当于掌握了新的开发模式 , 可以适应目前绝大多数的技术环境

基础 -vue 特点

1. 数据驱动视图 可以让我们只关注数据 2. MVVM 双向绑定 3. 通过 指令 增强了 html 功能 4. 组件化 复用代码 5. 开发者一般只需要关注数据

基础 -Vue-API

Vue 官方文档 Vue 开源项目汇总 Vue.js 中文社区 所有关于 Vue 的问题都可以通过 查阅文档 解决

基础 -vue 三种安装方式

1. 直接下载源码然后通过路径引入 开发版本： https://vuejs.org/js/vue.js 生产版本： https://vuejs.org/js/vue.min.js 2. 在线 cdn 引入的方式 < script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" >< /script> 3. 采用 npm 安装的方式 // 现状 : 都会采用 npm 的方式来进行正式项目开发 npm install vue 注意 : Vue.js 不支持 IE8 及其以下版本

基础 -HelloWorld

步骤 : 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 中的数据 // 1. 我是 Vue 所管理的视图 div #app < div id = "app" > // 5. 在视图里使用 Vue 实例中 data 里面的 list 数据 < p > {{ list }} < /p> < /div> // 2. 引入 vue.js < script src = "./vue.js" >< /script> < script > // 3. 实例化 Vue 对象 new Vue ({ // 4. 设置 Vue 实例的选项：如 el 、 data... el : '#app' , data : { list : ' 我是模拟发起 ajax 请求后从服务端返回的数据 ' } }) < /script>

基础 - 实例选项 -el

作用 : 当前 Vue 实例所管理的 html 视图 值 : 通常 是id选择器 ( 或者是一个 dom 对象 ) 注意！！！！ 不要让 el 所管理的视图是 html 或者 body!!!!

基础 - 实例选项 -data

掌握 data 基本用法 Vue 实例的 data( 数据对象 ) ，是响应式数据 ( 数据驱动视图 ) 1. data 中的值 { 数据名字 : 数据的初始值 } 2. data 中的数据 msg/count 可以在视图中通过 {{msg/count}} 访问数据 3. data 中的数据也可以通过实例访问 vm.msg 或者 vm.$data.msg 4. data 中的数据特点 : 响应式的数据 ->data 中的数据一旦发生变化 -> 视图中使用该数据的位置就会发生变化 路径 任务 1. 将数据对象中 count 初始值设置为 100 2. 通过 vm. 属性的方式打印 以上三个属性 3. 通过 {{ 变量名 }} 的方式 将以上三个属性显示在页面上 4. 通过 vm. 属性 = 赋值的方式，改变 count 为 300 、 msg 为 " 铁蛋儿最帅 " 、数组为 [1,2,3,4]

基础 - 实例选项 -methods

掌握实例选项 methods 中方法的使用及注意事项 methods 其值为一个对象 new Vue ({ // el: '#app' , id 选择器 // el: '.app', class 选择器 el : document . getElementById ( "#app" ) // dom 对象 }) let vm = new Vue ({ el : "#app" , data : { msg : 'abc' , count : 100 list : [ 1 , 2 , 3 ] } }) vm . msg = 200 console . log ( vm ) console . log ( vm . msg ) console . log ( vm . $data . msg ) 可以直接通过 VM 实例访问这些方法，或者在 指令表达式中使用 。 方法中的 this 自动绑定为 Vue 实例。 methods 中所有的方法 同样也被代理到了 Vue 实例对象上 , 都可通过 this 访问 注意， 不应该使用箭头函数来定义 method 函数 。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例 let vm = new Vue ({ el : "#app" , data :{ name : "Hello world" , name2 : "Hello world2" }, methods :{ // 常规函数写法 fn1 : function (){ console . log ( this . name ) this . fn2 () }, // es6 函数简写法( 推荐 ) fn2() { console.log(this.name2) } } }) 任务 : 1. 实例化一个 Vue 实例 , 2. 定义两个属性 name1 name2 初始值分别为 Hello world Hello world2 3. 定义两个方法 fn1 fn2 两个方法中分别输出 name1 和 name2 的值 路径 : 参照代码示例

基础 - 术语解释 - 插值表达式 ( 重要 )

理解和使用插值表达式 作用 : 会将绑定的数据实时的显示出来 形式 : 通过 {{ 插值表达式 }} 包裹的形式 用法 :{{js 表达式、三元运算符、方法调用等 }} {{ a }} {{a == 10 }} {{a > 10}} {{a + b + c}} {{a.split('').reverse().join('')}} {{a > 0 ? " 成功 " : " 失败 "}} // 错误写法 <!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if ( ok ) { return message } }} // 正确写法 <!-- 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> 任务 1. 初始化一个 Vue 实例 2. 在 data 中定义 name: " 张三 " count: 2 , list:'123' 3. 要求根据 data 中的数据用插值表达式输出 张三 , 2, 321,

基础 - 术语解释 - 指令 ( 重要 )

指令 (Directives) 是带有 v - 前缀的特殊特性。 指令特性的值预期是 单个 JavaScript 表达式 ( v - for 是例外情况，稍后我们再讨论 ) 。 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。 指令位置 : 起始标签 代码示例 : <p v-text = "name" > 内容 </p> 任务 : 1. 初始化一个 Vue 实例 2. 定义一个 data 属性 name: 我是内容 3. 使用 v-text 指令将 data 内容显示在 p 标签上

基础 - 系统指令 -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> <!-- v-html 指令的值 ( 包括标签字符串 ) 会替换掉标签的内容 --> <p v-html = "str" ></p> <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> 任务 1. 初始化一个 vue 实例 2. 定义一个 数据对象 name: 张三 3. 分别使用 v-text 和插值表达式将张三显示在 p 标签上 4. 定义一个数据对象 nameHtml: 内容 , 使用 v-html 将内容显示在 p 标签上 , 并且内容为红色

基础 - 系统指令 -v-if 和 v-show

使用 : v-if 和 v-show 后面跟着表达式的值是布尔值 ，布尔值来决定该元素显示隐藏 注意 : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏 v - if 有更高的切换开销 v - show 有更高的初始渲染开销。 如果需要非常频繁地切换，则使用 v - show 较好 . 如果在运行时条件很少改变，则使用 v - if 较好 . 任务 : 1. 定义一个 Vue 实例 2. 定义一个布尔型变量 isShow 3. 分别使用 v-if 和 v-show 来条件渲染 P 标签内容

基础 - 系统指令 -v-on 绑定事件

使用 : 第一种:v-on:事件名="方法名" 第二种:@事件名="方法名"的方式 // v-on:xx 事件名 =' 当触发 xx 事件时执行的语句 ' < button v - on : click = "fn" > 按钮 < /button> // v-on 的简写方法 < button @ click = "fn" > 按钮 < /button> 修饰符 使用 :@ 事件名 . 修饰符 =" 方法名 " .once - 只触发一次回调 .prevent - 调用 event.preventDefault() 阻止默认事件 // v-on 修饰符 如 once: 只执行一次 < button @ click . once = "fn" > 只执行一次 < /button> // v-on 修饰符 如 prevent: 阻止默认事件 < button @ contextmenu . prevent = "fn" > 阻止默认事件 < /button> 事件对象 ( 扩展 ) 第一种 : 方法名中采用 $event 的方式传形参 第二种 : 直接写事件名 默认第一个参数为 event 事件参数 任务 : 1. 初始化一个 Vue 实例， 2. 添加一个 button 按钮 定义 data 中 name 为 hello world 注册 button 点击事件 获取当前 data 对象中的 name 值 输出 3. 添加一个 input 文本框 注册 input 值改变事件 值改变时获取 文本框内容 ( 扩展）

基础 - 系统指令 -v-for( 数组 )

v - for 指令基于一个数组来渲染一个列表 v-for 语法 item in items 或者 item of items 其中 items 是源数据数组 而 item 则是被迭代的数组元素的别名。 // 第一种用法： < ul > <li v-for="item in items"> {{ item . name }} < /li> < /ul> // data 中的数组 data : { items : [ { name : ' 大娃 ' }, { name : ' 二娃 ' } ] } // 第二种用法: v-for 还支持一个可选的第二个参数，即当前项的索引 < ul > < li v - for = "(item, index) in items" > {{ index }} {{ item . name }} < /li> < /ul> 注意 ： v-for 写的位置 应该是重复的标签上 不是其父级元素上 需要注意 任务 : 1. 初始化一个 Vue 实例 2. 定义 data 对象中 list:[' 北京 ',' 上海 ',' 天津 '] 3. 将 list 中的内容 v-for 循环在 li 标签上显示 路径 参照代码示例

基础 - 系统指令 -v-for （对象）

第一种用法 : // items 为对象 item 为当前遍历属性对象的值 v - for = "item in items" 第二种用法 : //item 为当前遍历属性对象的值 key 为当前属性名 index 为当前索引的值 v - for = "(item, key, index) in items" 任务 : 1. 初始化一个 Vue 实例 2. 定义 data 对象中 person: { name: ' 张三 ', sex:' 男 ',age: 18 } 3. 将 person 中的内容 v-for 循环在 li 标签上显示 路径 参照代码示例

基础 - 系统指令 -v-for （ key 属性）（非常重要的面试题） 基础 - 系统指令 -v-for （ key 属性）（非常重要的面试题）

场景 : 列表数据变动会导致 视图列表重新更新 为了提升性能 方便更新 需要提供一个属性 key // 使用 v-for 时 建议给每个元素设置一个 key 属性 （必须加上） // key 属性的值 要求是每个元素的唯一值 （唯一 索引值(index) ） // 好处 :vue 渲染页面标签 速度快 // 数组 < li v - for = "(v,i) in arr" : key = "i" > {{ v }} < /li> // 对象 < li v - for = "(v,k,i) in json" : key = "i" > {{ v }} - {{ k }} < /li> 任务 : 1. 初始化一个 Vue 实例 2. 定义 data 对象中 list:[' 北京 ',' 上海 ',' 天津 '] 3. 将 list 中的内容 v-for 循环在 li 标签上显示 4. 给每个 li 标签赋值 key

基础 - 系统指令 -v-bind 基本用法

作用 : 绑定标签上的任何属性 场景 : 当标签上的属性是变量 / 动态 / 需要改变的 用法 : // ID 为数据对象中的变量值 <p v-bind:id = "ID" ></p> // 简写 <p :id = "ID" ></p>

基础 - 系统指令 -v-bind 绑定 class( 对象 )

用法 : 绑定 class 对象语法 :class="{ class 名称 : 布尔值 }" <p class = "obox" :class = "{obox:isBn}" > 内容 </p> // isBn 为 data 选项中的属性 注意 : 绑定 class 和原生 class 会进行合并 ( 但是不会合并重复的 )

基础 - 系统指令 -v-bind- 绑定 class( 数组 )

绑定class数组 语法 :class="[a,b]" a 、 b 为 data 属性的 key data 中 key 对应的 value 为 class 名字 <p :class = "[a,b]" > 内容 </p> data:{ a:'obox' ， b:'left' }

基础 - 系统指令 -v-bind- 绑定 style （对象）

语法 :style="{css 属性名 : 属性值 }" <p :style = "{color:a,fontSize:b}" ></p> //a 、 b 为 data 属性的 key data: { a: 'red', b: '30px' }, 注意 css 属性名 例如 font-size 要写成 fontSize 以此类推 原有的 style 会覆盖

基础 - 系统指令 -v-bind- 绑定 style （数组）

// 语法 : < div : style = "[a,b]" >< /div> // a,b 为 data 的属性 data : { a : { color : "red" }, b : { fontSize : "30px" } } 注意 对象可以是多个属性的 集合 同样里面的 css 属性需要遵从小驼峰命名的规则

基础 - 系统指令 -v-model- 基础用法

作用 : 表单元素的绑定 特点 : 双向数据绑定 数据发生变化可以更新到界面 通过界面可以更改数据 v - model 绑定表单元素，会忽略所有表单元素的 value 、 checked 、 selected 特性的初始值 表单元素会将 Vue 实例的 data 中的数据作为数据来源，所以应该在 data 选项中声明初始值。 // 表单中设置 value 值没用 v-model 会忽略 < input type = "text" v - model = "msg" value = "zhang" > < p > {{ msg }} < /p> // 在 data 中设置 msg data : { msg : 'zhangsan' }

基础 - 系统指令 -v-model- 原理及实现

分析 表单元素绑定的数据改变 => data数据发生改变=> 页面数据变化 < p > {{ msg }} < /p> < input type = "text" :value = "msg" @ input = "fn($event)" > data : { msg : 'abc' }, methods : { fn ( e ) { //msg= 最新的 value this . msg = e . target . value } }

基础 - 系统指令 -v-model- 绑定其他表单元素

表单元素 : input textarea checkbox radio select 注意 checkbox 在 input 标签中需要给定 value 值 任务 : 1. 实例化一个 Vue 实例 2. input 绑定 属性 nameInput, 实现 input 同步 3. textarea 绑定 属性 nameTextArea 实现 textarea 同步 4. checkbox 绑定一个属性 nameCheckbox 实现 checkbox 同步 5. 多个 checkbox 绑定同一个属性 nameCheckboxs 实现 checkbox 同步 北京 上海 天津 6. radio 绑定属性 nameRadio 实现同步 男 女 7. select 绑定属性 nameSelect 实现同步 北京 上海 天津

基础 - 系统指令 -v-cloak

场景 : 解决页面初次渲染时 页面模板闪屏现象 1. 写入 v-cloak 指令 2. 在 style 里面加给 v-cloak 加上 display: none; 注意 : 避免多次写入标签 可以一次性 将 v-cloak 引用在实例视图上 <style> [v-cloak] { display: none; } </style> <div id = "app" v-cloak > {{msg}} </div>

基础 - 系统指令 -v-once

作用 : 指令所在元素只渲染一次 < p v - once > {{ msg }} < /p> < input type = "text" v - model = "msg" >

基础 - 过滤器 - 过滤器的分析

场景 : 格式化 data 数据 ( 日期格式 / 货币格式 / 大小写等 ) 分类 : 本地 ( 局部 ) 和全局 全局是所有实例均可使用 本地 : // 组件的选项中定义本地的过滤器 filters : { 过滤器名字 : function ( value ) { return ... . } } 全局 // 如何注册一个全局过滤器 Vue . filter ( " 过滤器名字 " , function ( value ) { return ...... }); 使用 : // 过滤器应该被添加在尾部 每个过滤器用管道符分隔 // 第一种用法在双花括号中 {{ 数据 | 过滤器名字 }} // 第二种用法在 v-bind 中 < div v - bind : id = " 数据 | 过滤器名字 " >< /div>

基础 - 过滤器 - 过滤器的基本用法

1. 在创建 Vue 实例 之前 定义全局过滤器 Vue.fifilter() 2. 在实例的 fifilter 选项中定义局部过滤器 3. 在视图中通过 {{ 数据 | 过滤器名字 }} 或者 v-bind 使用过滤器 // 如何注册一个全局过滤器 Vue . filter ( " 过滤器名字 " , function ( value ) { return value . charAt ( 0 ). toUpperCase () + value . substr ( 1 ); }); // 如果注册一个局部过滤器 filters : { 过滤器名字 : function ( value ) { return value . charAt ( 0 ). toUpperCase () + value . substr ( 1 ); } } 任务 : 注册一个全局或者局部过滤器 , 实现 abc 转成 Abc 的功能

基础 - 过滤器 - 传参数和串联使用

过滤器可以传递参数 , 接收的第一个参数永远是前面传递过来的过滤值 过滤器也可以多个串行起来并排使用 , // 多个过滤器用 | 分割 < p > {{ count | a ( ' 元 ' ) | b }} < /p> // 定义过滤器 filters ： { // 第一个参数永远是前面传递过来的过滤值 a : function ( val , y ){ // val 是 count 值 // y 是 ‘ 元 ’ } } 任务 : 实现一个过滤器 , 假如是数字 100 过滤完出来是 100 元人民币

基础 - 表格案例 - 使用过滤器完成日期格式处理

路径 : 格式化需要借助第三方插件 1 . 引入第三方格式化日期插件 moment.js 2 . 定义格式化日期过滤器 3. 实现其格式化功能 4 . 使用过滤器 // 全局过滤器代码 Vue . filter ( "fmtDate" , function ( v ) { return moment ( v ). format ( 'YYYY-MM-DD h:mm:ss a' ) })

基础 -ref 属性 - 获取 DOM

使用 : 给元素定义 ref 属性 , 然后通过 $refs. 名称 来获取 dom 对象 <input type = "text" ref = "txt" > // 定义 ref // 获取 DOM 的 value 值 methods : { getVal () { // 获取 dom console . log ( this . $refs . txt ) } } 任务 通过ref功能,点击按钮时获取input的value值

基础 - 自定义指令 - 全局自定义指令

使用场景 : 需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令 分类 : 全局和局部 全局自定义指令 : 1. 在创建 Vue 实例之前定义全局自定义指令 Vue.directive(参数1，参数2) 第一参数是指令名称 第二参数是一个对象 对象中要实现inserted方法 inserted 方法中的参数为当前指令 所在元素的 DOM 对象 // 1. 注册一个自定义指令 Vue . directive ( ' 指令名称 ' , { inserted ( 参数 ){ // 参数为使用指令的 DOM // 操作 } }) // 2. 使用自定义指令 < input type = "text" v - 指令名称 > // 示例 ( 全局自动聚焦的自定义指令 ) Vue . directive ( "focus" , { inserted ( dom ) { dom . focus (); } }); // 使用自定义指令 < input type = "text" v - focus > 任务 实现一个可以自动聚焦 input 的自定义指令 v-focus

基础 - 自定义指令 - 局部自定义指令 基础 - 自定义指令 - 局部自定义指令

// 局部指令在 vue 实例内部定义 directives : { "focus" : { inserted ( dom ) { dom . focus (); } } } // 调用 < input type = "text" v - focus > 任务 实现一个可以自动聚焦 input 的局部自定义指令 v-focus

基础 - 实例选项 - 计算属性 - 基本使用

使用 : 在 Vue 实例选项中 定义 computed:{ 计算属性名: 带返回值 的函数 } 示例 : 通过计算属性实现字符串的翻转 1. 定义数据对象 2. 实现计算属性方法 3. 使用计算属性 data: { message: 'hello' }, computed: { reverseMessage: function () { // this 指向 vm 实例 return this.message.split('').reverse().join('') } } // computed 里的函数直接用 不加 () 但是必须得return {{ message }} {{ reversedMessage }} ** 计算属性 和 methods 方法的区别 :** 1. 计算属性不需要调用形式的写法 而 methods 方法必须采用 方法 () 调用的形式 2. 计算属性依赖 data 中的数据变化 , 如果 data 并没有发生变化 , 则计算属性则会取缓存的结果 , 3. methods 不论 data 变化与否 只要调用 都会重新计算 **` 注意 :`** 当数据对象中 message 发生变化时 计算属性也会重新计算计算 => 改变页面视图

基础 - 实例选项 -watch- 基本使用

特性 : 监听 data 数据变化时 自动触发函数 计算属性和 watch 区别： 计算属性 必须要有返回值 所以说不能写异步请求 因为有人用它的返回值(插值表达式) watch选项中可以写很多逻辑 不需要返回值 因为没有人用它的返回值 // 基本用法 data : { msg : 'abc' }, watch : { // data 中的属性 msg 发生改变时 自动触发该函数 msg ( newV , oldV ) { console . log ( newV , oldV ) } }

基础 - 组件 - 组件特点 组件和实例相似之处 : data/methods/computed/watch 等一应俱全 注意： data 和 Vue 实例的区别为 组件中data为一个函数且需要返回一个对象 组件没有 el 选项 template 代表其 页面结构 (有且只要一个根元素) 每个组件都是 独立 的 运行作用域、数据、逻辑没有任何关联

基础 - 组件 - 全局组件

全局和局部 : 注册方式不同 应用范围不同 注意 : 注意命名规范 路径 : 实现一个全局组件 1. 定义一个全局组件 2. 写入组件选项 3. 使用组件 // 注册组件名称 推荐 小写字母 加横向的结构 Vue . component ( "content-a" , { template : `<div> {{count}} </div>` , data () { return { count : 1 }; } }); < content - a >< /content-a> // 注意 data 中必须为一个返回对象的函数 // template 必须有且只有一个根元素

基础 - 组件 - 局部组件

局部组件的实现 1. 在实例选项 compoents 中定义局部组件名字 2. 在组件名字相对应的对象中定义选项 (template 、 data() 、 .....) 3. 在实例视图中使用组件

// 1. 实例选项compoents中定义局部组件名字

components : { // 2.在组件名字相对应的对象中定义选项(template、data()、.....) "z-j": { template: `<div>我是z-j组件--{{msg}}</div>`, data() { return { msg: "abc" } } } } // 3. 在实例视图中使用组件 < div id = "app" > <z-j></z-j> < /div>

基础 - 组件 - 组件嵌套

1. 全局组件 嵌套 全局组件 2. 局部组件 嵌套 全局组件 // 全局组件 Vue . component ( 'child-a' , { template : "<div> 我是 child-a 组件 </div>" }) Vue . component ( 'child-b' , { template : "<div> 我是 child-b 组件 </div>" }) // 全局嵌套全局（此时 child-a 和 child-b 是 parent-a 的子组件） Vue . component ( 'parent-a' , { template : `<div> <child-a></child-a> <child-b></child-b> </div>` }) // 局部嵌套全局 （此时 child-a 和 child-b 是 com-a 的子组件 ) components : { "com-a" : { template : ` <div> <child-a></child-a> <child-b><child-b> </div> ` }} 注意 : 组件嵌套和全局及局部组件没关系

基础 - 组件 - 组件通信的几种情况

组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信 组件之间的通信根据关系的可以分为 : 1. 父子组件通信 父组件到子组件 子组件到父组件 2. 兄弟组件通信

基础 - 组件 - 父子组件传值-props 属性

父子组件的传值有多种方法 , 兄弟组件的通信也有自己的写法 1. 子组件的 props 属性值是一个数组 2. 数组中的值 绑定为子组件上的属性 用来接受父组件的传值 3. 在子组件的 template 中就可以使用 绑定的属性（ msg ）拿到父组件传递的值 // 调用组件 < div id = "app" > < child - a : msg = "msgParent" >< /child-a> < /div> // 子组件 Vue . component ( "child-a" , { template : ` <div> 我是子组件 {{count}} 是自己的 data 中的数据 count {{msg}} 是来源于外部组件的数据 </div> </div>` , data () { return { count : 100 } }, props : [ "msg" ] }) // 父组件 ( 根组件 ) new Vue ({ el ： '#app' data : { msgParent : " 我是父组件 " } })

基础 - 组件 - 组件和模块的区别

模块：侧重于功能或者数据的封装 组件：包含了 template 、 style 和 script ，而它的 script 可以由各种模块组成

基础 - 单页应用 ( 简称 SPA)

传统模式 每个页面及其内容都需要从服务器一次次请求 如果网络差 , 体验则会感觉很慢 SPA 模式 , 第一次 加载 会将所有的资源都请求到页面 模块之间切换 不会再请求服务器 SPA 优点： 1. 用户体验好 , 因为前端操作几乎感受不到网络的延迟 2. 完全组件化开发 , 由于只有一个页面 , 所以原来属于一个个页面的工作被归类为一个个 组件 . SPA 缺点 : 1. 首屏 加载慢 ( 可以只加载所需部分 ) 2. 不利于 SEO （ 服务端渲染 可以解决） 3. 开发难度高 ( 框架 )

基础 - 单页应用 SPA- 实现原理

原理 : 可以通过页面地址的锚链接来实现 spa hash( 锚链接 ) 位于链接地址 # 之后 hash 值的改变 不会触发 页面刷新 hash 值是 url 地址的一部分 , 会存储在页面地址上 我们可以获取到 可以通过 事件监听 hash 值得改变 拿到了 hash 值 , 就可以根据不同的 hash 值进行不同的 内容切换

基础 - 路由 -vue-router-

Vue-Router 是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，让构建 单页面 应用变得简单 实现根据不同的请求地址 而 显示不同的内容 如果要使用 vue 开发项目 , 前端路由功能 必须使用 vue-router 来实现 用法 : 1. CDN 2. 本地文件 3. npm 注意 : 本地文件引入 vue-router ，一定要 先引入vue.js，再引入vue-router

基础 - 路由 -vue-router 的基本用法

1. 导入 vue 和 vue-router 2. 设置 HTML 中的内容 3. 实例化路由对象 , 配置路由规则 4. 创建路由对应的组件 5. 把 router 实例挂载到 vue 实例上 2. 设置 HTML 中的内容 <!-- router-link 最终会被渲染成 a 标签， to 指定路由的跳转地址 --> <router-link to = "/users" > 用户管理 </router-link> <router-link to = "/home" > 首页展示 </router-link> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> // 3. 配置路由规则 var router = new VueRouter ({ routes : [ { path : '/users' , component : Users } { path : '/home' , component : Home } ] }); // 4. 创建组件 let Home = { template : '<div> 这是 Home 内容 </div>' }; let Users = { template : '<div> 这是用户管理内容 </div>' }; // 5. 把 router 实例挂载到 vue 实例上 var vm = new Vue ({ el : '#app' , router });

基础 - 路由 -vue-router- 动态路由

点击 列表页 跳转到 详情页 时 , 跳转的链接需要携带参数 , 会导致 path 不同 当 path 不同却需要对应同一个组件时 , 需要用到动态路由这一概念 步骤： 1. 标签上传入不同的值 < router - link to = "/item/8" > 小米电视 < /router-link> < router - link to = "/item/9" > 华为电视 < /router-link> < router - view > < /router-view> 2. 路由规则中 尾部 添加动态参数 id { path : '/item/:id' , component : Items } 3. 在组件内部可以使用 $route.params 获取当前路由对象的动态参数 let Items = { template : '<div> 我是商品详情页 {{ $route.params.id }}</div>' , mounted ： { console . log ( this . $route . params . id ); } }

基础 - 路由 -vue-router-to 属性赋值

to 有多种赋值方式 <!-- 常规跳转 --> <!-- <router-link to="/aaa">aaa</router-link> --> <!-- 变量 --> <!-- <router-link :to="bbb">bbb</router-link> --> <!-- 根据对象 name 跳转 --> （注意 :name 值是字符串） <!-- <router-link :to="{name:'ccc'}">ccc</router-link> --> <!-- 根据对象 path 跳转 --> （注意：必须得加上 / 不然容易错乱） <!-- <router-link :to="{path:'/ddd'}">ddd</router-link> --> <!-- 带参数的跳转 --> （注意获取参数 route 不要写成 router ） <!--<router-link :to="{name:'eee',params:{id:1}}"> 体育 </router-link> --> <router-view></router-view>

基础 - 路由 -vue-router- 重定向 基础 - 路由 -vue-router- 重定向

场景: 当希望某个页面被强制中转时 可采用 redirect 进行路由重定向 设置 path : "/bj" , redirect : "/sh" , // 强制跳转上海 component : { template : `<div> 体育 </div>` }

基础 - 路由 -vue-router- 编程式导航

场景 : 点击的时候路由实现跳转 methods : { goPage () { // 跳转到新闻页面 this.$router.push({ path : "/news" }); }}

基础 - 路由的激活样式

当前路由在导航中是拥有激活 class 样式的 审查导航元素 , 可以发现 激活样式 <a href = "#/bj" class = "router-link-exact-active router-link-active" > 北京 </a> 设置激活 class 样式即可

基础-路由-vue-router-嵌套路由

如果存在 组件嵌套 , 就需要提供多个视图容器 同时 ,router-link 和 router-view 都可以添加类名、设定样式 路径 : 1. 在原有的一级导航的 template 里面 配置 二级导航的 router-link 和 router-view 2. 在相对应的一级导航路由配置选项 children里面 配置 二级导航的路由和模板 path : '/music' , component : Music , // 子路由配置 在 children 选项 children : [{ path : 'lx' , component : Lx }, ... ]

任务

1. 实现一个嵌套路由

2. 第一级路由为 首页 、音乐、体育

3. 音乐下 二级路由为古典、 流行、爵士

过度动画

基本用法就是给我们需要动画的标签外面嵌套 transition 标签 ,并且设置name属性 Vue 提供了 transition 的封装组件，列表中更新 , 移除，新增 情形中，可以给任何元素和组件添加进 入 / 离开过渡 <transition name = "fade" > <div v-show = "isShow" class = "box" ></div> </transition> 6 中 class 状态 ： 进入 : 1. fade-enter ：进入的 初始状态 2. fade-enter-to: 进入的 过渡结束状态（ 2.1.8 版及以上） 3. fade-enter-active ：进入的 过渡效果 离开 : 1. fade-leave: 离开的 初始状态 2. fade-leave-to: 离开的 过渡结束状态（ 2.1.8 版及以上） 3. fade-leave-active ：离开的 过渡效果

基础 -vue-cli 工具 - 介绍

介绍: vue-cli 是一个 辅助开发工具 => 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 ... 作用: 可以为开发者提供一个 标准的项目开发结构 和配置 开发者不需要再关注其他 vue-cli 一个 命令行 工具,最新版本也支持 图形化 操作,可快速搭建大型网页应用

基础 -vue-cli- 安装

说明 : vue-cli 本质上是一个 npm 包 , 也需要通过 npm 去安装下载 npm i -g @vue/cli // 全局安装脚手架 默认安装的最新版本 4 .0 + 安装完成后 可通过 vue 命令 来进行检查 脚手架是否安装成功 查看版本 vue -V // 查看脚手架版本号 or vue --version // 和上面等价 问题 : 默认安装的 4.0+ 版本 , 但是企业很多还在用 2.0+ 版本 怎么破 ? 执行以下命令就可以 2.0 和 4.0 兼得 2.0 和 4.0 创建项目的命令是不一样的 npm install -g @vue/cli-init // 安装桥接工具 将 2.0 的功能补齐到目前的脚手架上 注意 : vue 生成的模板的有难有易 简单业务 => 简易模板 复杂业务 => 内容丰富模板

基础 -vue-cli- 创建项目

注意 : 文件目路径不能有中文 创建 : 采用 cli 2.0 的特性 ( 生成简易模板 ) 创建： 采用 cli 4.0 特性 ( 两种 默认 / 选填 ) 注意 4.0 + 创建项目时 有两种模式 , 一种 默认模式 , 一种选择模式 , 默认模式 : 一种标准的模板 选择模式 : 可以根据自己的需求选择需要的工具和模式

基础 -vue-cli- 项目目录解释

# 1.heroes 创建的项目名称 $ vue init webpack-simple heroes // webpack-simple 为模板名称 固定写法 # 2. 切换到当前目录 $ cd heroes # 3. 安装依赖 $ npm install # 4. 启动运行项目 $ npm run dev # 4.0 下创建项目 $ vue create heroes // create( 创建 ) 为关键字 # 切换到当前目录 $ cd heroes # 在开发模式下 启动运行项目 $ npm run serve module . exports = { lintOnSave : true , // 在保存代码的时候开启 eslint 代码检查机制 devServer : { // 实时保存、编译的配置段 open : true , // 自动开启浏览器 port : 12306 // 服务运行端口 } } |-- node_modules // 项目需要的依赖包 |-- public // 静态资源存储目录 | |-- index . html // 项目主容器文件 | |-- favicon . ico // 项目默认索引图片 |-- src | |-- assets // 放置一些静态资源文件，例如图片、图标、字体 | |-- components // 公共组件目录 | |-- views // 业务组件目录 | |-- App . vue // 顶层根基路由组件 | |-- main . js // 主入口文件 | |-- router . js // 路由配置文件 |-- . editorconfig // 代码规范配置文件 基础 - 回顾 -ES6 模块导入和导出 require 和 Es 模块化的区别

基础 -vue-cli- 简化模板代码

介绍 : 在 cli 开发模式下 , 一个 *.vue 文件就是一个组件 template 组件的页面结构 代表它的 html 结构 必须在里面放置一个 html 标签来包裹所有的代码 我们在其他地方写好了一个组件，然后就可以在当前 template 中引入 script 组件的逻辑结构及数据对象 style 组件的样式 就是针对我们的 template 里内容出现的 html 元素写一些样式 注意 : vue-cli 的作用就是让我们把精力放在业务编码上 , 一切准备的工作交给 vue-cli 去做 任务 1. 新建一个名为 Menu 的组件 2. 内容为 一个横向菜单 首页 新闻 体育 音乐 3. 菜单高 60px 水平居中 字体大小为 20px 颜色为 red 背景色 为 #CCCCCC 4. 实现组件在页面上展示

基础 - 案例优化 - 统一设置激活样式

router.js 的路由表上面加上 linkActiveClass : "active" , // active 为 bootstrap 中的 一个 class 样式