vue学习笔记二

父子间传值

一、父组件可使用 props 把数据传给子组件。
二、子组件可使用 $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:"iwen@qq.com",
   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。复制代码