基于 Vue 2.5

vue官网： https://cn.vuejs.org/

2.5 文档 ： https://v2.cn.vuejs.org/v2/guide/

下载 vue.js https://v2.cn.vuejs.org/v2/guide/installation.html

目录结构：

vue
    - index.html
    - vue.js

在页面上显示 hello world ?

<script src="./vue.js"></script> 

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

<script>
var app = new Vue({    // new一个Vue实例
    el : '#app',   // 对id为app的元素下的范围，具有管理权
    data : {   // 数据
        content : 'hello world'
    }
})
</script>

在2秒后，将上面页面输出的 hello world 改为 bye world？

setTimeout(function() {
    app.$data.content = 'bye world'
}, 2000)

实现一个简易的 TodoList

<div id="app">
	<input type="text" v-model="inputValue">  <!-- v-model 数据双向绑定，这里的数据改变会同步到app.$data.inputValue, 同时app.$data.inputValue被改变，也会同步到这里 -->
	<!-- 在控制台中，输入app.$data.inputValue=123, 看页面的input输入框中是否有变化，然后，改变输入框中的内容，再次打印app.$data.inputValue，看看值是否变化、 -->

	<button v-on:click="handleBtnClick">添加</button>   <!-- v-on 监听一个事件 -->

	<ul>
		<li v-for="item in list">{{item}}</li>   <!-- v-fot 循环 , 循环list数组，item是数组里面的值， 当list数组发生变化，页面也会跟着发生变化。 -->
	</ul>
</div>

<script>
	var app = new Vue({
		el : '#app',
		data: {
			list : [],
			inputValue : ''
		},
		methods: {
			handleBtnClick : function() {
				if (this.inputValue == '') return
				this.list.push(this.inputValue)
				this.inputValue = ''
			}
		}
	})
</script>