Async await

async是用来修饰函数(方法)的,代表这个函数里面要做异步操作,发请求,读取文件..
有await必有async 不然会报错.如果单有async没什么效果
用await修饰的代码,他所在的函数里的后面的代码暂时不执行,要等await修饰的异步操作结束才执行
不影响await所在函数外的代码执行,该咋咋

vue

vux

单项数据流

state数据驱动应用(驱动应用的数据源)
view 将state映射到视图
action用户的行为导致的状态变化依次循环

如需要多个组件共享数据时,单向数据流容易遭到破坏,so :把组件的共享状态抽取出来,以一个全局的单例模式管理,组件数构成一个大的视图, vue-compents ==>action ==> montion ==>state 依次循环

state:{ 放数据 }

mutations :更改数据的方法用commit调用

actions:{} 异步方法 this.$stroe.dispach

getters: vuex的计算属性,假如不止一个组件需要对sate里面的数据进行过滤显示,如果每个组件都在自己的组件写一个计算属性多此一举,可以直接在store中写上,组件中直接调用 :this.$store.getters.计算名xx

mapGetters:辅助函数

调用计算属性getters计算的数据时,名字可能会有点长{{this.$store.getters.计算名xx}},我们依然可以用computer计算属性再封装一层,但是每次封装有点麻烦

so,我们可以直接 import{mapGetters}from 'vuex'

<p>{{nameLen}}</p>

computed:{
//nameLen(){
//return this.$store.getters.nameLen
//}
...mapGetters([
'nameLen',
'xxxx' //store中的getters中的属性名
])
}

state:{
num:2
useindo:{
    name:"小花"
}
}

moutations:{
    
xxx方法1(state){//参数是state
state.num++  //如果在这里放异步操作,如定时器,值会改变,但是没有记录,so不能放异步
}
    
}

actions:{
    xx(context){  //context参数是上下文对象,也就是store对象
        
    }
}
getters:{
    nameLen(state){ //第一个参数也是固定sate
        return state.useindo.name.length
    }
}

调用state中的数据 this.$store.state.num

使用mountations中的方法更改数据: this.$store.commit( ' xxx方法1 ' )

如果state中的数据嵌套比较多,写起来麻烦

<p> {{this.$store.state.userinfo.name}} </p>
<p> {{isname}} </p>
可使用计算属性简化:
conmputers:{
 isname(){
 return this.$store.state.userinfo.name
 }
}

修饰符

事件修饰符

@click.stop()阻止事件冒泡

 <div id="app">
    <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div>
 </div> 
  var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } });  //将会先弹出“noclick”,再弹出“dodo”。

 <div id="app">
    <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div>
 </div> 
  var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } });  //只弹出“noclick”

@click.prevent()阻止事件默认行为

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>   //阻止a标签跳转，仅执行函数test4

项目

// @是vue-cli里的特殊符号,代表找到src文件夹
// import xxx from '../../../components/xxx'
import xxx from '@/components/xxx'