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

时间：2022-02-09 00:18:07

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/

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

Vue.js 指令

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

几个Vue指令的栗子：

1、v-if : 条件

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
  el: '#app-3',
data: {
    seen: true
  }
})

2、v-for：循环

<div id="appVue">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
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实例。

来看一个栗子：

<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>

还记得上面说过的指令吗：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的时候，其实是在这个预定义的基础上继续编程。
标签：

相关文章