vue中的一些用法,持续更新中......

时间:2022-04-12 22:47:32

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)