Vue实例基础一

[huangchucai]

数据的双向绑定

//html
    <div id="demo">
        <input type="text" placeholder="数据双向绑定" v-model='message'>
        <input type="checkbox" placeholder="数据双向绑定" v-model='checked' id="checkbox">
        <p>{{message}}</p>
        <label for="checkbox">{{ checked }}</label>
    </div>
//js
    new Vue({
        el: "#demo",
        data:{
            message: '我是黄楚才',
            checked: ''
        }
    })        
----

v-model 绑定表单的相应事件，和数据实现动态的双向绑定，需要在Vue实例中填写相应的数据来表示对应的表单数据。

官网链接v-model

指令

1. v-html 数据以html的形式输出

2. v-bind (和v-model有区别不是动态的，不会修改data里面相应的值)属性的绑定值，简写为：

   语法： v-bind:属性=‘值’ （:属性=’值‘）

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

3. v-on 方法的绑定，简写为@

   语法：v-on:方法名=’函数名‘ （@方法名=’函数名‘）

   传入默认的参数需要加上$($$event)

     <div id="demo" :class='name' @click='showMessage'></div>
    //传入默认的事件处理需要加入$
    <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>这是通过event加入的</p>'
                       console.log(event.target)
                   }
               }
     })

4. v-for 列表的循环渲染

   数组的循环：可以选择性的传递参数，第二个参数是对应的索引位置

    //数组的循环
    <ul class="demo" >
        <li v-for="(book,index) in lists">{{index}} {{book.name}} {{book.price}}</li>
    </ul>
    //对应的vue实例
    new Vue({
      el: '.demo',
      data:{
        lists: [
          {name:'javascript',price:50},
          {name:'node',price:50},
          {name:'ajax',price:50},
          {name:'vue',price:50},
        ]
      } 
    })    

   对象的循环：可以传递三个参数，value,key,index，多个参数传递需要()

    <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'      
            }
        } 
    })    

   双向绑定：我们通过v-for循环得到后的数据，如果数据本身是数组或者对象，可以迭代循环

    <div id="demo" >
        <li v-for="(book,index) in lists">
            {{index}}  {{book.price}}
    		//得到的book.name的数组下一个循环
            <span v-for="(b,index) in book.name">{{b}} {{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官网链接

模板字符块

字符串模板

Vue构造的参数中template参数可以传递字符串的模板，里面可以传递data的数据

//样式
    .hh{
        height: 100px;
        background: red;
    }
//html
<div id="demo">
   {{message}}
</div>
//js模板区域
<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函数创建字符串

render函数接受一个函数参数用来创建字符串模板render(createElement){ return createElement()} createElement是一个函数接受参数

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的权重大</span>"
        }     
      },
      //子元素
      [
        createElement("li",1),
        createElement("li",2),
        createElement("li",3)
      ]
    )

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