Vue-基础中的基础-学习笔记

参考资料：
Vue官方文档教程：https://cn.vuejs.org/v2/guide/installation.html

我现在做的工作的前端部分用到了Vue，但基本只是用一下Element UI，我也感觉Element UI框架很适合做一些xxx管理系统之类的东西。我不会前端，不会JavaScript和Vue，所以浅浅地学习一些基础知识，以便快速加入工作项目的开发。但我本人并不是很喜欢Vue。

• Element UI
• 声明式渲染
• 条件与循环
• 处理用户输入
• 组件化应用构建
• 生命周期
• 计算属性和侦听器
• <template> 元素
• v-if，v-show，v-else，v-else-if与key
• 列表渲染
• 事件处理
• 表单输入绑定
• v-bind和v-model的区别

Element UI

这种前端UI框架一般由专业前端开发人员来做，我可能只需要看懂就可以了，需要改代码的时候可以查文档：https://element.eleme.cn/#/zh-CN/component/installation

声明式渲染

大部分内容都可以在官方文档中找到，官方的介绍入门教程非常简短但全面。我这里记录几处东西用来方便自己速查。

javascript代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

HTML代码：

<div id="app">
  {{ message }}
</div>

可以注意到new的Vue对象中的el属性的值对应着相应HTML代码的标签的id属性。双大括号可以将Vue对象中data下的属性输出出来，这种方式叫做文本插值。

还有另外一种方式叫元素绑定：

javascript代码：

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

HTML代码：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

使用了v-bind指令，将这个span标签的title attribute与message property绑定在一起。attribute和property都可以翻译为属性，我自己把attribute理解为标签的属性，property理解为Vue示例的data下的属性。

条件与循环

控制一个元素是否显示:

javascript代码：

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

HTML代码：

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

使用了v-if指令，如果seen property的值为false，则不显示。

我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。 ——官方文档

v-for指令可以绑定数组的数据来渲染一个项目列表：

javascript代码：

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

HTML代码：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

效果如下：

处理用户输入

表单输入和应用状态之间双向绑定指令v-model：

JavaScript代码：

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

HTML代码：

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

这个代码会出现一个input输入框，如果改动输入框中的文本，实际就是直接改动message的值，上面p标签展示的message的值也会随之改动。

事件监听器指令v-on，可以通过它调用在 Vue 实例中定义的method：

JavaScript代码：

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

HTML代码：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。（来自文档）

可以看到我们的Vue实例中出现了第三个属性methods，我把它理解为写一些方法的地方。可以向上边一样用v-on:click把一个button等标签的click事件绑定上methods: {}中的方法，每次点击这个button就会调用这个方法。

组件化应用构建

这部分我几乎用不到，我工作中基本不会复用组件，也就没必要创建一个组件。官方文档：https://cn.vuejs.org/v2/guide/index.html#组件化应用构建

生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

这个东西理解起来需要经验，可以慢慢来。

计算属性和侦听器

有时候在HTML模板中展示的数据会做一些逻辑处理：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这种直接在模板中放入逻辑的方式会让模板过重且难以维护，我们可以使用计算属性（computed: {}）：

JavaScript代码：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

实现翻转功能的方法放到一个匿名函数里，用作 property vm.reversedMessage 的 getter 函数：

HTML代码：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch: {}。当有一些数据需要随着其它数据变动而变动时很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

但有时候我们可能有监听一段内容是否被改变的需求，如果被改变，就调用一些函数。

HTML代码：

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

JavaScript代码：

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。除了 watch 选项之外，还可以使用命令式的 vm.$watch API。

<template> 元素

<template>这个元素像是个对页面没什么影响的标签，有时常结合 v-if 和 v-for 使用。

v-if，v-show，v-else，v-else-if与key

v-show 用法跟 v-if 差不多，区别是 v-if 只有条件为真时才开始渲染，v-show 却始终在DOM中，当条件为真时就显示出来。

可以使用 v-else 指令来表示 v-if 的 else 块，v-else-if 充当 v-if 的 else-if 块，可以连续使用。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

key的部分我觉得官方文档的例子非常好，我直接搬过来：
https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

如果设计一个按按钮，点击一下按钮，输入框就从 Username 的输入框变成 Email 的输入框，但内容并没有变化。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，输入框都将被重新渲染，内容就重新为空，只显示占位字符串。<label> 元素仍然会被高效地复用，因为它们没有添加 key attribute。

官方文档不推荐同时使用v-if 与 v-for。但当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

列表渲染

这部分很简单，用的也很多。可以直接看官方文档：
https://cn.vuejs.org/v2/guide/list.html

一般都是把需要展示的列表内容取到，映射到一个对象里，把这个对象放在data中。在前端用 v-for 遍历这个对象，不要忘记加一个key，方便Vue跟踪每个节点的身份。

数组更新检测（这一部分感觉做分页功能的时候用得到）：
https://cn.vuejs.org/v2/guide/list.html#数组更新检测

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

一般不直接写v-on:click="counter += 1"这种代码，而是绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符：https://cn.vuejs.org/v2/guide/events.html#事件修饰符

按键修饰符：https://cn.vuejs.org/v2/guide/events.html#按键修饰符

表单输入绑定

这一部分可能常用，重点关注：https://cn.vuejs.org/v2/guide/forms.html

v-bind和v-model的区别

https://segmentfault.com/a/1190000014813168?utm_source=tag-newest
这篇文章写得比较好，可以看一下。