1.VUE脚手架兄弟传值、ref用法、$nextTick改值、.sync语法糖：
在main.js文件中先配置：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
/* 事件总线的方式 */
/* 在构造函数Vue的原型身上添加一个$bus属性
属性的值是Vue的实例化对象 */
/* 事件总线传值不局限于兄弟组件传值
总的特征 先监听自定义事件 再发送自定义事件 */
/* 频繁使用浪费性能 */
Vue.prototype.$bus = new Vue()
new Vue({
render: h => h(App),
}).$mount('#app')
组件A：
<template>
<div>
<h1 @click="send">我是ChildA</h1>
</div>
</template>
<script>
export default {
name:"ChildA",
methods:{
send(){
this.$bus.$emit('childV','兄弟组件通信先监听后发送')
}
}
}
</script>
<style>
</style>
组件B：
<template>
<div>
<h1>我是ChildB</h1>
<h2>{{childaStr}}</h2>
</div>
</template>
<script>
export default {
name:"ChildB",
data(){
return{
childaStr:''
}
},
created(){
/* 兄弟组件通信,需要使用$on 先监听 childA发送过来的自定义事件,
值用回调函数接收 */
console.log(this.$bus);
this.$bus.$on('childV',(v)=>{
console.log('childA传过来的值');
this.childaStr = v
})
}
}
</script>
<style>
</style>
组件C：
<template>
<div>
<h1>我是ChildC</h1>
<h2 @click="change">{{msg}}</h2>
</div>
</template>
<script>
export default {
name:"ChildC",
/* props:['msg'], */
props:{
msg:{
type:Object,
/* 加了 required:true 表示必传属性 如果不传会有警告 */
required:true
}
},
methods:{
change(){
this.$emit('update:msg',{name:"和谐 友善"})
}
}
}
</script>
<style>
</style>
父文件：
<template>
<div id="app">
<h1 ref="app">我是app页面</h1>
<h1 ref="hh">{{str}}</h1>
<h1 @click="changeStr">{{strA}}</h1>
<button @click="getText">获取文字</button>
<!-- <button @click="updateText">修改文字</button> -->
<child-a ref="childa"></child-a>
<child-b></child-b>
<child-c :msg.sync="msg"></child-c>
</div>
</template>
<script>
import ChildA from '@/components/ChildA.vue'
import ChildB from '@/components/ChildB.vue'
import ChildC from '@/components/ChildC.vue'
export default {
name: 'App',
components: {
ChildA,
ChildB,
ChildC
},
data(){
return{
strA:'我爱鱿鱼须',
str:'我爱学VUE',
msg:{name:'富强 民主'}
}
},
methods:{
getText(){
console.log(this.$refs.hh.innerHTML );
/* 获取str的同时修改内容 */
this.str = '我爱学JS'
/* 在获取dom元素的内容的时候,如果之前有修改data中的值
那么将获取不到最新的dom的值你会发现获取的值还是原来的 */
/* 想要解决 使用 this.$nextTick 在回调函数中来获取最新的修改后的
dom的值 */
/* 在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM */
this.$nextTick(()=>{
this.str = '我爱学JS'
})
},
changeStr(){
this.strA= '我爱youyuxi'
this.$nextTick(()=>{
this.strA= '我爱youyuxi'
})
}
/* updateText(){
this.str = '我爱学JS'
} */
},
mounted:function(){
/* 通过refs 方法也可以获得子组件的属性和值 */
/* 获取的内容和 this.$children[0] 一样的 */
console.log(this.$refs.childa);
console.log(this.$children[0]);
console.log(this.$refs.app);
/* $refs 操作于原生的dom就可以获取到原生dom元素 */
this.$refs.app.style.background = 'red'
},
created(){
/* this.$bus.$on('childV',(v)=>{
console.log('app页面接收的值',v);
}) */
},
/* methods:{
handler(){
this.msg='子改父'
}
} */
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
左侧文件目录：
2.axios基础:
<template>
<div id="app">
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
created(){
//.get 和 .post 都是简写
//执行 GET 请求
//第一种 get加参数可以在请求上直接加
/* axios.get('https://cnodejs.org/api/v1/topics?name=zhangsan')
.then(res=>{
console.log(res);
})
//第二种 使用{params:{xxx:xxx}}
axios.get('https://cnodejs.org/api/v1/topics',{
params:{
name:"zhangsan"
}
})
.then(res=>{
console.log(res.data);
})
.catch(err=>{
console.log(err);
})
//axios 何如使用post请求
axios.post('',{
email:"",
password:""
})
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
}) */
/* 使用全面配置的方式发送post请求 */
axios({
method:'get',
url:'http://timemeetyou.com:8889/api/private/v1/users',
headers:{
'Authorization':''
},
/* 全面配置中传参数 要用params 不要用data */
params:{
pagenum:1,
pagesize:10
},
/* 如果是get 要用 params*/
data:{
email:'',
password:''
}
})
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
