Vue實(shí)例基礎(chǔ)一

數(shù)據(jù)的雙向綁定

//html
    <div id="demo">
        <input type="text" placeholder="數(shù)據(jù)雙向綁定" v-model='message'>
        <input type="checkbox" placeholder="數(shù)據(jù)雙向綁定" v-model='checked' id="checkbox">
        <p>{{message}}</p>
        <label for="checkbox">{{ checked }}</label>
    </div>
//js
    new Vue({
        el: "#demo",
        data:{
            message: '我是黃楚才',
            checked: ''
        }
    })        
----

v-model 綁定表單的相應(yīng)事件，和數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)的雙向綁定，需要在Vue實(shí)例中填寫(xiě)相應(yīng)的數(shù)據(jù)來(lái)表示對(duì)應(yīng)的表單數(shù)據(jù)。

官網(wǎng)鏈接v-model

指令

1. v-html 數(shù)據(jù)以html的形式輸出

2. v-bind (和v-model有區(qū)別不是動(dòng)態(tài)的，不會(huì)修改data里面相應(yīng)的值)屬性的綁定值，簡(jiǎn)寫(xiě)為：

   語(yǔ)法： v-bind:屬性=‘值’ （:屬性=’值‘）

    <div :class='name'> 
    </div>
   

3. v-on 方法的綁定，簡(jiǎn)寫(xiě)為@

   語(yǔ)法：v-on:方法名=’函數(shù)名‘ （@方法名=’函數(shù)名‘）

   傳入默認(rèn)的參數(shù)需要加上$($$event)

     <div id="demo" :class='name' @click='showMessage'></div>
    //傳入默認(rèn)的事件處理需要加入$
    <div id="demo" :class='name' @click='showMessage($event)'>
         {{message}}
         {{true?'three':'two'}}
    </div>
    new Vue({
               el:"#demo",
               methods:{
                   showMessage(event){
                       console.log(event)
                       event.target.innerHTML+='<p>這是通過(guò)event加入的</p>'
                       console.log(event.target)
                   }
               }
     })
   

4. v-for 列表的循環(huán)渲染

   數(shù)組的循環(huán)：可以選擇性的傳遞參數(shù)，第二個(gè)參數(shù)是對(duì)應(yīng)的索引位置

    //數(shù)組的循環(huán)
    <ul class="demo" >
        <li v-for="(book,index) in lists">{{index}} {{book.name}} {{book.price}}</li>
    </ul>
    //對(duì)應(yīng)的vue實(shí)例
    new Vue({
      el: '.demo',
      data:{
        lists: [
          {name:'javascript',price:50},
          {name:'node',price:50},
          {name:'ajax',price:50},
          {name:'vue',price:50},
        ]
      } 
    })    
   

   對(duì)象的循環(huán)：可以傳遞三個(gè)參數(shù)，value,key,index，多個(gè)參數(shù)傳遞需要()

    <ul class="demo" > 
        <li v-for=" (key,value,index) in lists">{{value}} {{key}} {{index}}</li>
    </ul>
    //js    
    new Vue({
        el: '.demo',
        data:{
            lists: {
                name: 'hcc',
                age: 24,
                hobby: 'live yx'      
            }
        } 
    })    
   

   雙向綁定：我們通過(guò)v-for循環(huán)得到后的數(shù)據(jù)，如果數(shù)據(jù)本身是數(shù)組或者對(duì)象，可以迭代循環(huán)

    <div id="demo" >
        <li v-for="(book,index) in lists">
            {{index}}  {{book.price}}
            //得到的book.name的數(shù)組下一個(gè)循環(huán)
            <span v-for="(b,index) in book.name">{} {{index}}</span>
        </li>
    </div>
    //js層面
    new Vue({
        el: '#demo',
        data:{
            lists: [
            {name:['a','e','f'],price:50},
            {name:['a'],price:50},
            {name:['a','e'],price:50},
            {name:['a','e','a','e'],price:50},
            ]
        } 
    })    
   

   v-for官網(wǎng)鏈接

模板字符塊

字符串模板

Vue構(gòu)造的參數(shù)中template參數(shù)可以傳遞字符串的模板，里面可以傳遞data的數(shù)據(jù)

//樣式
    .hh{
        height: 100px;
        background: red;
    }
//html
<div id="demo">
   {{message}}
</div>
//js模板區(qū)域
<script>
    new Vue({
        el:"#demo",
        data: {
            name: 'hh',
            message: '我是黃楚才',
        },
    //  template:'<div :class=name @click=showMessage>{{message}}hello this is template<span>heel</span></div>',
        template:`<div :class=name @click=showMessage>
                    {{message}}hello this is template
                    <span>heel</span>
                </div>`,
        methods:{
            showMessage(){
                alert("ggggg")
            }
        }
    })
</script>

render函數(shù)創(chuàng)建字符串

render函數(shù)接受一個(gè)函數(shù)參數(shù)用來(lái)創(chuàng)建字符串模板render(createElement){ return createElement()} createElement是一個(gè)函數(shù)接受參數(shù)

new Vue({
  el:"#demo",
  data: {
    name: 'hh',
    message: '我是黃楚才',
    showStyle: true,
    hideStyle: false
  },
  render(createElement){
    return createElement(
      //元素
      "ul",
      //屬性
      {
        'class':{
          hh:'{{showStyle}}',
          fontSize:false
        },
        attrs:{
          'data-img': 'hello',
          id : 'ul',
        },
        domProps:{
          innerHTML: "<span>這是domProps的權(quán)重大</span>"
        }     
      },
      //子元素
      [
        createElement("li",1),
        createElement("li",2),
        createElement("li",3)
      ]
    )

  },
  methods:{
    showMessage(){
      alert("ggggg")
    }
  }
})