Vue.js基础指令实例讲解

Vue.js提供了许多基础指令，通过这些指令我们可以实现各种数据绑定、表单渲染等功能。本文将对Vue.js基础指令进行全面的讲解和总结。

数据绑定

数据绑定是Vue.js中最重要的一个特性，通过数据绑定，我们可以轻松地将数据显示在页面上，也可以让页面与数据保持同步。Vue中的数据绑定有以下几种方式：

插值

在HTML模板中，可以使用双花括号{{}}进行数据插值，来完成对数据的渲染。示例代码如下：

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

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

在上面的示例中，我们定义了一个id为app的HTML元素，将Vue实例挂载在了该元素上，使用双花括号展示了数据message。

v-text指令

v-text指令可以将数据渲染到指定元素的文本内容中，与插值的效果基本一致。不同的是，v-text指令是一个指令，而非一种语法糖。示例代码如下：

<div id="app">
  <span v-text="message"></span>
</div>

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

在上面的示例中，我们定义了一个span元素，并使用v-text指令将数据message渲染到该元素的文本内容中。

v-html指令

v-html指令可以将数据渲染为HTML形式，并插入到指定元素的内部。使用该指令时要注意，因为可以渲染为HTML，可能存在XSS攻击的风险。示例代码如下：

<div id="app">
  <div v-html="message"></div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '<span style="color:red">Hello, Vue!</span>'
  }
})

在上面的示例中，我们定义了一个div元素，并使用v-html指令将数据message渲染为HTML形式，并插入到该元素的内部。

v-bind指令

v-bind指令可以将元素的属性与Vue实例的数据进行绑定，从而实现动态属性。示例代码如下：

<div id="app">
  <a v-bind:href="url">Vue.js官网</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://cn.vuejs.org/'
  }
})

在上面的示例中，我们定义了一个a标签，并使用v-bind指令将href属性与数据url绑定起来，从而实现动态链接。

v-on指令

v-on指令可以用来绑定元素的事件，当事件触发时，执行指定方法。示例代码如下：

<div id="app">
  <button v-on:click="alertMessage">点击我</button>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    alertMessage: function() {
      alert('Hello, Vue!')
    }
  }
})

在上面的示例中，我们定义了一个button元素，并使用v-on指令将click事件与alertMessage方法绑定起来。

表单渲染

在前端开发中，表单输入是非常常见的场景之一。Vue.js为我们提供了许多表单渲染的指令，让表单渲染变得轻松易懂。

v-model指令

v-model指令可以将表单元素与Vue实例的数据进行双向绑定，从而实现表单数据的同步渲染。示例代码如下：

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

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

在上面的示例中，我们定义了一个input元素，并使用v-model指令将该元素与数据message进行双向绑定，从而实现输入和显示的同步变化。

v-for指令

v-for指令可以将数据循环渲染为指定元素的内容。示例代码如下：

<div id="app">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: ['apple', 'banana', 'orange']
  }
})

在上面的示例中，我们定义了一个ul元素，使用v-for指令将数据list中的每一项渲染为li元素的内容。

示例说明

示例1

在一个任务管理的页面中，任务被定义为一个对象，其中包含任务名称、截止日期和完成状态。在该页面中，使用v-for指令将所有任务列表展示出来，并使用v-model指令将输入框和截止日期进行双向绑定。

<div id="app">
  <ul>
    <li v-for="(item, index) in list">
      <input v-model="item.title">
      <input v-model="item.deadline" type="date">
      <input v-model="item.complete" type="checkbox">
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: [
      { title: '任务1', deadline: '2021-12-31', complete: false },
      { title: '任务2', deadline: '2021-11-30', complete: true },
      { title: '任务3', deadline: '2021-10-31', complete: false }
    ]
  }
})

在上面的示例中，我们使用v-for指令将数据list循环渲染为li元素的内容，并使用v-model指令将输入框、截止日期和复选框与任务对象的相应属性进行双向绑定。

示例2

在一个新闻列表的页面中，每个新闻被定义为一个对象，其中包含新闻标题、作者和发布日期等信息。我们希望在该页面中实现一个搜索框，可以根据标题筛选新闻。使用v-model指令将输入框的值与搜索关键字进行双向绑定，使用v-for指令将符合搜索条件的新闻渲染出来。

<div id="app">
  <input v-model="keyword" type="text">
  <ul>
    <li v-for="(item, index) in filteredList" :key="index">
      {{ item.title }}，作者：{{ item.author }}，发布时间：{{ item.date }}
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: [
      { title: '新闻1', author: '作者1', date: '2021-09-01' },
      { title: '新闻2', author: '作者2', date: '2021-09-02' },
      { title: '新闻3', author: '作者3', date: '2021-09-03' },
      { title: 'Vue.js教程', author: 'Vue.js官方', date: '2021-09-04' }
    ],
    keyword: ''
  },
  computed: {
    filteredList: function() {
      var self = this
      return this.list.filter(function(item) {
        return item.title.indexOf(self.keyword) > -1
      })
    }
  }
})

在上面的示例中，我们使用v-model指令将输入框的值与数据keyword进行双向绑定，使用computed计算属性将符合搜索条件的新闻筛选出来，并使用v-for指令将数据渲染为li元素。为了提高性能，我们给每一个li元素添加了key属性，Vue.js将会借助该key属性进行DOM的高效更新。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结) - Python技术站