1.1. Vue的基本认识 1.1.1. 官网

1. 英文官网:https://vuejs.org/
   
2. 中文官网:https://cn.vuejs.org/
   

1.1.2. 介绍描述

1. 渐进式 JavaScript 框架
   
2. 作者: 尤雨溪(一位华裔前 Google 工程师)
   
3. 作用: 动态构建用户界面
   

1.1.3. Vue 的特点

1. 遵循 MVVM 模式
   
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
   
3. 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
   

1.1.4. 与其它前端 JS 框架的关联

1. 借鉴 angular 的模板和数据绑定技术
   
2. 借鉴 react 的组件化和虚拟 DOM 技术
   

1.1.5. Vue 扩展插件

1. vue-cli: vue 脚手架
   
2. vue-resource(axios): ajax 请求
   
3. vue-router: 路由
   
4. vuex: 状态管理
   
5. vue-lazyload: 图片懒加载
   
6. vue-scroller: 页面滑动相关
   
7. mint-ui: 基于 vue 的 UI 组件库(移动端)
   
8. element-ui: 基于 vue 的 UI 组件库(PC 端)
   

1.2. Vue的基本使用 1.2.1. 效果(01_HelloWorld/test.html)
01_helloworld.gif
1.2.2. 编码

Hello, {{username}}


1.2.3. 使用 vue 开发者工具调试
Vue.js devtools_3.1.2_0.crx
1.2.4. 理解 Vue 的 MVVM

文章图片

1.3.模板语法 1.3.1. 效果(02_模板语法/test.html)
02_模板语法.gif
1.3.2. 模板的理解

1. 动态的 html 页面
   
2. 包含了一些 JS 语法代码
   

a. 双大括号表达式
b. 指令(以 v-开头的自定义标签属性)
1.3.3. 双大括号表达式

1. 语法: {{exp}}
   
2. 功能: 向页面输出数据
   
3. 可以调用对象的方法
   

1.3.4. 指令一: 强制数据绑定

1. 功能: 指定变化的属性值
   
2. 完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
   
3. 简洁写法: :xxx=‘yyy’
   

1.3.5. 指令二: 绑定事件监听

1. 功能: 绑定指定事件名的回调函数
   
2. 完整写法:
   

v-on:keyup='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

3. 简洁写法:

@keyup='xxx' @keyup.enter='xxx'

1.3.6. 编码

1. 双大括号表达式{{msg}}
{{msg.toUpperCase()}}
2. 指令一: 强制数据绑定 访问指定站点
访问指定站点 2
访问指定站点 3
3. 指令二: 绑定事件监听 点我 点我 2

1.4.计算属性和监视 1.4.1. 效果(03_计算属性和监视/test.html)
03_计算属性和监视.gif
1.4.2. 计算属性

1. 在 computed 属性对象中定义计算属性的方法
   
2. 在页面中使用{{方法名}}来显示计算的结果
   

1.4.3. 监视属性

1. 通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性
   
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算
   

1.4.4. 计算属性高级

1. 通过 getter/setter 实现对属性数据的显示和监视
   
2. 计算属性存在缓存, 多次读取只执行一次 getter 计算
   

1.4.5. 编码

姓:
名:
姓名 1(单向):
姓名 2(单向):
姓名 3(双向):


1.6.条件渲染 1.6.1. 效果 (05_条件渲染/test.html)
05_条件渲染.gif
1.6.2. 条件渲染指令

1. v-if 与 v-else
   
2. v-show
   

1.6.3. 比较 v-if 与 v-show

1. 如果需要频繁切换 v-show 较好
   
2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
   

1.6.4. 编码

表白成功 表白失败 求婚成功 求婚失败
切换

1.7.列表渲染 1.7.1. 效果 (06_列表渲染/test.html)
06_列表渲染.gif 06_列表的过滤和排序.gif

1. 列表显示指令

数组: v-for / index
对象: v-for / key

2. 列表的更新显示

删除 item
替换 item

3. 列表的高级处理

列表过滤
列表排序
1.7.2. 编码 1

测试: v-for 遍历数组

