現在國內vue非常火,所以學習vue,給大夥講解一下吧.

一個vue例項

   <div id="root">
        <!-- 插值表示式 -->
        <!-- <h1>hello{{msg}}{{number}}</h1> -->
        <h1 v-text="number"></h1>
        <!-- v-html會轉義 -->
        <h1 v-html="content" @click="handleClick"
 
></h1>
    </div>

// el元素
    new Vue({
        //掛載點,模版,例項之間的關係
        el:"#root",
        template:"<h1>hello{{msg}}</h1>",
        // vue陣列
        data:{
            msg: "hello world",
            number: 123,
            content:'<h1>hello</h1>'
        },
        // vue例項的方法
 

        methods:{
            handleClick:function(){
                //方便之處就是不用管Dom
                this.content = 'world';
            }
        }
    })

掛載點

el就是掛載點，element元素的意思，它的就是告訴例項要找頁面上節點id為root的元素來插入替換；

模板

template ,模板，就是插入到頁面的內容，就是準備好的頁面內容；
一般在工作中template是不寫在例項裡面，因為不好寫；
頁面上id為root

例項

new Vue() 創建出來一個例項，就是一個vue的元件；

大家可以看到掛載點，模板是寫在例項裡面，是例項的屬性；

data,例項上的一些資料；

methods 例項上的方法；
改變data裡的資料項this.xxx

vue的好處就是可以不要管dom,開發者可以把精力放在業務邏輯上面；

喜歡我給我點個贊把