vue.js 2.0 官方文檔學習筆記 —— 01. vue 介紹
阿新 • • 發佈：2017-12-24
lan fun 數據 特性 sem https 代碼 guide pos
這是我的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>
vue.js 2.0 官方文檔學習筆記 —— 01. vue 介紹