Vue.js 学习(1) -- 初步了解

叁歲伎倆 2022-06-15 01:23 239阅读 0赞

Vuejs的目标：实现**响应的数据绑定**，和**组合的视图组件**。

## 响应式数据绑定 ##

什么是响应的数据绑定？  
就是将数据和元素关联起来，当数据变化的时候，元素也会做响应式的变化，例如：

// html <div id="vueApp"> { { message }} </div>

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

在这段代码中，我们通过div的ID，将这个div元素和下面的app对象绑定。一旦对app对象的data属性的message作出修改，那么，在元素中，我们也将会看到响应式的变化——这样数据就和DOM元素绑定在了一起。

在这段代码中，我们采用new Vue这样的形式，声明了一个新的vue实例；后面将会讲到的组件，就是一个预定义的Vue实例，就好像是是定义了一个有default属性的对象。

想自己试一试可戳：[https://jsfiddle.net/50wL7mdz/34508/][https_jsfiddle.net_50wL7mdz_34508]

这种方法也被称为是声明式的将数据渲染进DOM。

## Vue.js 指令 ##

和AngularJS相似，VueJS也有一套自己的指令系统，这些指令以v-为前缀，可以像DOM属性那样添加在Dom元素的标签上，例如：`<span v-bind:title="message"> </span>`，表示这是Vue.js提供的特殊属性。

几个Vue指令的栗子：

**1、v-if : 条件**

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

**2、v-for：循环**

var app4 = new Vue({
      el: '#appVue',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    })

**3、v-bind：绑定属性**

<div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>

var app2 = new Vue({
      el: '#app-2',
      data: {
        message: 'You loaded this page on ' + new Date()
      }
    })

**4、v-on：事件**

<div id="app-5"> <p>{ { message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>

var app = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: { // 这里可以为你的app写方法了！
        reverseMessage: function () { 
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

**5、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!' }
    })

## 组件 ##

下面我们来解决开篇提到的：组合的视图组件。

什么是组合的视图组件？

用过React的同学们一定知道什么是组件，在vue中，组件在概念上和React是非常类似的。

在vue中，组件是这样定义的：  
在Vue里，组件就是一个拥有预定义选项的Vue实例。

来看一个栗子：

还记得上面说过的指令吗：v-bind绑定属性（而这里的属性todo，其实就是我们在下面声明组件的时候的props的成员），v-for表示循环。

// 定义组件todo-item，正因为这里有了定义，我们才可以在上面的代码中用<todo-item></todo-item>这样的方式定义标签
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{ { todo.text }}</li>'
    })
     // 为todo-item组件绑定数据
    var app = new Vue({
      el: '#app',
      data: {
        groceryList: [
          { text: 'Vegetables' },
          { text: 'Cheese' },
          { text: 'Whatever else humans are supposed to eat' }
        ]
      }
    })

解释一下：我们使用Vue.component定义了一个vue组件，相当于是为我们后面使用的实例定义了一个拥有预定义属性的模版。之后我们为todo-item新建Vue实例app的时候，其实是在这个预定义的基础上继续编程。

[https_jsfiddle.net_50wL7mdz_34508]: https://jsfiddle.net/50wL7mdz/34508/