vue学习笔记二

用户2840793777451598
185 阅读4分钟

父子间传值

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:"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。





avatar
文章
阅读
粉丝