vue极速入门笔记（一）

开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。

Vue.js

简介

构建用户界面的渐进式框架，采用自底向上增量开发的设计。很久之前需要用到vue时的学习记录，希望能帮助到正在入门的同学们。

起步

使用

需要引入vue

<script src="https://unpkg.com/vue"></script>

声明式渲染

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

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

绑定 DOM 元素属性：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

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

指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。

条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

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

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
				  el: '#app-4',
				  data: {
				    todos: [
				      { text: '学习 JavaScript' },
				      { text: '学习 Vue' },
				      { text: '整个牛项目' }
				    ]
				  }
				})

处理用户输入

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<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('')
			    }
			  }
			})

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

Vue实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var viewmodel = new Vue({
	//配置
})

属性与方法

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3