Vue

Vue学习笔记

Posted by Kaka Blog on April 18, 2020

目录解析

src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。

生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

  • beforeCreate
  • created
  • beforeMount
  • mounted
    • beforeUpdate
    • updated
  • beforeDestroy
  • destroyed

内置的方法、属性运行顺序：props => methods =>data => computed => watch

Vue构造器

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({
  // 选项
})
  • 在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
  • data 用于定义属性。
  • methods 用于定义的函数，可以通过 return 来返回函数值。
  • `` 用于输出对象属性和函数返回值。
  • 使用 v-html 指令用于输出 html 代码。
  • HTML 属性中的值应使用 v-bind 指令，用来响应地更新 HTML 属性。
    • v-bind:href缩写:href
    • v-bind:class 设置样式属性
  • v-on 指令，它用于监听 DOM 事件
  • v-on:click缩写@click
  • v-model 指令来实现双向数据绑定。
    • .lazy 在 “change” 而不是 “input” 事件中更新
    • .number 自动将用户的输入值转为 Number 类型
    • .trim 自动过滤用户输入的首尾空格
  • 条件判断使用 v-if 指令。
  • v-show 指令来根据条件展示元素。
  • v-for 可以绑定数据到数组来渲染一个列表，可以通过一个对象的属性来迭代数据。
  • 计算属性：computed，基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。computed 属性默认只有 getter。
  • 计算属性：methods，在重新渲染的时候，函数总会重新调用执行。
  • 监听属性 watch，响应数据的变化。 
      vm.$watch('counter', function(nval, oval) {
      alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
  });

组件

  1. Component

组件可以扩展 HTML 元素，封装可重用的代码。

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>
  1. Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！ 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

注意：data 选项是一个函数，组件不相互影响

路由

  • <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。默认会被渲染成一个 <a> 标签
    • to 的值传到 router.push()
    • 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

必备知识

调用关系：App.vue -> router/index.js -> components/xxx.vue

页面跳转

1、在router添加路由

{
     path: '/bookshelf',
     name: 'bookshelf',
     component: Bookshelf
}

2、添加跳转链接

<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
             :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
              <span class="tabNav-txt">书 架</span>

</router-link>

二级路由

1、添加路由

{
      path: '/gouwuche',
      name: 'gouwuche',
      component: gouwuche,
      children:[
        {
            path: '/gouwuche/shoucang',
            component: shoucang,
        },
        {
            path: '/gouwuche/xihuan',
            component: xihuan,
        },
        {
            path: '/gouwuche/',
            component: shoucang,
        }
      ]
}

2、在父组件使用router-view标签给vue组件的跳转提供一个容器。

去掉#号

默认是hash模式，设置history模式即可去掉#号，在router路由文件进行设置。

new Router({
  mode: 'history',
  routes: []
})

页面使用组件

<template>
  <div>
    <Xxx></Xxx>
  </div>
</template>
<script>
  import xxx from '../components/xxx.vue'
  // 注册
  export default{
    components: {
      Xxx
    }
  }
</script>

定义事件

1、定义事件总线 Msg.vue

import Vue from 'vue'
export default new Vue

2、定义事件，传值

<script>
  import Msg from './Msg.vue'
  export default{
    // 定义事件
    methods: {
      menu1: function() {
        // 传值，会触发on事件
        Msg.$emit("val", "1");
      }
    }
  }
</script>

3、接收传值

<script>
  import Msg from './Msg.vue'
  export default {
    data() {
      return {
        // 赋值
        kk: 0
      }
    },
    // 获取值
    mounted: function() {
      // 下划线表示副本
      var _this = this;
      // 接收
      Msg.$on('val', function(m) {
        // 这里不能用this，因为这里的this指的是on，不再是当前的vue
        _this.kk = m;
      })
    }
  }
</script>

注意：事件总线的扩展名需要是js，所以Msg.vue需要改成Msg.js

axios获取数据

1、安装axios

npm instal axios --S

2、在main.js引用注册axios

import axios from 'axios'

// 全局注册
Vue.prototype.$http = axios

3、页面使用

<script>
  export default {
    name: "show",// div定义的name
    data() {
      var _this = this;
      this.$http.get(url).then(function(res){
        _this.list = res.data;
      })
      return {
        list: []
      }
    }
  }
</script>

父子组件传值

父组件：

<GoodList :goodId="1" />

子组件：

props: {
  goodId: Number
},
// 监听值的变化
watch: {
  goodId() {

  }
}

Vuex

专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

组成介绍：

  • state：数据仓库
  • getter：用来获取数据
  • mutation：用来修改数据，同步，commit方法提交
  • action：用来提交mutation，异步，dispatch方法提交

安装

1、安装vuex

npm install vuex

2、创建vuex实例：new Vuex.store()

import Vuex from "vuex"

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  }
})

3、main.js中将vuex实例挂载到vue对象上

new Vue({ store, render: h => h(App) }).$mount(“#app”)

使用Vuex

1、定义state属性

2、在main.js定义mutation方法

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    countIncrease(state) {
      state.count++
    },
    countIncrease(state, v) {
      state.count = v
    }
  }
})

3、在组件修改state

export default {
  methods: {
    countIncrease() {
      this.$store.commit("countIncrease");
      // 带参数
      this.$store.commit("countIncrease", 100);
    }
  }
}

参考资料

目录
    友情链接