Vue新手入门 / Vue.js 核心最基本功能的实现 / 指令 组件

[上回我们在demo项目中创建了学习Vue.js的第一个HelloVue.vue文件](https://segmentfault.com/a/11...
)

本篇介绍一些Vue的一些最基本、最核心的基础功能。它们出自Vue的官方文档Introduce小节，如果你对我的介绍有不懂的地方，可以跳转到原始文档中找寻答案。

本篇文章包含以下Vue.js功能最基本实现代码：
<font size="2">*注意，它们是在项目中的，与官方文档有稍许不一致。</font>

• v-bind绑定元素属性
• 条件与循环
• 处理输入、事件监听
• 组件化

---

v-bind绑定元素属性

vue.js中提供了一系列特殊属性，它们带有v-前缀，被称作指令（directive）。不同的指令会在渲染的DOM上应用特殊的响应式行为（reactive behavior）上回我们讨论过，Vue中的声明式渲染会让组件对象自动变成响应式的，而指令则提供了更多的响应式操作的可能。
回到v-bind指令

html代码：

<div id="v-bind">
    <span v-bind:title="hover_message">
        hover to see the message.
    </span>
</div>

v-bind:title="hover_message"：将元素的title属性实时地绑定在hover_message上。
用v-bind绑定属性之后，属性的值将实时响应变量的变化。

js代码：

export default ({
  data () {
    return {
      hover_message: 'page is loaded at: '
      + new Date().toLocaleString()
    }
  }
})

渲染效果：
<img src="https://img-blog.csdnimg.cn/20200901155922412.jpg#pic_center)" width="70%" height="100%"/>
我们可以尝试一下响应式的效果，F12打开开发者模式，在console之中修改hover_message的值。
在console中键入下述代码，变更hover_message的值：

$vm0.hover_message = "reactive"

响应后的渲染效果：
<img src="https://img-blog.csdnimg.cn/20200901162235376.jpg#pic_center)" width="45%" height="100%"/>

可见v-bind绑定之后的属性是响应式的。

---

条件

v-if是一个条件指令，绑定元素的可见性。

html代码

<span v-if="seen">Now you see me</span>

js代码

export default ({
  data () {
    return {
      seen: false
    }
  }
})

当seen的值为false时，组件中并不会渲染出span元素。并且我们从渲染出来的元素可以发现它的效果类似于display: hidden，是元素都不会有的。

浏览器上渲染出来的html元素代码

<div id="v-if">
 <!-- -->
</div>

和之前一样，我们在console中改变seen的值为true之后：

$vm0.seen = true

元素被响应式地渲染出来：
<img src="https://img-blog.csdnimg.cn/20200901163716878.jpg#pic_center" width="60%"/>
并且，渲染出来的html代码是没有任何v-if特殊属性的。

浏览器上渲染出来的html元素代码

<div id="v-if">
  <span>Now you see me</span>
</div>

---

循环

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

html代码：

<ol>
  <li v-for="todo in todos" v-bind:key="todo.id">
    {{ todo.text }}
  </li>
</ol>

js代码：

export default ({
  data () {
    return {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  }
})

渲染出的元素：

<img src="https://img-blog.csdnimg.cn/20200901165816481.jpg#pic_center" width="50%"/>

虽然官方文档中给出的例子是没有v-bind:key指令的，但是实际上操作的时候我们需要为我们的绑定元素同时绑定一个key元素

如果不绑定key元素会有如下exception：

Elements in iteration expect to have 'v-bind:key' directives.

这个key是帮助Vue.js区分、检测此数组数据的变更等，并用以响应式渲染。

---

事件监听

v-on指令用于为元素添加一个事件监听器，并且绑定某个定义的方法。

html代码：

<p>{{ userInput }}</p>
<button v-on:click="reverseMessage">reverse the message</button>

js代码：

export default ({
data () {
    return {
       userInput: 'Fala oviara',
    }
  },
  methods: {
    reverseMessage () {
      this.userInput = this.userInput.split('').reverse().join('')
    }
  }
})

渲染出的元素：

<img src="https://img-blog.csdnimg.cn/20200901170701521.jpg#pic_center" width="60%"/>

点击按钮之后：

<img src="https://img-blog.csdnimg.cn/20200901170800101.jpg#pic_center" width="60%"/>

可以看到点击之后，js中定义的方法即被执行，同时，段落元素中的textcontent也被响应式渲染成reserve后的内容。
这里多提一句，组件中的方法需要定义在methods:{}对象内，才能被正常执行到。

---

输入的双向绑定

双向绑定是项目中比较常见的一个use-case，Vue.js中用v-model指令即可轻松实现。

html代码：

<p>{{ msg }}</p>
<input v-model="msg">

js代码：

export default ({
data () {
    return {
       msg : 'Fala oviara',
    }
  }
})

渲染出的元素

<img src="https://img-blog.csdnimg.cn/20200901171436216.jpg#pic_center" width="60%"/>

这时候我们在输入框内输入内容，上面的段落元素是实时响应式更新的。

<img src="https://img-blog.csdnimg.cn/20200901171632967.jpg#pic_center" width="60%"/>

---

组件化

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
组件树例图

而Vue.js中提供了组件的定义，在本文中，我会展示两种定义方法：

1. 在组件文件中定义一个自定义组件，并且引用
2. 另外新建一个组件，并且引用

组件文件中定义：

js代码（注：此组件不需要在export中定义，因为它不需要暴露给外部context）

import Vue from 'vue'

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})

其中'todo-item'是我们自定义组件的名称，在html代码中就可以用todo-item标签去渲染它。
props是组件的自定义属性数组，用于以属性键值的方式给自定义组件传值。
template即组件的html代码。

如此定义一个自定义组件之后，我们就可以在html代码引用、渲染这个组件了。

html代码：

<todo-item
  v-for="item in groceryList"
  v-bind:todo="item"
  v-bind:key="item.id">
</todo-item>

数组数据：

groceryList: [
  { id: 0, text: '蔬菜' },
  { id: 1, text: '奶酪' },
  { id: 2, text: '随便其它什么人吃的东西' }
]

这样一个自定义的列表组件就写好了。

渲染出的元素

<img src="https://img-blog.csdnimg.cn/2020090117311786.jpg#pic_center" width="60%"/>

当然在实际项目开发中，（虽然没开发过Vue项目，但是在我的判断下），这种定义组件的方法会比较少用，最好还是用第二种方式定义自定义组件。

新建一个组件文件：

Todo.vue:

<template>
    <li>{{todo.text}}</li>
</template>
<script>
export default {
  name: 'todo',
  props: [
    'todo'
  ]
}
</script>
<style>
  li {
    text-align: left;
  }
</style>

保存之后，在我们需要引用的组件文件里，增添以下代码：
js代码：

import Todo from '../sub/Todo' // 导入新建的组件
export default ({
  components: { // 暴露我们引用的子组件（自定义组件）
    Todo
  }
})

html代码：

<todo
  v-for="item in groceryList"
  v-bind:todo="item"
  v-bind:key="item.id">
</todo>

渲染出的效果与文件内定义一致
<img src="https://img-blog.csdnimg.cn/2020090117311786.jpg#pic_center" width="60%"/>

---

以上就是Vue.js核心基本功能，在掌握这些功能的使用之后，接下来将接触到更多其他高级功能。

如果你觉得本文对你有帮助，欢迎点赞、收藏、评论，关注我期待后续内容，共同学习、成长。