vue.js 2.0 官方文檔學習筆記 —— 01. vue 介紹

時間 2019-11-18

標籤 vue.js vue 2.0 官方文檔學習筆記介紹欄目 JavaScript 简体版

原文原文鏈接

這是個人vue.js 2.0的學習筆記，採起了將官方文檔中的代碼集中到一個文件的形式。目的是保存下來，方便本身查閱。html

!官方文檔：https://cn.vuejs.org/v2/guide/vue

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>