欢迎来{{home}} 点我提示信息1 //本来时v-on:click 简化成@click点我提示信息2 //$event 占位符 想传值直接在括号里面写
1，prevent 组织默认事件
2，stop 阻止事件冒泡
3，once 事件只触发一次
4，capture 使用事件捕获模式
5，self 只有event.target时当前操作的元素时才会触发事件
6，passive 事件默认行为立即执行，无需等待事件回调执行完毕
以上事件修饰符可以连续使用比如prevent.stop
点我 点我提示信息 点我提示信息 div1div2点我提示信息
vue中常见的键盘别名
回车=>enter
删除=>delete
退出=>esc
空格=>space
换行=>tab(特殊，必须配合)
上=>up
下=>down
左=>left
右=>right
vue中没有提供的别名可以通过键盘原始的key值去绑定 但要注意要转为kebab-case(短横线命名)
系统中修饰键 ：ctrl alt shift meta 可以在后面+特定的按键 比如ctrl.y就是ctrl+y
配合keyup使用的时候需要再按下其他按键 随后释放其他按键 事件才能被触发
配合keydown使用正常触发事件
也可以使用keycode去指定具体的按键(不推荐)
欢迎来到{{name}}学习 姓氏:姓氏:{{fullname()}}
姓氏:{{fullname}}
总结: 计算属性computed会有缓存 而method没有缓存
天气案例 点击切换天气 炎热寒冷切换
今天天气好{{isHot ? '炎热' : '寒冷'}} 今天天气好{{info}} 切换天气 切换天气二
两种监视方法 在new vue里面写 watch:{属性名:{ handler(newValue,oldValue){ }}}
在外面 **.$watch(‘属性名’,{ handler(newValue,oldValue){ }})
监视的属性名必须是存在的
watch不能同时监视对象内部值的改变 加上deep:true才可以多层检测
a的值是:{{number.a}} 点我a+1 b的值是:{{number.b}} 点我b+1
{{name}}{{name}}{{name}}
vue可以直接管理style 样式
两种方法 一种对象的形式 一种数组的形式 一般都是对象的形式
:style = "{fontSize : xxx}"其中xxx是动态之
:style ="a,b"其中a，b是样式
{{name}}两个判定方法
v-if和v-show
如果v-if判断为false 那么f12没有该元素
如果v-show判断为false 那么f12显示该元素隐藏
当统一隐藏或者显示的时候 就需要用到template 他在f12不显示
只能配合v-if来使用
当前的值是{{num}} 点击＋1 111 222 333 444 555 666 你好 hello 哈哈哈哈 v-for
展示列表属性
v-for="(item,index) in xxx " :key=“yyy”
循环数组对象字符串 注意后面要加:key
人员遍历(数组) {{value.name}}---{{value.age}} 汽车遍历(对象) 字符串遍历 指定循环行数
再用v-for遍历时:key建议使用自身定义的id而不是系统定义的index
index的坏处 当用在添加或者删除一行时如果破坏了本身的格式 那么index会重新排序 如果没有破坏可以使用
用自身定义的id 用index当id
用watch实现
watch实现模糊查询 用计算属性computed实现
computed实现模糊查询 最好用计算属性进行查询
列表排序 降序 升序 原顺序 {{p.name}}---{{p.sex}}---{{p.age}} 两种添加方法 (target,key,val)
1、Vue.set(vm.***,‘key’,‘value’)
2、vm.$set(vm.***,‘key’,‘value’)
target不能是vm或者vm下面的_data
学校信息 学校名称:{{school.name}} 学校电话:{{school.tel}} 校长是:{{school.leader}} 点我添加校长 时间:{{time}} 计算属性实现时间:{{Changetime}} 方法实现时间:{{getChangeTime()}} 局部过滤器实现时间:{{time | filtersTime}} 局部过滤两个条件实现时间:{{time | filtersTime2('hh时mm分ss秒')}} 串联两个过滤器:{{time | filtersTime |filtersTime3}} 全局过滤{{msg |mySilce}}
说明:v-test相当与把你给的值直接放到里面 默认传给他的就是文本
开心：{{msg}} 开心:
说明:v-html除了可以解析文字还可以解析模板 同时借助模板传递和获取数据
开心：{{msg}} 开心:
总结:v-cloak指令(没有值) 本质上是一个特殊指令，vue实例创建完毕并接管容器之后，会删除v-cloak属性
使用css配合v-cloak可以解决网速慢时展示出来{xxx}的问题
{{msg}}
如果网页加载缓慢会出现[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DTyJ4Nl5-1655116238482)(C:\Users\西门吹雪\AppData\Roaming\Typora\typora-user-images\image-20220315173115368.png)]的情况，如果想验证按照下图将此调成slow3g[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zaVdJoQW-1655116238483)(C:\Users\西门吹雪\AppData\Roaming\Typora\typora-user-images\image-20220315173242516.png)]
总结:v-once所有节点在初次动态渲染后，就视为静态资源了，以后数据的改变也不会影响或者引起v-once所在结构的更新，可以用于优化性能
初始值n:{{n}} 当前的n:{{n}} 点我n+1
总结:跳过所在节点的编译过程，可以利用它跳过没有使用指令的语法，没有使用插值的语法，会加快编译
vue其实很简单 当前n是{{n}} 当前n是{{n}} 点我n+1
1. beforecreate
初始化生命周期，事件，但是还未发生数据代理
此时无法访问vm中的data数据，和methods中的方法
2. created
初始化，数据监测，数据代理
可以访问vm中的data数据，和methods中的方法
3. vue开始解析模板，生成虚拟dom，此时页面还不能显示解析好的内容
4. beforemount
页面显示的是未经vue编译的dom结构，此时所有对dom的操作都不会生效
5. 将内存中的虚拟dom转为真实dom插入页面
6. mounted
页面呈现经过vue编译的dom，至此初始化过程结束
7. beforeupdate
此时数据是新的，但是页面的数据还未来得及更新
8. updated
页面的数据也被更新
9. beforedestroy
销毁前，data、methods都可以用，马上执行销毁操作
10.destroyed
销毁了vm
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oe2BHa5N-1655116238484)(D:\java学习资料\尚硅谷资料（含课件）\02_原理图\生命周期.png)]
{{num}} 点我+1 点我销毁
使用组件三部:
一、定义一个组件
(1)使用Vue.extend(options)进行创建
(2)不要写el，最后要归vm管理的
(3)data写成函数 避免组件被复用
二、注册组件
(1)局部注册 在vm中用components进行注册
(2)全局注册 Vue.component(‘组件名’,组件)
三、使用组件
(1)直接使用组件标签
例如 ：
组件的几个小问题
1、当使用多个单词进行命名的时候 例如:myschool 一般需要把他变成 ‘my-school’ 或者MySchool(仅仅在脚手架下才可以)
2、可以创建组件的时候定义一个名字作为开发者工具中呈现的名字
3、一个简写方式
const school = Vue.extend(options) 可以简写为:const school = options
其实上述所有组件本质上时一个名为vuecomponent的构造函数，且不是程序员定义的 是Vue.extend生成的
我们每次调用Vue.extend时vue都会生成一个全新的vuecomponent
在组件配置中 所有的this都指向vuecomponent
而在vue中 所有的this都指向vue实例对象
vuecomponent里面基本上和vue里面的this一致
vue实例对象简称vm vuecomponent简称vc
vue create 项目名称
npm run serve 启动项目
main.js是整个项目的入口文件
export default 默认暴露 接收时 import xxx from ‘xxx’
export 命名导出 接收时 import {xxx,xxx} from ‘xxx’
import App from ‘./App.vue’ 引入vue
crtl + esc下面的键 可以调出终端
vue inspect > output.js 可以把webpack里面的配置打包成js形式参考
├─ node_modules├─ public│ ├─ favicon.ico:页签图标│ └─ index.html:主页面├─ src│ ├─ assets:存放静态页面│ │ └─ logo.png│ ├─ component: 存放组件│ │ └─ HelloWorld.vue│ ├─ App.vue: 汇总所有组件│ ├─ main.js: 入口文件├── .gitignore: git版本管理忽略的配置├── babel.config.js: babel的配置文件├── package.json: 应用包配置文件├── readme.md: 应用描述文件├── package-lock.json: 包版本控制文件
- vue.js和vue.runtime.xxx.js的区别:(1).vue.js是完整版的vue，包含:核心功能+模板解析器(2).vue.runtime.xxx.js是运行版的vue，只包含:核心功能；没有模板解析器- 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
使用vue inspect > output.js可以查看到Vuej脚手架的默认配置
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实的dom元素，应用在组件标签上是组件实例对象
3.使用方法
打标识：
获取：this.$refs.xxx
点我提示上方的dom元素 功能:让组件接受外部传来的数据
(1).传递数据: 备注：props是只读的，vue底层会监视你对props的修改，如果修改了会发出警告，
如果业务需求需要修改，那么请入职props的内容放在data中一份，然后去修改data中的值
功能：可以把多个组件共用的配置提取出来混合成一个混入对象
使用方法：第一步定义混合，例如：
{
data(){...},
method(){...}
...
}
第二步使用混入，例如：
(1).全局混入：Vue.mixin(xxx)
(2).局部混入：mixins:['xxx']
插件 功能：用于增强vue
本质：包含install方法的一个对象，install的第一个参数时vue，第二个以后的参数是插件使用者传递的数据
定义插件： 对象.install = function (Vue,options){ //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myPrototype = xxx } 使用插件：Vue.use()
## 本地存储WebStoragelocalStorage和sessionStorage统称为WebStorage1、存储内容大小一般支持5mb左右，不同浏览器不一样2、浏览器通过Window.localStorage和window.sessionStorage属性实现本地存储机制3、相关的API： 1，```xxxxxxxStorage.setItem('key','value')``` 该方法接受一个键或者值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值 2，```xxxxxxxStorage.getItem('key')``` 该方法接收一个键名作为参数，返回键名对应的值 3，```xxxxxxxStorage.removeItem('key')``` 该方法接受一个键名作为参数，并把该键名从存储中删除 4，```xxxxxxxStorage.clear``` 该方法会清空存储中的所有数据4、备注： 1，sessionStorage存储的内容会随着浏览器窗口的关闭而消失 2，localStorage存储的内容需要手动清楚才会消失 3，```xxxxxxxStorage.getItem('xxx')```如果xxx对应的value值获取不到，则getitem的返回值为null 4，```JSON.parse(null)```的结果依然是null## vuex首先导入vuex vuex4对应vue3 vuex3对应vue2 ```npm i vuex@4```初始化数据 配置```action```、配置```mutations```、操作文件```state.js``````js
//该文件用于创建vuex中最为核心的store
import Vue from "vue"
//引入vuex
import Vuex from "vuex"
//准备actions--用于相应组件中的动作
Vue.use(Vuex)
const actions = {//响应组件中的动作// jia(context,value){// console.log('jia被调用了',context,value)// context.commit('JIA',value)// },// jian(context,value){// console.log('jian被调用了',context,value)// context.commit('JIAN',value)// },jiaoOdd(context,value){console.log('jiaoOdd被调用了',context,value)if(context.state.sum % 2) context.commit('JIA',value)},jiaoWait(context,value){console.log('jiaoWait被调用了',context,value)setTimeout(() => {context.commit('JIA',value)}, 300);}
}
//准备mutation--用于操作数据(state) 不要写任何的业务逻辑 也不要发ajax请求
const mutations = {JIA(state,value){state.sum = state.sum + value},JIAN(state,value){state.sum = state.sum - value}
}
//准备state--用于存储数据
//初始化数据
const state = {sum : 0
}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state
})组件中读取vuex中的数据$store.state.sum
组件中修改vuex中的数据$store.dispatch('action中的方法名',数据)或者```$store.commit(‘mutations中的方法名’,数据)
当state中的数据需要经过加工后在使用，可以使用getters加工
在store.js中加如下
const getters = { bigSum ( state ) { return state. sum* 10 }
} export default new Vuex. Store ( { actions, mutations, state, getters
} ) 页面用插值语法< h1> 当前求和为：{ { $store. getters. bigSum} } < / h1>
1，mapState方法，用于帮助我们映射state中的数据为计算属性
computed : { ... mapState ( { school : 'school' , address : 'address' } ) ... mapState ( [ 'school' , 'address' ] ) ,
}
2，mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed : { ... mapGetters ( { bigSun : 'bigSum' } ) ... mapGetters ( [ 'bigSum' ] )
}
3，mapMutations方法：帮助我们生成与mutations对话的方式，即：包含this.$store.commit(xxx)的函数
methods : { ... mapMutations ( { increment : 'JIA' , decrement : 'JIAN' } ) , ... mapMutations ( [ 'JIA' , 'JIAN' ] ) ,
}
4，mapActions方法：用于帮我们生成与actions对话的方式，即：包含this.$store.dispatch(xxx)的函数
methods : { ... mapActions ( { incrementOdd : 'jiaoOdd' , incrementWait : 'jiaoWait' } ) , ... mapActions ( [ 'jiaoOdd' , 'jiaoWait' ] )
}
备注：mapActions和mapMutations在使用的时候，如果需要传递参数，需要在模板中绑定事件时绑定好参数，否则参数是事件对象
例如@click="increment(n)
1，安装vue-router，命令：npm i vue-router
2，应用插件：Vue.use(VueRouter)
3，编写router配置项
import VueRouter from "vue-router" ;
import About from "../components/About"
import Home from "../components/Home"
export default new VueRouter ( { routes : [ { path : '/About' , component : About} , { path : '/Home' , component : Home}
]
} )
4，实现切换
< router-linkclass = " list-group-item" active-class = " active" to = " /About" > router-link > < router-linkclass = " list-group-item" active-class = " active" to = " /Home" > router-link > 5，指定展示位置
< router-view> router-view > 1，路由组件通常放在pages文件夹中，一般组件通常放在components文件夹中
2，通过切换，“隐藏”了的路由组件，默认是被销毁了，需要的时候再去挂载
3，每一个组件都有自己的$route属性，里面存储着自己的路由信息
4，整个应用只有一个router，可以通过组件的$router属性获取到
1、配置多级路由规则，使用chileren配置项
import VueRouter from "vue-router" ;
import About from "../components/About"
import Home from "../components/Home"
import Message from "../components/Message"
import News from "../components/News" export default new VueRouter ( { routes : [ { path : '/About' , component : About} , { path : '/Home' , component : Home, children : [ { path : 'Message' , component : Message} , { path : 'News' , component : News} ] }
]
} )
2，跳转要写全路径
< ul class = "nav nav-tabs" > < li> < router- link class = "list-group-item" active- class = "active" to= "/Home/News" > News< / router- link> < / li> < li> < router- link class = "list-group-item" active- class = "active" to= "/Home/Message" > Message< / router- link> < / li> < / ul>
1，传递参数
{{msg.title}} {{msg.title}} 2，接受参数
{{$route.query.id}}
{{$route.query.title}}
1，作用：简化路由跳转
2，使用：
1,给路由起名
{name:'DetailName',path:'Detail',component:Detail,}
2,简化跳转
//简化前
News
//简化后
News //简化前{{msg.title}}
//简化后{{msg.title}}
1，配置路由
{ name : 'DetailName' , path : 'Detail/:id/:title' , component : Detail,
}
2，传递参数
< router-link:to = " `/Home/Message/Detail/${msg.id}/${msg.title}`" > router-link >
< router-link:to = " {name:' DetailName' ,params:{id :msg.id,title :msg.title}}" > router-link >
3，接受参数
{{$route.params.id}}
{{$route.params.title}}
作用：让路由组件更方便的收到参数
name : 'DetailName' ,
path : 'Detail' ,
component : Detail,
props ( $route ) { return { id : $route. query. id, title : $route. query. title}
}
1，作用：控制路由跳转时操作浏览器历史记录的模式
2，浏览器的历史记录分为两种：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3，如何开启replace模式：News
1、作用：不借助
2、具体代码：
methods : { pushShow ( msg ) { this . $router. push ( { name : 'DetailName' , query : { id : msg. id, title : msg. title} } ) } , replaceShow ( msg ) { this . $router. replace ( { name : 'DetailName' , query : { id : msg. id, title : msg. title} } ) } }
3、网页上自带的三个按钮 回退 back 前进 forword 前进后退几步 go
back ( ) { this . $router. back ( ) } , forword ( ) { this . $router. forward ( ) } , go ( ) { this . $router. go ( - 1 ) }
说明 在使用路由跳转之后 路由组件时先销毁在去加载一个新的路由组件
1，作用：让不展示的路由组件保持挂载、不被销毁
2，具体代码：
< keep-aliveinclude = " News" > < router-view> router-view > keep-alive > 1，作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2，具体名字：
1、activated路由组件被激活时触发
2、deactivated路由组件失活时触发
1，作用：对路由进行权限控制
2，分类：全局守卫，独享首位，组件内首位
3，全局守卫:
to 目标路由信息 from 来自路由信息 next 通行
router. beforeEach ( ( to, from, next ) => { console. log ( '前置路由守卫' , to, from) if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) }
} )
router. afterEach ( ( to, from ) => { console. log ( '后置路由守卫' , to, from) document. title = to. meta. title || '哈哈'
} ) 4，独享守卫
beforeEnter : ( to, from, next ) => { if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) } }
5,组件内守卫：
beforeRouteEnter ( to, from, next ) { if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) } } , beforeRouteLeave ( to, from, next ) { console. log ( '离开守卫' , to, from) next ( ) }
对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。 history模式：
地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。 replaceShow(msg){//第二种不能回退
3、网页上自带的三个按钮 回退 `back` 前进 `forword` 前进后退几步 `go````jsback(){this.$router.back()},forword(){this.$router.forward()},go(){this.$router.go(-1)//括号里面正数向前 负数向后 数就是步数}
说明 在使用路由跳转之后 路由组件时先销毁在去加载一个新的路由组件
1，作用：让不展示的路由组件保持挂载、不被销毁
2，具体代码：
< keep-aliveinclude = " News" > < router-view> router-view > keep-alive > 1，作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2，具体名字：
1、activated路由组件被激活时触发
2、deactivated路由组件失活时触发
1，作用：对路由进行权限控制
2，分类：全局守卫，独享首位，组件内首位
3，全局守卫:
to 目标路由信息 from 来自路由信息 next 通行
router. beforeEach ( ( to, from, next ) => { console. log ( '前置路由守卫' , to, from) if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) }
} )
router. afterEach ( ( to, from ) => { console. log ( '后置路由守卫' , to, from) document. title = to. meta. title || '哈哈'
} ) 4，独享守卫
beforeEnter : ( to, from, next ) => { if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) } }
5,组件内守卫：
beforeRouteEnter ( to, from, next ) { if ( to. meta. isAuth) { if ( localStorage. getItem ( 'school' ) === 'qinghua' ) { next ( ) } else { alert ( '你没有权限' ) } } else { next ( ) } } , beforeRouteLeave ( to, from, next ) { console. log ( '离开守卫' , to, from) next ( ) }
对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。 history模式：
地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】 进行投诉反馈！
