[TOC]
vue 是一个轻量级的mvvm框架 数据驱动+组件化的前端开发
模板
new Vue({
el:'#app',
data:{
},
methods:{//定义方法
},
components:{//定义组件
},
computed:{//带缓存
}
})
数据绑定
v-model 双向绑定
v-pre 正常显示 不解析标签
{{ this will not be compiled }} 显示的是{{ this will not be compiled }}
v-html解析对象内字符串
{{ msg }}
v-if v-show
v-if ：可以根据表达式的值在DOM中生成或移除一个元素。
v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。
v-if:支持语法；
v-show:不支持语法
事件 v-on: 或者 @
v-on:click @click 点击事件
@keyup.enter || @keyup.enter.native 回车事件 键盘别名
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
属性绑定
v-bind 或者 : ( 完整写法与简写 )
{{ n + 1 }}
{{ n + 1 }}
image-20200806142934694
其它
$event 传事件
new Vue({
el:'#app',
data:{
},
methods:{
test(e){
console.log(e)
},
test2(num,e){
console.log(e)
}
}
})
vue遍历数组
data:{
list:[1,2,3,4,5,6]
}
--索引值--{{i}} --每一项--{{item}}
为什么要使用:key
js 相关
js 数组 添加 删除元素unshift() pushi() shift() pop()
unshift()方法：在数组的前端添加项
push()方法：从数组末端添加项
shift()方法：移除数组中的第一项并返回该项
pop()方法：从数组末端移除项
js splice 删除指定下标元素 将元素添加到指定下标
数组操作 arr.filter(fn()) arr.map(fn) arr.reduce(fn(pre,curenr),obj)
array.filter(function(currentValue,index,arr), thisValue)
参数:currentValue:遍历时的item的值 index 遍历时的下标 thisValue 回调函数中this的值
回调函数返回 true(当前元素不被过滤) 或false (当前元素被过滤)
array.map(function(currentValue,index,arr), thisValue)
参数:currentValue:遍历时的item的值 index 遍历时的下标 arr 源数组 thisValue 回调函数中this的值
回调函数返回值 任何值 (这个值将是最终结果对应下标处的那个值)
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数:currentValue 遍历时的item的值 currentIndex对应下标 arr 源数组 initialValue total的初始值
返回值:返回值将作为下次遍历时 total的值 遍历结束时 将作为reduce的返回值
Object.defineProperty(obj,prop,{})
VUE 过滤器
局部过滤器
全局过滤器
本地存储
localStorage
- 没有时间限制的数据存储
var arr=[1,2,3];
localStorage.setItem("temp",arr); //存入 参数： 1.调用的值 2.所要存入的数据
console.log(localStorage.getItem("temp"));//输出
sessionStorage
将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。页面关闭后，sessionStorage 中的数据被清空
sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");
sessionStorage.clear();
VUE 组件
全局组件
组件只能有一个根元素,如果有多个,可以用一个div 进行包裹
注意
局部组件
组件中的变量
模板中使用的变量只能在组件中获取,是不能直接从与el同级的data字段中取得
子组件
注意子组件中的data字段是一个函数
父子组件传值 自定义属性
在组件上绑定自定义属性 :myStr="parentData" 传入父组件中的变量
子组件中使用 props来接收 定义并初始化后 子组件中可以直接使用props中的变量
子组件向 父组件传值 (事件机制)
子组件绑定事件 触发子组件中对应的函数 函数中使用
$emit('自定义事件名称',需要传递的值)
来触发自定义事件,在父组件中绑定自定义事件,并传入触发事件需要执行的函数,在父组件中定义该函数,并使用参数接收来自子组件中的值 ,接收到后即可 进行相应的操作
VUE 插槽 ( slot )
组件中使用插槽
默认插槽
组件中的div 将替换到模板中的 slot 标签
具名插槽
在模板中给slot 一个名字 在使用组件时,标签中使用slot属性来应用具体的插槽
作用域插槽
注意模板的 id 与 组件的名字不要弄混了
app data中的数据通过组件上的自定义属性传入组件,组件通过props接收,模板中在slot 上绑定自定义属性,组件中的标签使用 slot-scope=“scope” 取得来自模板上属性的值 (被放在scope 变量中) button( 引用插槽的地方 ) 触发点击事件后获得形参的值( 注意这里的button 不属于MyTable组件,所以相应的函数,应放在与el 字段同级的method 中)
npm
npm init 初始化项目 -y 省去了敲回车的步骤
npm init -y
安装jquery依赖
-S :--save 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D:--dev 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D
什么都不写: 包名不会进入package.json里面，因此别人不知道你安装了这个包
npm install jquery -S
npm install webpack webpack-cli -D
VUE 生命周期
export default {
name:'App',
data(){
return {
}
},
methods:{
},
filters:{
},
components:{
},
beforeCreate(){
},
created(){
},
beforeMount(){
},
mounted(){
},
beforeUpdated(){
},
updated:(){},
beforeDestroy(){},
destroyed(){}
}
mixin (抽取公用部分)
vue.config.js
修改项目端口号
module.export= {
devServer:{
port:8005
},
publicPath:'.',//run build 后修复js路径问题
}
开发环境 生产环境
npm i axios -S
解决跨域问题
设置代理
请求封装 封装axios封装 请求
重写请求实例 每个请求自动携带参数 验证操作
请求前拦截 返回结果后拦截
请求经过自定义实例
axios 第二种传参 传入对象
VUE 路由 前端路由
前端路由
页面路由由前端控制 (vue-cli 配合vue-router 实现)
后端路由
页面路由由后端控制 (MVC 中的Controller 实现)
**vue-cli 生成的项目就是单页面应用, dst 里面只有一个html 页面 **
前端路由的核心是什么?
改变URL ,但是页面不进行整体刷新
实现前端路由的两种方式
location.hash='/cc'
history.pushState('','','/cc')
VUE 项目创建
index.js
VUE 页面跳转
VUE 页面间传值
动态路由传参
VUE懒加载
懒加载js 别名
下载好了但并未加载
点击相应页面 只加载对应页面js
路由嵌套
keep-alive的使用
实现页面缓存,避免多次重复渲染降低性能
使用后,里面的页面并不会销毁,不使用,每次都会重新创建,默认缓存全部
include 属性
exclude 属性
VUE 路由守卫
Vuex
集中式状态管理
定义store
配置store
使用store
使用计算属性
取值 (this.$store.state)
取值 (mapState)
取值 (使用别名)
Getter 取值
赋值 ( this.$store.comit(method,value) )
mutations actions
传参
mutations中不能写异步操作,异步操作写在 actions 中
store/index.js
组件中
使用modules
当共享的数据越来越多,越来越多,即可使用modules,进行有个分类
store/category.js
store/index.js