Vue——前置课程

以你之姓@ 2021-09-20 01:02 348阅读 0赞

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔记会记录在我的博客专栏[《前端Vue》][Vue 1]中，欢迎大家关注~

--------------------

**1、声明式渲染**

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

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

输出为：

Hello World！

除了文本插值，我们还可以像下面这样来绑定元素特性：

<div id="app-2">
      <span v-bind:title="message">
        显示绑定的信息！
      </span>
    </div>

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

此时输出的结果，将鼠标放置于span标签的文字上，会显示页面的加载时间信息。

**2、条件与循环**

下面例子控制显示一个元素：

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

当seen=false时，Look at me就会消失。

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

var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: 'xzw' },
          { text: 'gdk' },
          { text: 'yxy' }
        ]
      }
    })

结果为：

![20190612101319974.png][]

**3、处理用户输入**

可以使用v-on添加一个事件监听器，以达到用户和应用进行交互的目的。

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

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

点击“逆转消息”的按钮，可以实现信息的逆转。

![20190612102010410.png][]

Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

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

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

当该表输入框中的内容，p标签中的内容会一起改变

![20190612102906356.png][]

**4、组件化应用构建**

使用v-bind指令将待办项传到循环输出的每个组件中：

Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{
       { todo.text }}</li>'
    })
    
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: 'aaa' },
          { id: 1, text: 'bbb' },
          { id: 2, text: 'ccc' }
        ]
      }
    })

输出结果为：

![20190612104231452.png][]

[Vue]: https://cn.vuejs.org/v2/guide/
[Vue 1]: https://blog.csdn.net/gdkyxy2013/column/info/39883
[20190612101319974.png]: /images/20210726/dedab57f6949415ca57a60867431d1dd.png
[20190612102010410.png]: /images/20210726/6732e715c6c34f459660aac4ff045c4c.png
[20190612102906356.png]: /images/20210726/fd927adffaeb4abcac607ca5673432db.png
[20190612104231452.png]: /images/20210726/1503cd603e1e4cf9bc3d2d4c33efcd23.png