初学Vue.js

声明式渲染

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

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

Vue中数据和DOM建立了关联，所有东西都是响应式的，在javaScript控制台中对app.message的值进行修改，会看到相应的更新。

 

 1 <div id="app-2">
 2   <span v-bind:title="message">
 3     鼠标悬停几秒钟查看此处动态绑定的提示信息！
 4   </span>
 5 </div>
 6 var app2 = new Vue({
 7   el: '#app-2',
 8   data: {
 9     message: '页面加载于 ' + new Date().toLocaleString()
10   }
11 })

v-bind:xxx用于绑定元素节点属性，将元素中的xxx属性与Vue实例中的绑定元素属性保持一致

 

条件与循环 

1 <div id="app-3">
2   <p v-if="seen">现在你看到我了</p>
3 </div>
4 var app3 = new Vue({
5   el: '#app-3',
6   data: {
7     seen: true
8   }
9 })

 v-if=“”用于设置条件，Vue实例中可对条件属性进行修改

 

 1 <div id="app-4">
 2   <ol>
 3     <li v-for="todo in todos">
 4       {{ todo.text }}
 5     </li>
 6   </ol>
 7 </div>
 8 var app4 = new Vue({
 9   el: '#app-4',
10   data: {
11     todos: [
12       { text: '学习 JavaScript' },
13       { text: '学习 Vue' },
14       { text: '整个牛项目' }
15     ]
16   }
17 })

v-for=“item in items” 声明循环变量：items， item为循环变量中的元素，Vue实例中对items整个循环变量进行赋值

 

处理用户输入

 1 <div id="app-5">
 2   <p>{{ message }}</p>
 3   <button v-on:click="reverseMessage">逆转消息</button>
 4 </div>
 5 var app5 = new Vue({
 6   el: '#app-5',
 7   data: {
 8     message: 'Hello Vue.js!'
 9   },
10   methods: {
11     reverseMessage: function () {
12       this.message = this.message.split('').reverse().join('')
13     }
14   }
15 })

v-on: 事件监听器，通过他可以调用Vue实例中的方法

 

 1 <div id="app-6">
 2   <p>{{ message }}</p>
 3   <input v-model="message">
 4 </div>
 5 var app6 = new Vue({
 6   el: '#app-6',
 7   data: {
 8     message: 'Hello Vue!'
 9   }
10 })

v-model指令提供了双向绑定，使表单input绑定message信息，从而绑定到Vue实例中的

 

组件化应用构建

 1 <div id="app-7">
 2   <ol>
 3     <!--
 4       现在我们为每个 todo-item 提供 todo 对象
 5       todo 对象是变量，即其内容可以是动态的。
 6       我们也需要为每个组件提供一个“key”
 8     -->
 9     <todo-item
10       v-for="item in groceryList"
11       v-bind:todo="item"
12       v-bind:key="item.id">
13     </todo-item>
14   </ol>
15 </div>
16 Vue.component('todo-item', {
17   props: ['todo'],
18   template: '<li>{{ todo.text }}</li>'
19 })
20 
21 var app7 = new Vue({
22   el: '#app-7',
23   data: {
24     groceryList: [
25       { id: 0, text: '蔬菜' },
26       { id: 1, text: '奶酪' },
27       { id: 2, text: '随便其它什么人吃的东西' }
28     ]
29   }
30 })

通过定义<todo-item></todo-item>自定义组件 在Vue.component中对组件进行属性的添加，以及解释组件的作用