环境配置
- 插件
- 从谷歌应用商店下载vue.dev
- vscode下载插件
- vue 2 snippets
- open in broser
- HTML snippets
- HTML CSS Support
- Live Server
- Vetur（.vue文件高亮）
- eslint
- Chrome插件
- FeHelper：前端格式化等工具
- 库
- 安装命令使用：npm i xxx@x（@后边家版本号，没有说明就不加@）
- less-loader：@7，css样式兄弟样式写法
- nanoid：唯一字符库，uuid缩减版
- pubsub-js：消息订阅与发布
- vuex：数据统一管理
- 快捷键
- 左侧设置内点击用户代码片段
- 在设置 -> 拓展 -> Emet -> Trigger Expansion On Tab 用于按Tab快速展开标签
- Node
- 从官网下载安装包：https://nodejs.org/zh-cn/
- 安装非中文路径
- 中间的自动下载相关依赖此次先不勾选（报错，无法安装）
- 更改路径的时候，删去了系统变量 -> PATH -> java路径：C:\ProgramData\Oracle\Java\javapath
- 添加变量NODE_PATH 值是node的安装路径即可
npm常用指令
选择器
template：模板标签，不影响整体结构，显示的时候会自动将其去掉，配合v-if使用
- 使用#region —- #endregion来标识一段代码，可以很方便的进行折叠
- 在app.vue中使用ref = ‘xxx’ 来标识原生标签，可以在methods中通过this获取到refs属性然后获取对应标签
- 使用v-model.number将绑定的数据转换为数字，或者使用v-bind将双引号内的变为表达式
-
初识vue
基础流程
- 想让Vue工作就必须创建Vue示例，且要传入一个配置对象
- root容器内的代码仍然符合html规范，只不过混入了一些特殊的Vue语法
- root容器内的代码被称为Vue模板
- 注意点
- 容器和实例只能一对一
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新
使用格式
- 插值语法{{}}
- 在容器中使用{{变量名}}来表示动态变量
- 在new Vue(){} 中定义变量的内容
- 神奇的是{{}}中可以直接写js表达式，比如1+1，比如Date.now()
- {{name.toUpperCase()}}可以是对name赋值得到其大写
- 指令语法v-bind:
- 使用点我去xxx来指定一个url，后边需要vue对象来指定变量内容
- 只要在属性前边加上了v-bind：就能给属性动态绑定
- v-bind：可以简写为：（简写为一个冒号）
- data多级使用
- 可以使用嵌套多级data
- 比如data:{ names:{ name:”aaa”} }，即可使用names.name进行调用
- 使用场景
- 插值语法{{}}
单向绑定
- v-bind：value=”xxx” 就是单向绑定
- 属性值改变会影响页面的值，但是页面的值改变不会影响属性值
- 双向绑定
- v-model：value=”xxx”
- 用户能够操作的标签才能使用v-model
检测功能
条件渲染
- v-if
- 直接将元素节点内所有内容全部去除
- v-show
- 使用display来隐藏，但是内容仍然加载了
- v-if
- 列表渲染
- v-for=”p in persons”
- 内部包含的标签都能使用p
- 若p换成(a，b)，那么a代表value，b代表key（对于数组key就是index）
- ：key
- 需要和v_for一同使用，保证互不相同
- 主要用于组件定位，若不设置key则遍历时可能出现动态变化时错位的情况
- key一般使用数据的id，能够唯一标识一个数据
- v-for=”p in persons”
列表过滤
过滤器
- 使用{{date | dealdate}}表示对date数据的处理
- 在vue中添加filter域，将dealdate写成函数形式，接受一个参数date，将处理结果返回（类似计算属性）
插槽
环境设置
- 首先安装vue脚手架：npm install -g @vue/cli（安装完之后重启cmd）
- 然后切换到想要创建项目的目录
- 创建项目：vue create xxxx
- 启动项目：npm run serve
- 关闭项目：两次 ctrl + c
- 打包环境配置：vue inspect > output.js
脚手架
pubsub插件
- 订阅
- pubsub.subscribe(‘函数名’，function(){
- 函数名对应被发布之后的回调函数，相当于广播机制
- })
- pubsub.subscribe(‘函数名’，function(){
- 发布
- pubsub.publish(‘函数名’，数据)
- 其他
- 如果想要this对应的vue是本组件内的vue那么就要使用箭头函数来写回调函数
- 推荐使用全局总线技术，订阅发布只是对其的封装
- 订阅
- 内部总线
- 网络请求
- import axios from ‘axios’
- axios.get(‘请求url’).then(
- response => {
- 返回后处理（response.data为数据）
- }
- error => {失败后处理，error.message是错误数据}
- response => {
- )
- vuex
按章节
1、初识Vue
- 初识Vue：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
- root容器里的代码被称为【Vue模板】；
- Vue实例和容器是一一对应的；
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
- .{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：- a- a+b- demo(1)- x === y ? 'a' : 'b'- js代码(语句)- if(){}- for(){}
2、Vue模板语法
Vue模板语法有2大类：
Vue中有2种数据绑定的方式：
data与el的2种写法
- el有2种写法
- new Vue时候配置el属性。
- 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
- data有2种写法
- 对象式
- 函数式
- 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要的原则：
其实来源于MVC模型
- M：模型(Model) ：data中的数据
- V：视图(View) ：模板代码
- VM：视图模型(ViewModel)：Vue实例
- 观察发现：
- el有2种写法
Object.defineProperty()方法
- 原生的用于动态绑定数据的方法
- 概念
- 通过一个对象代理对另一个对象中属性的操作（读/写）
Vue中的数据代理
基本使用
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
- 事件的回调需要配置在methods对象中，最终会在vm上；
- methods中配置的函数，不要用箭头函数！否则this就不是vm了；
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
- @click=”demo” 和 @click=”demo($event)” 效果一致，但后者可以传参；
- 事件修饰符
- prevent：阻止默认事件（常用）；
- stop：阻止事件冒泡（常用）；
- once：事件只触发一次（常用）；
- capture：使用事件的捕获模式；
- self：只有event.target是当前操作的元素时才触发事件；
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
键盘事件
- Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊，必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
- 系统修饰键（用法特殊）：ctrl、alt、shift、meta
- (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- (2).配合keydown使用：正常触发事件。
- 也可以使用keyCode去指定具体的按键（不推荐）
- Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
8、计算属性
- Vue中常用的按键别名：
定义：
- 要用的属性不存在，要通过已有属性计算得来。
- 计算属性和data中的属性不太一样，存在不同的域中
- 原理：
- 底层借助了Objcet.defineproperty方法提供的getter和setter。
- get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
- 优势：
- 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
9、监视属性
监视watch：
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在，才能进行监视！！
- 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视
- 深度监视
- 深度监视：
- Vue中的watch默认不监测对象内部值的改变（一层）。
- 配置deep:true可以监测对象内部值改变（多层）。
- 备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- 使用watch时根据数据的具体结构，决定是否采用深度监视。
- 深度监视：
- 与计算属性的区别
class样式
- 写法:class=”xxx” xxx可以是字符串、对象、数组。
- 字符串写法适用于：类名不确定，要动态获取。
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
- style样式
- :style=”{fontSize: xxx}”其中xxx是动态值。
- :style=”[a,b]”其中a、b是样式对象。
区别
v-if
- 写法：
- (1).v-if=”表达式”
- (2).v-else-if=”表达式”
- (3).v-else=”表达式”
- 适用于：切换频率较低的场景。
- 特点：不展示的DOM元素直接被移除。
- 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
- 写法：
- v-show
- 写法：v-show=”表达式”
- 适用于：切换频率较高的场景。
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：
v-for指令:
- 用于展示列表数据
- 语法：v-for=”(item, index) in xxx” :key=”yyy”
- 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
- key的作用
- 虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
- 对比规则：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到到页面。
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
- 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM：
- 会产生错误DOM更新 ==> 界面有问题。
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
- 开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
- 使用index作为key是没有问题的。
- 虚拟DOM中key的作用：
Vue监测数据原理
- vue会监视data中所有层次的数据。
- 如何监测对象中的数据？
- 通过setter实现监视，且要在new Vue时就传入要监测的数据。
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
- (1) Vue.set(target，propertyName/index，value) 或
- (2) vm.$set(target，propertyName/index，value)
- 如需给后添加的属性做响应式，请使用如下API：
- 如何监测数组中的数据？
- 通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新。
- 3 .重新解析模板，进而更新页面。
- 在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()
- 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
13、收集表单数据
若：，则v-model收集的是value值，用户输入的就是value值。
- 若：，则v-model收集的是value值，且要给标签配置value值。
- 若：
- 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 2.配置input的value属性:
- (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
定义：
- 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
- 语法：
- 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
- 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
我们学过的指令：
- v-bind : 单向绑定解析表达式, 可简写为 :xxx
- v-model : 双向数据绑定
- v-for : 遍历数组/对象/字符串
- v-on : 绑定事件监听, 可简写为@
- v-if : 条件渲染（动态控制节点是否存存在）
- v-else : 条件渲染（动态控制节点是否存存在）
- v-show : 条件渲染 (动态控制节点是否展示)
- v-text指令：
- 1.作用：向其所在的节点中渲染文本内容。
- 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
- v-html指令：
- 1.作用：向指定节点中渲染包含html结构的内容。
- 2.与插值语法的区别：
- (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
- (2).v-html可以识别html结构。
- 3.严重注意：v-html有安全性问题！！！！
- (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
- v-cloak指令（没有值）：
- 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
- v-once指令：
- 1.v-once所在节点在初次动态渲染后，就视为静态内容了。
- 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令：
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
- (1).局部指令：new Vue({ new Vue({<br /> directives:{指令名:配置对象} 或 directives{指令名:回调函数}<br /> }) })- (2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
- (1).bind：指令与元素成功绑定时调用。
- (2).inserted：指令所在元素被插入页面时调用。
- (3).update：指令所在模板结构被重新解析时调用。
- 三、备注：
生命周期：
- 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 4.生命周期函数中的this指向是vm 或 组件实例对象。
- 生命周期其实就是对应 创建、挂载、运行、销毁
- 常用的生命周期钩子：
- 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
- 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
- 关于销毁Vue实例
- 1.销毁后借助Vue开发者工具看不到任何信息。
- 2.销毁后自定义事件会失效，但原生DOM事件依然有效。
- 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
若有收获，就点个赞吧
0 人点赞
