父子间传值
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
父传子：
1 父组件 data(){
return{
msg:"儿子儿子，我是你爸爸",
}
},复制代码2 父组件
import Child from "./Child"
<Child :title="msg" />
3 子组件
<div>
{{ title }}
</div>
4 子组件
props:['title'],
还可指定类型：
props：{
title:String,
title2:[String,Number],
num:{
type:Number,
default:5 【默认值】
},复制代码}
复制代码子传父：
1 子组件
<button @click="sendMsg">按钮</button>复制代码2 子组件
data(){
return{
info:"嗯嗯嗯"
}
},复制代码3 子组件
methods:{
sendMsg(){
this.$emit("info",this.info) 【参数1：key 参数2：数据】
},
}复制代码4 父组件
<div>
{{ info }}
<Child @info="handlerMsg" />
</div>复制代码5 父组件
data(){
return{
info:""
}
},复制代码6 父组件
methods:{
handlerMsg(data){
this.info = data;
}复制代码vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。复制代码什么情况下使用vuex
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
确实是如此——如果您的应用够简单，您最好不要使用 Vuex。
一个简单的 global event bus 就足够您所需了。
但是，如果您需要构建是一个中大型单页应用，
您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。复制代码Actions
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。复制代码简单操作：
1 cnpm install vuex --save
2 创建一个store仓库：
在src下建一个store文件夹：
在store下建index.js：
import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)复制代码export default new Vuex.Store({
});
复制代码3 main.js下：
import store from "./store"
new Vue({
store,
})
复制代码4 在仓库中定义数据：
用state，定义了count：10
export default new Vuex.Store({
state: {
count: 10
},});复制代码5 在仓库中定义方法：
用mutations分别定义了count 的++和--
export default new Vuex.Store({
state: {
count: 10
},
mutations: {
increment(state) {
state.count++;
},
decrease(state) {
state.count--;
}
},});复制代码6 在组件里用到++ 的事件触发处定义方法：
methods:{
add(){
// this.$store.commit("increment");
this.$store.dispatch("increment");
}复制代码7 在组件里用到--的事件触发处定义方法：
methods:{
min(){
// this.$store.commit("decrease");
this.$store.dispatch("decrease");
}
},复制代码8 如果要做条件判断，例如购物车，在仓库中：
export default new Vuex.Store({
state: {
count: 10
},
mutations: {
increment(state) {
state.count++;
},
decrease(state) {
state.count--;
}
},
getters: { getState(state) {
return state.count > 0 ? state.count : 0
}
}
});复制代码9 在需要共享conut这个数据的组建里：
获取到getState，放至标签里{{ getCount }}
computed:{
getCount(){
// return this.$store.state.count;
return this.$store.getters.getState;
}
},复制代码过渡与动画
1 在css过渡和动画中自动应用class
过渡类名：
v-enter：进入开始
v-enter-active：执行过程中
v-enter-to：结束动画
v-leave：离开开始
v-leave-active：离开过程
v-leave-to：离开结束复制代码例：一
<transition name="fade"><p v-show="show">哈哈</p></transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>复制代码二：
<transition name="hello">
<p v-show="showAnim">嘿嘿</p>
</transition>
<style>
.hello-enter-active{
animation:bounce-in 1s ease;
}
.hello-leave-active{
animation:bounce-in 1s ease reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>复制代码2可以配合css动画库
<transition name="world" enter-active-class="animated flip"
leave-active-class="animated flip">
<p v-show="libs">呵呵</p>
</transition>复制代码axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
1.cnpm install axios --save
2.main.js里：
import Axios from "axios"
Vue.prototype.$axios = Axios复制代码3.请求
get请求：
this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{
type:"junshi",
count:30
}
})
.then(res => {
this.newsData = res.data;
console.log(res.data);
})
.catch(error => {
console.log(error);
})
post请求：
form-data:?name=iwen&age=20
x-www-form-urlencoded:{name:"iwen",age:20}
注意：axios接受的post请求参数的格式是form-data格式
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
user_id:"[email protected]",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error);
})复制代码4.全局的axios配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';复制代码其他
1. <style scoped></style>
scoped：样式只在当前组件内生效。
2. 插槽：
单个插槽，具名插槽，作用域插槽（数据是子传父）
3.自定义指令：
创建一个自定义指令：
例：自动聚焦
directives:{
focus:{
inserted: function (el) {
el.focus()
}
},复制代码<input v-focus type="text">复制代码4.过滤：
给数字前加符号：
{{ price | moneyChange }}复制代码filters:{
moneyChange(value){
if(typeof value === "number"){
return "￥"+value;
}
return value;
},复制代码data(){
return{
price:20,
}
},复制代码5.数据模拟
Mock：数据模拟
1.自己创建JSON文件。使用get请求形式访问数据
优点：方便，快捷
缺点：只能存在get请求
2.项目中集成服务器，模拟各种接口
优点：模拟真实线上环境
缺点：增加开发成本
3.直接使用线上数据
优点：真实
缺点：不一定每个项目都存在
4.数据模拟库
http://mockjs.com/
MockJS:
语法：
'list|1-10': [{
'id|+1': 1
}]
1.'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
2.'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
3.'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
4.'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。