1、跳转用法
@1、在template模板中通常使用router-link to='url'
@2、在js中
1、this.$router.push({path: ''/order/index''});
2、this.$router.push({path: '/order/page1',query:{ id:'2'}});
3、this.$router.push({name: '/order/page2',params:{ id:'6'}});
第一种不传参直接跳转到某一个页面,第二种,第三种传参跳转到某个页面,第二种和第三种不同的是都传了参数过去,第二种参数在url中显示第三种不显示
2、this的用法js中的this指向的该元素,在vue中this指代的是vue这个对象。
3、@1、prop 父组件向子组件传递信息,着重与数据传递,并不能调用子组件的属性和方法
@2、$ref 着重与索引主要用来调用子组件的属性和方法,不擅长数据传输,作用于元素的时候相当于选择器
@3、$emit 子组件向父组件传值,vm.$emit( event, arg ),$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
@4、vm.$emit(event),父组件调用@event时,父组件调用了该函数
4、v-if和v-show的区别
v-if条件判断,如果为false将不显示在html中也不存在,而v-show如果为false不显示但是在html中存在只不过属性为display:none;
5、vue store 中的commit和dispatch
this.$store.commit(fn,value)同步操作
this.$store.dispatch(fn,value)异步操作
6、filters过滤器,前端用管道进行过滤{{status | statuFilter}},此时如果status为0,则会显示为未付款
filters:{
statuFilter:function(type){
switch(type){
case "0":
return "未付款";
case "1":
return "付款中";
case "2":
return "已付款";
default:
return "";
}
}
}
简单的讲,前端表达式 value | filter(value)
filter这个函数接收到了value值,进行对value的操作,返回的值即是过滤后的值。
7、v-bind: 简写:,html属性不能使用双大括号形式绑定,只能使用v-bind指令
8、v-text与v-html的区别
前者不解析html标签渲染包含的信息,后者解析html标签之后渲染信息。此外这两个指令还有另一个用途“防抖”。
9、事件修饰 .stop, .prevent , .once , .self , .capture
stop:阻止事件冒泡
prevent:阻止默认事件
once:只触发一次
self:只有点击自己时才触发
capture:把冒泡改为倾听,冒泡从内岛外,倾听从外到内
10、compont用法,详解下方链接
https://www.cnblogs.com/samve/p/9424793.html
11、钩子函数,钩子函数的作用例如页面装载后开始读取一些数据进行初始化
beforecreated 组件创建前 1
created组件创建后 2
beforeMount 装载前 3
mounted装载后 4
beforeUpdate 更新前 5
updated 更新后 6
beforeDestroy 销毁前 7 this.$destroy 销毁,销毁实例,实例销毁了不存在上述操作
destroyed 销毁后 8
12、t如何修改itle,修改index.html文件,一般html文件在根目录下或者public目录下
13、v-for 倒序 reverse() 数组顺序颠倒
注释:当data的某个属性是一个数组时,用v-for可以遍历,但显然数组是可能变动的,因此对以下变动也进行数据绑定;
push() 数组末尾添加
pop() 数组末尾取出
shift() 数组开头取出
unshift() 数组开头添加
splice() 删除并插入
sort() 排序
reverse() 数组顺序颠倒
当利用以上方法变更数组时,被渲染的内容会实时更新;
14、原对象中无某个键值想要添加一个新的键值
this.$set(this.obj,"key","value");
this.$delete(this.obj,"key");
15、vue中遍历的写法
this.obj.foreach((el,index)=>{
})
遍历查找某一个值出现的次数同样可以用filter过滤去查找
this.obj.filter(item=>item.state==='0').length //(过滤对象中state===0的个数有多少个)
16、复选框选中之后为true,未选中为false
checkbox 双向绑定一个变量之后可以通过选中来改变这个变量,改变的变量为布尔值
17、Axios (ai'ke'c'l's)
npm install axios
CDN地址
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios get的用法,.catch处理错误函数
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); // 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios post请求,axios.post的三种用法 传送门
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行多个请求
function getUserAccount() {
return axios.get('/user/12345');
} function getUserPermissions() {
return axios.get('/user/12345/permissions');
} axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
18、map函数 遍历一个数组对这个数组进行操作变成一个新的数组,或者对这个数组进行值的判断取出想要的一条或多条
var memo=[{type:'text',content:'abcdefg'},{type:'number',content:'12345678'}]
var text=[],number=[]
memo.map(function (v,k) {
if(v.type=='text'){
text.push(v.content)
}
if(v.type=='number'){
number.push(v.content)
}
})
19、forEach循环
this.arr.forEach((value,index)=>{this.value=value+=value})
20、reduce 计算数组元素相加后的总和
array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
total:初始值,currentValue 当前元素 currentIndex 当前元素索引 arr 当前元素数组对象 initialValue 传递给函数的初始值
return this.arr.reduce((total,v)=>{return total+v.count*v.prize},0)
21、活动路由的颜色 设置路由选中后路由连接的颜色,例如导航栏点击了相应的导航跳到了新的页面,导航栏相应的需要变颜色
linkActiveClass:'active'
22、工程化项目后在A组件想要引入B组件分三步,
在组件的同级目录下,新建个index.js
import Login from "./Login"
export default{
install:function(Vue){
Vue.component("Login",Login)
}
}
一、引入 import b from "./b"
二、声明 components {b}
在main.js下面引用组件并use
import Login from '@/components/common/login'
Vue.use(Login);
三、在template里面使用 <b></b>,<b></b>为全局组件哪里都可以调用
23、vueX状态管理,状态管理在简单的计算中无需使用因为vuex有点太重了
状态管理的四个属性
state----定义状态属性
getters----定义读取状态的方法
actions----定义改变状态的方法(用户调用)
mutations---定义改变状态的方法(实际上的状态改变是由mutations处理,actions调用mutations,用户调用actions)