第一个Vue程序
如何导入?
使用script进行Vue全局设置:
指定Vue实例挂载的位置
, Vue和js一样,都需要在script里写
第一步创建vue实例
1.为什么要new vue(),直接调用Vue不行吗?
不行,因为如果直接调用Vue()会报如下错误:
2.关于vue构造函数:options
options翻译为多个选项
Vue框架要求这个options参数必须是一个纯粹的js对象:{ }
在{ }对象中才能大量编写Key:value键值对
一个Key:value就是一个配置项,通过options参数给Vue实例指定多个配置项
3.关于template配置项:
template翻译为模板,用来指定模板语句,模板语句是一个字符串形式的:‘ ’
什么是模板语句?
Vue框架自己制定了一些具有特殊含义的特殊符号,有自己的语法规则,模板语句可以是一个纯粹的HTML代码,也可以是HTML+Vue,
template后边的模板语句会被Vue框架的编译器进行编译,转化为浏览器认识的HTML代码。
const myVue = new Vue({ template:'<h1>Hello! Vue!!</h1>' })
myVue.$mount('#app')
z在浏览器当中可以看到,没有div,只有模板语句,他是直接将id为app 的div替换成HTML语句的!
2.模板语句的数据来源
1.谁可以给模板语句提供数据支持呢?data选项
2.data选项的数据类型是什么?Object |Function(对象或者函数),也就是说,可以是数组。
3.data配置项专业叫法:Vue实例的数据对象(data实际上是整个Vue实例提供数据来源的)
4.如果data是对象,对象必须是纯粹的对象(含有0个或多个Key:value键值对)
5.data数据如何动态插入到模板语句中?
{{ }},这是Vue自己搞的一套语法,称为模板语法中的插值语法(胡子语法)
{{data的key}}
换行用 ` 或者+,注意:在{这里不能有字符包括空格{ }这里不能有字符包括空格}
3.template的配置项解释
1.template后边指定的是模板语句,但是模板语句只能有一个根节点,想多写加个div在div里边写
2.只要data中的数据发生变化,模板语句一定会重新编译。
3.可以不用template写模板语句,可以直接写在HTML里,这样挂载位置的元素也不会被替换。
关于¥mount(‘#app’)
在Vue中有一个el配置项
el的作用和¥mount()作用一样,都可以实现对Vue实例对象的挂载
el : ‘#app’ == myvue.$mount(‘#app’)
Vue的一夫一妻制
一个Vue实例只能接管一个容器,1对1
Vue核心技术(重点)
模板语法之插值语法{{}}
{{主要研究这里可以写什么?}}
1.在data中声明的变量、函数等都可以
2.常量都可以
3.只要是合法的JS表达式都可以
4.模板表达式都被放在沙盒中,如下能使用
模板语法之指令
指令语法:
1.什么是指令语法?有什么作用?
2.Vue框架中的所有指令都是v-开头
3.插值是写在标签体当中的,指令写在HTML的标签属性上。
4.指令语法规则:
指令的完整语法格式:
<Html标签 v-指令名:参数=“JS表达式”></Html标签>
注意指令表达式中不能再添加一个{{}}
不是所有的指令都需要参数和表达式
5.v-once 指令
作用:使用该指令后标签只渲染一次,所有子节点及元素都视为静态内容跳过,不会更新。
6.v-if=”表达式”指令
作用:表达式的执行结果是一个布尔类型true/false,T成立,F不成立
7.v-bind指令
作用:用来使得某个属性的值成为动态效果
语法格式:v-bind参数=”表达式” / :参数=“表达式”
来说说话bind像的model
v-bind和v-model都可以完成数据的动态绑定
v-bind是单项的数据绑定,可以用在任何标签上
v-model是双向的数据绑定,只能用在表单类元素上:input,select,textarea,这种和用户交互的标签上。
v-bind和v-model的简写方式:
bind v-bind:参数=”表达式” 简写 :参数=“表达式”
model v-model:value=”表达式” 简写 v-model=“表达式”
用v-model交互,bind不交互,以下是v-model,如果是bind,即使左边改变右边也不变
MVVM架构思想
将Model和View视图分离开,当View变化后,VM核心自动去更新Model,不需要自己写DOM的js代码。开发效率提高
认识VM
vue框架也收到MVVM思想启发,创建的Vue实例一般用vm命名
通过vm实例可以访问那些属性?
带$的是公开属性,一般程序员使用
带_的是私有属性,供Vue框架底层使用
通过vm也可以访问Vue实例对象原型对象上的属性:vm.$delete
为什么Vm可以获取到msg?
因为数据代理机制
数据代理机制基于object.defineProperty()
数据代理机制就是用一个临时对象去间接访问对象,达到直接访问的效果。
数据代理不会给$和_做代理,怕出错
data可以是对象,也可以是函数,学到组件就知道了
配置项enumerable,configurable
vue事件绑定,需要在Method里写回调函数才能调用
没加占位符
加了
this
method方法没有做数据代理,就是用变量代替
事件修饰符
@wheel是鼠标滚轮滑动
@keydown键盘按下不弹起发生
@keyup键盘按下并谈起发生
网站里边输入用户名密码回车自动获取id和ps就是用keyup事件所传的event对象的键值判断是否等于回车13自动登录的。
按键修饰符
常用的有修饰符,不常用的想用只能自定义了,或者直接在后边.key,就上边是说的根据获取的键值去判断是否是想要的目标值ASII
反转字符串
使用Vue原有属性经过一系列运算得到一个新的属性,叫做计算属性。
data对象当中的属性可以叫做Vue的原有属性。
语法格式
computed : {
计算属性1:{
set(val){}
get(val){}
}
}
简写就是
computed:{
计算属性(){
return ?
}
}
作用:代码复用,容易维护,效率高
计算属性简写格式和方法格式一样
watch监听
watch:{
}
属性简写
可以监视多个属性,用哪个监视哪个名字
immediate:true 立即执行
immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.
有一个固定的方法:handler(newValue,oldValue){}
如何获取new和old?
可以使用v-model指令双向绑定,用哪个就绑定哪个watch里的属性
this还是当前Vue实例。
如果该函数是箭头函数this就是window对象。
深度监视:当监视的属性里有很多属性要监视时,可以使用deep:true属性,就顶如(a.*)
handler:用来获取之前数据和现在改完数据
后期想添加监视怎么办?
和直接写有什么区别?
一个是一开始作为属性写到对象中,一个是后期通过调用api实现
当只调用handler属性时,可以直接简写,handler就像number的有参构造一样
后期监视简写
箭头函数()=>{}默认是找上级的this,但是不简写function()本身是window就不行
在Vue里加强了class和style
class绑定之字符串形式
v-bind不仅能绑定字符串,还可以绑定对象或者数组,所以.class样式可以与bind连用,实现动静结合
可以用true还是false选择用哪个JS样式
已经变成Vue的形状了,悲
条件渲染
关于v-if、v-else、v-else-if指令,就像后端的ifelse一样,成立立即执行。
v-show
也是页面上看不见,但是在F12后台可以看见代码,而v-if=false是不会看见代码,真正的隐形
v-show是修改了CSS样式的display数值达到的隐形,还是会加载,而v-if不会加载
template标签,起到一个占位符的作用,不会出现在页面上,也不会影响页面结构
v-for遍历
格式
可以实现动态列表
遍历对象属性
按照属性顺序读取
遍历字符串
按照拆分的字母和下标,s 0 、j 1
遍历指定的次数
和字符串差不多
按照数组元素和数组元素下标 1 0 、2 1
虚拟Dom机制和diff算法:
虚拟Dom是先将数据虚拟储存,当修改后会更新一个新的Dom与旧的用Diff算法去对比两个之间的差别,只有差别的地方才会重新部署,没有的不改变,提高执行效率
必须将key设置成主键,不然后边默认key是数组元素下标index,会导致列表错乱,
placeholder
filter过滤器
列表排序小技巧:可以鼠标单击触发修改data里的变量值,当赋值时,vm里会重新部署一遍,进而触发当type=1时的计算属性函数可以使用过滤器来完成
两个单选按钮在同一name下才能实现单选
model.类型转换number
删除前后空格
lazy延迟加载,等鼠标光标离开后才加载
这种指令不能在from表单上,会出现xss攻击,导致cookie泄露
v-clock
为了解决vue.js加载不出来导致页面vue代码不执行,页面显示源码的情况,出现了v-clock
解决方法,在头里加一个CSS样式,里边将display设置成none
[]代表所有标签
v-once
只在开始执行一次,后边直接成为静态内容
v-pre
不在vue编译,提高编译效率
自定义指令
函数式
对象式
响应式与数据劫持
什么叫做响应式,你写的数据能在页面上直接展示出来,或者更改一个数据,和这个数据有关的都叫做响应式。
数据劫持:其实就是set方法。
Vue生命周期
四个周期,八个钩子
从创建vm.$el后才有真实Dom
data改变就继续调用两个钩子,改变一次调用一次
这里的卸载销毁实际上是解绑Vue实例所有的监视器,自定义监听器,子组件等等。Vue实例还在
虽然beforeDestroy里监视器处于激活状态,但是不能用,内存中已经卸载了
组件
组件就是用来提高代码复用率的。
三部曲:创建组件、注册组件、使用组件
第一步创建组件,使用template实现模块化,在组件中,data必须是对象,且return返回一个对象
Vue当中可以使用自闭合标签的,但前提必须在脚手架环境中使用
全局注册
组件嵌套
注册的组件如果组件名和对象名一致可以简写
app : app
嵌套哪个组件就把组件名写到哪个组件下
Vm与Vc
vm包含vc,vc全称是VueComponent,Vue组件,是专门用来写组件的
vm和vc的原型对象是一个,所以能够互相访问,像共用一个父类,为了实现代码复用
重点:
导入导出
import,export,添加export以便其他文件能够导入他们
导出方式
单文件组件模型
导入
这里的X1是标签名,也就是说在template里边定义模板的X1标签名
脚手架
使用脚手架是为了浏览器能够认识.Vue文件,脚手架能够自动将VUe文件翻译成浏览器能够认识到Css,html,js代码
Vue配置项
render
实际上是被缩写成这样的
原代码
props配置项
当想更改属性值时,组件标签可以直接在标签内更改Value。像Html一样
有三种更改方式
props里还可以定义默认值default,添加必要性,必要性意思为不能为空
当想获取的值是数字或者其他值时,可以用V-bind标签,因为这个标签的返回值一定要是常量,对象。
props里的值不能修改,可以用个临时变量替代更改,展现数据也用那个临时变量
父组件中获取子组件
有什么用?可以用来修改子组件值,达到目的
给组件标签加上一个ref,顶如一个id。可以用this.$ref.属性值的方式获取到
不光组件,普通的Dom元素也可以定义id
因为不建议做Vue里使用Dom,所以这个ref实际上就是Dom里id的替代品
mixin混入:将组件间公共部分提取出来,不会和本身不会与同名的导入组件内函数冲突,就近原则
特殊的是,在8个钩子函数内,在同名的情况下,先执行mixin内的,再执行函数本身的
全局混入
混入是总结组件相同部分,实现代码复用
install方法里边形参可以是Vue对象和数据
scoped 关键字 局部样式
为了避免组件与组件之间样式名字相同造成代码替代。
在浏览器上实际在div上添加了一种编号,所以能区分开样式
自定义事件
通过代码的形状形式绑定事件
删除
回调函数的this
全局事件总线
消息的订阅与发布机制
pubsub-js
导入库
要使用箭头函数,要不没有this,因为本身没有this,使用箭头函数自动找外层的this也就是VC
记得摧毁前将函数解除
AJAX跨域问题
代理服务器跨域
代理服务器配置
简单代理
只能代理一个服务器
高级代理
pathRewrite:^/api替换成‘ ’空要不地址会带/api
Vuex
多个组件实现资源共享
vuex过程,表面上还是用的vue的data,method,进行一个简单的包装,核心内容交给vuex里的store.js去搞了,store有三个对象
action对象、mutations对象、store对象
action对象处理事件逻辑,如然后将数据传输到mutations里去更新数据也就是state对象,因为state是响应式处理,整个页面包括state里的数据就会更新。达到目的
dispath是分发
context指的是action的行为动作
业务逻辑简单可以跳过action,直接this.$store.commit
store对象和Vm里的data差不多
简单数字加一了解一下Vuex过程
//App.vue <template> <div> <h1>数字:{{$store.state.num}}</h1> <button @click="plusOne">点我加1</button> </div> </template> <script> export default { name : 'App', data() { return { startNum : 0 } }, methods: { plusOne(){ // 这里的代码在实际开发中可能会比较复杂。 // 业务逻辑复杂,代码比较多。 // 如果你将这些代码放到这里的话,这些业务逻辑代码无法得到复用。 // 无法在其他组件中使用,在其他组件中使用的时候,你还需要把这些代码再写一遍。 //this.$store.state.num++ // 调用vuex的API。 // dispatch是vuex的API。调用这个方法之后,store对象中的plusOne这个action回调函数会被自动调用。 // dispatch:分发 // 交给plusOne这个action去处理这个事儿。 this.$store.dispatch('plusOne', this.startNum) } }, } </script>
//Store.js // 引入Vue,因为下面使用Vuex插件的时候需要Vue import Vue from 'vue' // 引入vuex插件 import Vuex from 'vuex' // 使用插件 Vue.use(Vuex) // 创建三个vuex插件的核心对象:actions对象、mutations对象、state对象 const actions = { // N多个action // 每一个action都是一个callback(回调函数) // 在action这种回调函数中编写复杂的业务逻辑 // 有个原则:action是专门用来处理业务逻辑,或者说发送AJAX请求的。 //plusOne : function(){} // 简写 // context参数:context是vuex的上下文(context可以看做是store对象的缩小版) // value参数:传过来的数据 plusOne(context, value){ // 处理业务 value = value + 1 // 调用其它的action这个回调函数 //context.dispatch('otherAction', value) // 业务逻辑处理完成之后,继续向下一个环节走,就轮到了数据的更新。 // 提交上下文环境(所有的事儿都做完了,该最后一步了,更新数据了,怎么办?提交) context.commit('PLUS_ONE', value) }, // 这里可能还会有其它的action // ... /* otherAction(context, value){ console.log(6666) } */ } const mutations = { // N多个mutation // 每一个mutation都是一个callback(回调函数) // 每一个mutation这个回调函数的作用就是:更新state // 只要state一更新,因为是响应式的,所以页面就重新渲染了。 // state参数:状态对象 // value参数:上一环节传过来的数据 PLUS_ONE(state, value){ state.num += value } } // 等同于Vue当中的data(只不过这里我们不叫做数据,叫做状态) // 状态对象(数据对象),已经做了响应式处理的。 const state = { num : 0 } // 简写形式 export default new Vuex.Store({actions,mutations,state}) /* // 创建store对象(这个store对象是vuex插件中的老大,最核心的对象,这个对象store是用来管理actions对象、mutations对象、state对象。) const store = new Vuex.Store({ // 它是一个负责执行某个行为的对象 actions : actions, // 它是一个负责更新的对象 mutations : mutations, // 它是一个状态对象 state : state }) // 导出store对象(暴露之后,别人想用可以使用import进行引入) export default store */
//main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 引入Vuex插件中的核心对象store import store from './vuex/store' new Vue({ el : '#app', // 一个全新的配置项,以前没有学过:store // 加上这个配置项之后,vm以及所有的vc对象上都会多一个属性:$store // 以后通过vm.$store或者vc.$store来获取store对象。 //store : store, store, render : h => h(App), })
Vuex配置项-getters
在Store.js里边写
拓展运算符。。。
拆括号,值得注意的是,拆了再加,会改变地址,不是原先那个。
可以用这种方法将相同的合并
Vuex内置对象-mapState映射State
这个对象能将State里的对象名与组件中的对象名联系起来,省去复杂的state调用
引用mapState
实际上实现是这样的
还记得上边的扩展…吗,他来了
V-model不能使用mapGetters,因为在text里设计到改值,必须要有set方法
mapAction和mapGetters
上边的savesUser分别对应函数名和action里对应的函数名,也是连接作用
Vuex模块化
在组件里想要使用state里的属性值有些变化
需要连点bModel,在点b
开启模块命名空间
由于在mutations里的函数可以自己去$store标签下找,没有了模块的束缚,这可能发送重名函数调用的风险。所以有了namespaced:true
这条指令开启后,以后访问都以“模块名/函数名”来访问
在mapaction和mapGetters等里还得加模块名参数
路由
实现单页面web,局部刷新,不需要跳转其他页面
路由工作原理
下载rout插件
导入路由
配置路由
使用路由
路由视图,起到一个占位的作用
多级路由
子路由
如果子路由写了‘/’,to后面不能带父路由
query传参方式
params方式传参
字符串形式
:用来表示传递的是参数,不是路径
字符串形式和对象形式
优化代码-props配置项,路由专属
props
浏览器的后退和前进
和栈有关,
声明式路由导航
编程式路由导航,按钮也能用
路由组件的销毁
可以在Keep-alive标签添加 include=‘组件名’
什么时候被销毁?
切换时被销毁
路由另外两个钩子
定时器
切到这个组件时激活activated切走的时候激活deactivated
路由多两个
路由守卫
本身就是在不同时机的不同位置添加代码
守卫是在切换组件之前查权,有没有权限访问这个组件
像过滤器一样
1.全局前置路由守卫
可以用一个布尔属性来鉴权,在对应的路由对象中使用meta属性来自定义属性
全局后置路由守卫
在创建router后,暴露前
前置后置
局部守卫
path
component
前端打包
详情请见p142
hash带#
#号后边是hash值,不会当做请求路径
history
刷新会将整个当做请求路径发送到服务器上
如何解决?
需要后端解决
在WEB-INF的web.xml里配置,当发生404报错时,自动跳转到index.html界面
Vue3
以前2是用vue-cli脚手架创建的,又开发了一个新的脚手架create-vue(vite)
更新
vite打包更快,启动服务器更快
简单回顾Vue2的响应式处理
Proxy底层
proxy底层使用了Reflect反射机制
setup中没有this
Vue3语法
setup函数
不用像以前一样写data,methods函数了,函数里可以获取到其他属性值,eg:name和age
setup还有个返回值,必须写
整体
渲染函数
正常在setup修改属性值不会有响应式
通过Vue3内置ref函数来实现响应式
RefTmpl对象中的Value属性具有响应式,底层使用了数据代理和数据劫持机制,也就是Vue2的响应式
替代品
.value会自动调用,不需要写,只写nameRefImpl即可
ref通常比较适合基本类型,reactive适合对象
reactive函数,专门用于对象类型响应式
reactive函数,生成响应式
可以对属性的增删改响应式,对数组也可以实现响应式
props
props不能随便修改,不需要return
Vue3生命周期
组合是在setup里写
Vue3全局事件总线
绑定
触发
清楚所有事件
解绑指定
计算属性computed
回顾一下Vue2
Vue3写法
计算属性
watch里边是proxy
ref数据
同时监视多个属性
感觉Vue3就是 let 函数名 = ?
watch
如果是监听对象的话可以这么写
一个箭头函数变化的细节影响了deep属性的启用
只有监视对象是属性时,oldValue才能拿到
当ref包装对象时如何监听
Vue3新增-watchEffect
组合式,直接在setup使用
比较像watch[数组]版,只要函数里边的内容有变化就会执行
Vue3自定义函数hook,为了实现代码复用
导入sum函数
自定义SUM函数
shallowRef
浅层次的响应式,就是没有响应式的效果,不会更改,在数据与原版没有区别
shallowReactive
只有第一层对象有响应式,第二次以后都没有了
readonly和shallowreadonly,深层只读,浅层只读
响应式数据判断
toRef和toRefs
为了使代码更加简洁,可以将对象省略比如data.counter在胡子语法里可以省略为counter,只能省略第一层
正常写不能成功建立响应式,需要以上两个函数
toRef
toRefs
研究一下Vue3中template标签如何解决可以有多个根标签的,应该是加了一个虚拟根节点吧
确实加了一个Fragment
可以将一个组件发送到指定的标签位置,达到远距离传送到效果
隔代数据传递
provide 提供 用于祖宗组件使用,实现数据传递
inject注入 用于子组件,也是响应式
有点像import和export
自定义ref
目标:输入后1秒在页面显示输入的Value
使用watch监听实现
使用自定义ref实现
Vue3中有一个自定义ref组件,你可以使用他来实现,
说一句防抖机制,避免大量信息爆发式输出,影响影响性能
好麻烦
Vue3小结-语法糖
setup可以写在script标签里,它将最外层的script标签当做以前setup的大括号
之前在setup外的component组件也不用写了,直接在标签里导入组件就可以了
没有回复内容