这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。
!官方文档：https://cn.vuejs.org/v2/guide/
01. vue 介绍
<html><head> ???<meta charset="utf-8"/> ???<title>vue 介绍</title> ???????<!-- <script src="js/vue.min.js"></script> --> ???<script src="https://unpkg.com/vue"></script></head><body> ???<!-- 官方文档：https://cn.vuejs.org/v2/guide/ --> ???????????<!-- 绑定 --> ???<div id="app"> ?????<!-- ①声明式渲染 --> ?????<p>{{ info }}</p> ?????<p v-text="info"></p> ?????<p v-html="info"></p> ?????<p v-once>{{ info }}</p> ???????????<p>{{ info }}</p> ?????<p>{{ info.concat("!!!") }}</p> ?????<p>{{ info ? "has info" : "no info" }}</p> ?????<!-- <p>{{ var info2 = "info2" }}</p> --> ?????<!-- <p>{{ if (info) {return "info2"} }}</p> --> ???????????<!-- ②绑定元素特性 --> ?????<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> ???????????<!-- ③条件：控制切换一个元素是否显示 --> ?????<p v-if="seen">现在你看到我了</p> ???????????<!-- ④循环：绑定数组的数据来渲染一个项目列表 --> ?????<ol> ???????<li v-for="todo in todos"> ?????????{{ todo.text }} ???????</li> ?????</ol> ???????????<!-- ⑤处理用户输入 --> ?????<button v-on:click="reverseMessage">逆转消息</button> ???????????</br> ?????<!-- ⑥表单输入和应用状态之间的双向绑定 --> ?????<input v-model="info"> ???????????<!-- ⑦使用组件 --> ?????<ol> ???????<todo-item ?????????v-for="item in groceryList" ?????????v-bind:todo="item" ?????????v-bind:key="item.id"> ???????</todo-item> ?????</ol> ???????????<!-- ①②③④⑤⑥⑦⑧⑨⑩ --> ???</div> ???<!-- 数据 --> ???<script> ???var data = { ???????info : "Hello world", // ①⑥ ???????message: ‘页面加载于 ‘ + new Date().toLocaleString(), // ② ???????seen: true, // ③ ???????todos: [ // ④ ?????????{ text: ‘学习 JavaScript‘ }, ?????????{ text: ‘学习 Vue‘ }, ?????????{ text: ‘整个牛项目‘ } ???????], ???????????????groceryList: [ // ⑦ ?????????{ id: 0, text: ‘蔬菜‘ }, ?????????{ id: 1, text: ‘奶酪‘ }, ?????????{ id: 2, text: ‘随便其它什么人吃的东西‘ } ???????] ???????????} ???????// 注册组件（全局）// ⑦ ???Vue.component(‘todo-item‘, { ?????props: [‘todo‘], ?????template: ‘<li>{{ todo.text }}</li>‘ ???}) ???????// 创建根实例 ???var vm = new Vue({ ?????el: ‘#app‘, ?????data: data, ???????????methods: { ???????reverseMessage: function () { // ⑤ ?????????this.message = this.message.split(‘‘).reverse().join(‘‘) ???????} ?????} ???}) ???</script></body></html>