• {{index}}--{{p.name}}--{{p.age}} -- 删除 -- 更新

测试: v-for 遍历对象

• {{ key }} : {{ value }}

1.7.3. 编码 2

• {{index}}--{{p.name}}--{{p.age}}

年龄升序 年龄降序 原本顺序

1.8.事件处理 1.8.1. 效果 (07_事件处理/test.html)
07_事件处理.gif
1.8.2. 绑定监听:

1. v-on:xxx=“fun”
   
2. @xxx=“fun”
   
3. @xxx=“fun(参数)”
   
4. 默认事件形参: event
   
5. 【VUE|第 1 章（ Vue 核心）】隐含属性对象: $event
   

1.8.3. 事件修饰符

1. .prevent : 阻止事件的默认行为 event.preventDefault()
   
2. .stop : 停止事件冒泡 event.stopPropagation()
   

1.8.4. 按键修饰符

1. .keycode : 操作的是某个 keycode 值的键
   
2. .keyName : 操作的某个按键名的键(少部分)
   

1.8.5. 编码

1. 绑定监听 Greet Greet2 Greet3 2. 事件修饰符百度一下

3. 按键修饰符

1.9.表单输入绑定 1.9.1. 效果 (08_表单输入绑定/test.html)
08_表单输入绑定.gif
1.9.2. 使用 v-model 对表单数据自动收集

1. text/textarea
   
2. checkbox
   
3. radio
   
4. select
   

1.9.3. 编码

用户名:
密码:
性别: 女 男
爱好: 篮球 足球 乒乓
城市: 未选择 {{ city.name }}
介绍:

1.10. Vue实例生命周期 1.10.1. 效果 (09_Vue 实例_生命周期/test.html)
09_Vue实例_生命周期.gif
1.10.2. 生命周期流程图

文章图片

1.10.3. vue 生命周期分析

1. 初始化显示

• beforeCreate()
  
• created()
  
• beforeMount()
  
• mounted()
  

2. 更新状态: this.xxx = value

• beforeUpdate()
  
• updated()
  

3. 销毁 vue 实例: vm.$destory()

• beforeDestory()
  
• destoryed()
  

1.10.4. 常用的生命周期方法

1. created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
   
2. beforeDestory(): 做收尾工作, 如: 清除定时器
   

1.10.5. 编码

destory vue{{msg}}


1.11.过渡&动画 1.11.1. 效果 (10_过渡&动画/test.html)
10_过渡&动画1.gif
10_过渡&动画2.gif
1.11.2. vue 动画的理解

1. 操作 css 的 trasition 或 animation
   
2. vue 会给目标元素添加/移除特定的 class
   
3. 过渡的相关类名
   

xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
1.11.3. 基本过渡动画的编码

1. 在目标元素外包裹
   
2. 定义 class 样式
   

指定过渡样式: transition
指定隐藏时的样式: opacity/其它
1.11.4. 编码 1

.fade-enter-active, .fade-leave-active { transition: opacity .5s } . fade-enter, .fade-leave-to { opacity: 0 } / * 可以设置不同的进入和离开动画 */ .slide-fade-enter-active { transition: all .3s ease; } . slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } . slide-fade-enter, .slide-fade-leave-to { transform: translateX(10px); opacity: 0; } Toggle1 hello
Toggle2 hello


1.11.5. 编码 2

.bounce-enter-active { animation: bounce-in .5s; } . bounce-leave-active { animation: bounce-in .5s reverse; } @ keyframes bounce-in { 0% { transform: scale(0); } 5 0% { transform: scale(1.5); } 1 00% { transform: scale(1); } }Toggle show
Look at me!


1.12.过滤器 1.12.1. 效果 (11_过滤器/test.html)
1.12.2. 理解过滤器

1. 功能: 对要显示的数据进行特定格式化后再显示
   
2. 注意: 并没有改变原本的数据, 可是产生新的对应的数据
   

1.12.3. 定义和使用过滤器

1. 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,…]){
// 进行一定的数据处理
return newValue
})

2. 使用过滤器

