这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。
!官方文档：/v2/guide/
01. vue 介绍
<html><head><meta charset="utf-8"/><title>vue 介绍</title><!-- <script src="js/vue.min.js"></script> --><script src="/vue"></script></head><body><!-- 官方文档：/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-itemv-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: '随便其它什么人吃的东西' }]}// 注册组件（全局）// ⑦ponent('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>
