記錄第二天-Vue起步

​

前言

美好的一天從寫代碼開始，今天繼續整理vue起步知識點。

1.VUE 資料驅動視圖

今天整理的分為 MVC 與MVVN 下面将會以圖檔的形式展現出來

2.指令系統(以 V-XXX開頭)

• v-text → innerText
• v-html → innerHtml
• v-if → 資料屬性對應的值 如果為假 則不在頁面渲染，反之亦然
• v-show → 控制dom元素的顯示隐藏 display：none/block;
• v-bind → 綁定标簽上的屬性（内置的屬性和自定義的屬性）：bind
• v-on → 原生事件名=‘函數名’ 簡便寫法：@

• v-for = ‘(item,index) in menuLists’

  `

new Vue({
      el:'#app',
      data:function(){
        return{
          msg:'指令系統',
          msg2:'<h2>指令系統</h2>',
          isShow:false,
          isGreen:false,
          text:'哈哈哈',
          menuLists:[
            {id:1,name:"大腰子",price:50},
            {id:2,name:"排骨",price:60},
            {id:3,name:'肘子',price:830},
          ],
          people:{
            name:'寇世龍',
            age:21,
            fav:'AV'
          }
        }
      },
      
      template:`
      <div class='app'>
           <h2>{{msg}} </h2>
           <p v-text='msg'> </p>
       <div v-html='msg2'></div>
       <div v-text='1+1'></div>
       <div v-if='isShow'>我想你也是愛我的</div>
       <div v-if='!isShow'>你也舍不得</div>
       <div v-if='Math.random()>0.5'>
       已顯示
       </div>
       <div v-else>
       已隐藏
       </div>
       <div v-show='isShow'>顯示 </div>
       <div v-show='!isShow'>隐藏 </div>
       <div class='box' :class='{active:isGreen}' :a='text' v-on:click='clickHeadler'>  </div>
       <ul>
        <li v-for='item in menuLists'>
         <h5 v-text='item.id'></h5>
         <h3>{{item.name}}</h3>
         <em>{{item.price}}</em>
        </li>
       </ul>
       
       <ul>
       <li v-for='(value,key) in people'>
        {{key}}==={{value}}
       </li>
       </ul>
          </div>`,
      methods:{
        clickHeadler(e){
          // this.isGreen=!this.isGreen
          if(this.isGreen =true){
            this.isGreen =false
          }else{
            this.isGreen=true 
          }
        }
      }
    })`      

3.雙向資料綁定 (v-model)

• 雙向資料綁定的展現 隻展現在UI控件中 隻能展現在UI控件中 隻能應用在有value屬性的

• 文法糖

4.全局-局部元件

全局元件的建立：第一個參數是元件的名字,第一個參數是options

`

Vue.component('Vbtn',{
      template:`
       <button>按鈕<button>
      `
    });
  var vm =new Vue({
      el:"#app",
      data(){
        return{
          
        }
      },
      //用子
      template:`
      <div>
      <Vbtn/>
      </div>
      `
    });      

局部組建的使用： 打油詩: 聲子 挂子 用子

var Vheader ={
       template:`
        <div> 我是頭部元件</div>
       `
     };
     var App={
       data(){
         return{
           
         }
       },
       methods:{
         clickHanlder(){
           console.log(this);
         }
       },
       template:`
       <div>
       <button @click='clickHanlder'></button>
       我是入口元件
       </div>
       `
     };
     console.log(this)
    var vm =new Vue({
      el:"#app",
      data(){
        return{
          
        }
      },
      //挂子
      components:{
        App,
        Vheader
      },
      //用子
      template:`
      <div>
      <Vheader></Vheader>
      <App></App>
      </div>
      `
    });