一、VUE入門紹介

公式サイトのドキュメントを通じて学習した個人メモの原文:https://cn.vuejs.org/v2/guide/index.html

   

    
    
1.      
    
Hello {{ name }}!
    
      var person = new Vue({
        el: "#app",
        data: {
          name: "Vue"
        }
      });
    

    
    
2. v-bind   
    

      
                            ！
      
    
    
      var app2 = new Vue({
        el: "#app-2",
        data: {
          message: "      " + new Date().toLocaleString()
        }
      });
    

    
    
3.   
    
       
    
      var app3 = new Vue({
        el: "#app-3",
        data: {
          seen: true
        }
      });
    

    
    
4.   
    

      

        
{{ i.name }}
      
    
    
      var app4 = new Vue({
        el: "#app-4",
        data: {
          favorites: [
            { name: "Pink Floyd" },
            { name: "Kurt Cobain" },
            { name: "David Bowie" },
            { name: "Bob Dylan" }
          ]
        }
      });
    

    
    
5.       
    

      
{{ message }}
          
    
    
      var app5 = new Vue({
        el: "#app-5",
        data: {
          message: "       "
        },
        methods: {
          showSecret: function() {
            this.message = "    ";
          }
        }
      });
    
    

      
{{ message }}
      
    
    
      var app6 = new Vue({
        el: "#app-6",
        data: {
          message: "Hello Vue!"
        }
      });
    

    
    
6.        
    

      

        
        
      
    
    
      Vue.component("favorite-list", {
        props: ["singer"],
        template: "<li>{{ singer.name }}</li>"
      });
      var app7 = new Vue({
        el: "#app-7",
        data: {
          favorites: [
            { id: 0, name: "Pink Floyd" },
            { id: 1, name: "Kurt Cobain" },
            { id: 2, name: "David Bowie" },
            { id: 3, name: "Bob Dylan" }
          ]
        }
      });