Vue學習（一）

webstorm安裝教程：https://www.weiyiqi.net/html/cyrj/379.html

2-3
Vue文件結構：template script css樣式

指令：
vbind-->簡略可以 寫成“:”
v-on
@click
v-if

<div id="app">
        {{msg}}    //雙括號表達
</div>
var app=new Vue({
      el:'#app',
      data:{        //數據表達方式
    msg:'Hello Vue!'
      }，
      watch{
            msg:function(newval,oldval){
            console.log('newval is:'+newval)
            console.log('oldval is:'+oldval)
      }
},
      computed:{
    msg1:function(){
                return 'computed:'+this.msg    //this就代表實例Vue這個對象
}
}
})
調試窗口F12（更多程序的擴展程序 可打開前端調試窗口

2-4 計算屬性與偵聽屬性
CDN快速引入Vue的庫
計算屬性：computed

偵聽器：watch

使用場景介紹，watch（監聽一個變量/常量），computed(監聽很多)

可能在computed中有重新的渲染

2-5 條件渲染、列表渲染、Class與Style綁定
條件渲染，當某情境、判斷條件、然後把什麼隱藏起來
v-if
v-else,v-else-if
v-show
v-for

<div id="app">
        {{msg}}    //雙括號表達
</div>
var app=new Vue({
      el:'#app',
      data:{        //數據表達方式
    msg:'Hello Vue!'
      }，
      watch{
            msg:function(newval,oldval){
            console.log('newval is:'+newval)
            console.log('oldval is:'+oldval)
      }
},
      computed:{
    msg1:function(){
                return 'computed:'+this.msg    //this就代表實例Vue這個對象
}
}
})

列表渲染  html自己類似for循環生成出來

Class與Style綁定