{{myData | filterName}} {{myData | filterName(arg)}} 1.12.4. 编码

当前时间为: {{currentTime}}
当前时间 1 为: {{currentTime | dateStr}}
当前时间 2 为: {{currentTime | dateStr('YYYY-MM-DD')}}
当前时间 3 为: {{currentTime | dateStr('HH:mm:ss')}}


1.13.内置指令与自定义指令 1.13.1. 效果 (12_指令/test.html)
12_指令_内置指令.gif
1.13.2. 常用内置指令

1. v:text : 更新元素的 textContent
   
2. v-html : 更新元素的 innerHTML
   
3. v-if : 如果为 true, 当前标签才会输出到页面
   
4. v-else: 如果为 false, 当前标签才会输出到页面
   
5. v-show : 通过控制 display 样式来控制显示/隐藏
   
6. v-for : 遍历数组/对象
   
7. v-on : 绑定事件监听, 一般简写为@
   
8. v-bind : 强制绑定解析表达式, 可以省略 v-bind
   
9. v-model : 双向数据绑定
   
10. ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
    
11. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
    

1.13.3. 自定义指令

1. 注册全局指令

Vue.directive(‘my-directive’, function(el, binding){
el.innerHTML = binding.value.toupperCase()
})

2. 注册局部指令

directives : {
‘my-directive’ : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}

3. 使用指令

v-my-directive=‘xxx’
1.13.4. 编码 1(内置指令)

[v-cloak] { display: none }


文章图片
atguigu.com 显示左侧文本
{{url}}


1.13.5. 编码 2(自定义指令)
需求: 自定义 2 个指令

1. 功能类型于 v-text, 但转换为全大写
   
2. 功能类型于 v-text, 但转换为全小写
   







1.14.自定义插件 1.14.1. 效果 (13_插件/test.html)
13_插件.gif
1.14.2. 说明

1. Vue 插件是一个包含 install 方法的对象
   
2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
   

1.14.3. 编码

1) 插件 JS /** * 自定义 Vue 插件 */ (function () { const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { alert('Vue 函数对象方法执行') } // 2. 添加全局资源 Vue.directive('my-directive', function (el, binding) { el.innerHTML = "MyPlugin my-directive " + binding.value }) // 3. 添加实例方法 Vue.prototype.$myMethod = function () { alert('vue 实例对象方法执行') } } window.MyPlugin = MyPlugin })() 2) 页面使用插件


推荐阅读

• 

  索尼a7m3转接尼康镜头2470 索尼a7riii转接尼康镜头
• 

  在纸上写作
• 

  breathe和breath区别 breathe和breath有什么区别
• 

  一年当中电商节都有哪些 什么时候电商节，电商折扣每年哪些日子
• 

  酒驾行政复议需要多长时间
• 

  做快递赚钱吗？
• 

  唧唧复唧唧木兰当户织的意思 唧唧复唧唧木兰当户织的含义
• 

  势函数怎么求
• 

  普通铅笔涂卡能扫描吗 普通铅笔涂卡能不能扫描
• 

  看点|科技冬奥展看点多
• 

  大富翁网页版,7388大富翁网页版
• 

  喜欢一个不喜欢我的男生,怎么办？
• 

  为高一新生心理问题把脉 高一新生的心理调节
• 

  罗汉果的正确使用方法有哪些 教你正确使用罗汉果泡水
• 

  为什么俄罗斯敢跟美国叫板？
• 

  姜枣红糖茶的做法
• 

  违章代码13500是什么意思
• 

  完成率怎么算
• 

  女人长期喝枸杞菊花茶好吗
• 

  电视怎样连接wifi

• Vue|第二章（Vue组件化编程）
• vue|vue3 骨架屏+上拉加载更多封装
• vue|Vue2.0+组件库总结
• uni-app|uniapp二维码识别
• 毕业设计|毕设项目 - 基于SSM的毕业设计管理系统(含源码+论文)
• macos|nvm 安装教程（mac）
• Node.js工程师养成计划完结含文档源码
• VUE|VUE 跨域代理
• 最新技术|替代node的deno，deno简单介绍