返回首页 - Notes - 2019

学习 Vue


Vue 基础

最简单的 Vue 示例:

<div id="app">
  {{ text }}
</div>
let app = new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue',
  },
});

只有当 Vue 实例创建时,存在于 data 中的属性才是响应式的,后续添加的无效

生命周期钩子的 this 上下文指向调用它的 Vue 实例,不能在选项属性或回调上使用箭头函数


模版语法

使用 {{ data_name }} 进行普通文本的数据绑定,支持使用 JavaScript 表达式

如果需要将数据的内容作为 HTML 渲染出来,可以这样写:<div v-html="data_name"></div>

{{ xxx }} 不能直接用在 HTML 自有属性上,自有属性中要使用数据绑定,需要借助 v-bind,如:<div v-bind:id="data_name"></div>

模板表达式在沙盒中执行,只能访问全局变量的一个白名单,不能在模板表达式中试图访问自定义的全局变量


常用指令

v-bind:xxx 可以缩写为 :xxxv-on:xxx 可以缩写为 @xxx

v-bind:[xxx] 可以缩写为 :[xxx]v-on:[xxx] 可以缩写为 @[xxx]

v-bind:classv-bind:style 中可使用数组和对象语法


计算属性 和 侦听属性

可在 computed: 里面添加计算属性,每个计算属性对应一个方法,可直接当变量使用,里面对数据做一些处理后再 return 出来

可在 watch: 里面添加侦听属性,每个侦听属性也对应一个方法,可侦听某个变量的变化,同步修改其他变量的值

计算属性是自带缓存效果的,默认写的 get 逻辑,但也可以分开成独立的 getset

侦听属性可用于处理异步任务

<template>
  <div>
    <p>请提出一个问题:<input v-model="question" /></p>
    <p>{{ answer }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import * as _ from 'lodash';

export default {
  data() {
    return {
      question: '',
      answer: '等待你提问',
    };
  },
  created: function() {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
  },
  watch: {
    question: function() {
      this.answer = '等待你停止输入...';
      this.debouncedGetAnswer();
    },
  },
  methods: {
    getAnswer: function() {
      if (this.question.indexOf('?') === -1 && this.question.indexOf('?') === -1) {
        this.answer = '问题必须包含问号';
        return;
      }
      this.answer = '思考中...';
      axios
        .get('https://yesno.wtf/api')
        .then(response => {
          this.answer = _.capitalize(response.data.answer);
        })
        .catch(error => {
          this.answer = '发生错误 ' + error;
        });
    },
  },
};
</script>

<style></style>

date:2019-04-15、2019-04-18、2019-05-01