基本语法

1、插值表达式

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<div id="app">
  {{msg}}
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
    msg:"hello world"
    }
  })
</script>

2、for-key

<div id="app">
    <p v-for="(item,index) of arr" :key="item.id"><input type="checkbox" />{{item.name}}</p>
</div>
<script>
    var vm = new Vue({
    el:"#app",
    data(){
  return {
    arr:[
        {id:001,name:"vivo"},
        {id:002,name:"oppo"},
        {id:003,name:"huawei"}
      ]
    }
  }
})
</script>

3、v-if+v-show

v-if 从DOM删除
v-show 从DOM隐藏

<div id="app">
  <p v-if="flag">显示隐藏</p>
  <p v-show="isShow">显示隐藏 SHOW</p>
  <div v-html="msg">{{msg}}</div>
</div>
<script>
  var vm = new Vue({
  el:"#app",
  data(){
    return {
      flag:true,
      isShow:true,
      msg:"<h1>hello world</h1>"
    }
  }
})
</script>

4、v-for必须加:key

data(){
    return{
        arr:["html","css","javascript"]
    };
},
<p v-for="item of arr" :key="item">{{item}}</p>

5、事件@click

//事件集中写在methods属性中

<div @click="handleClick">{{msg}}</div>
<script>
    export default{
      name:"app",
    data(){
        return {
          msg:"hello world!",
      };
    },
    //事件集中写在methods属性中
    methods:{
        handelClick(){
          this.msg = "change"
      }
    }
  }
</script>

6、样式绑定class

<div id="app">
   <p :class="{active:isActive}">hello world</p>
   <p :class='["one",flag?"two":""]'></p>
 </div>
 <script>
 var vm = new Vue({
   el:"#app",
   data(){
     return {
       isActive:true,
       flag:true
     }
   }
  })
 </script>

7、v-model可以实现双向数据绑定

<!-- v-model可以实现双向数据绑定 -->
<!-- @keyup.enter 可以触发enter -->

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<!-- v-model可以实现双向数据绑定 -->
<!-- @keyup.enter 可以触发enter -->
<div id="app">
  <input type="text" v-model="keyword" @keyup.enter="handleUp" />
  {{keyword}}
</div>
<script>
var vm = new Vue({
  el:"#app",
  data(){
    return {
    keyword:"成都"
    }
  },
  methods:{
    handleUp(){
          console.log(this.keyword)
          var url = `https://music.aityp.com/search?keywords=${this.keyword}`
        axios.get(url).then(res=>{
            console.log(res)
        })
      }
    }
  })
</script>

8、表单

8-1、checkbox为多选时，v-model的值设置为数组

<div id="app">
  <h2>爱好</h2>
  <div>
    <input type="checkbox" value="足球" v-model="likes">足球
    <input type="checkbox" value="篮球" v-model="likes">篮球
    <input type="checkbox" value="台球" v-model="likes">台球
  </div>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      likes:[]            }
  })
</script>

8-2、radio

<div id="app">
  <h2>性别</h2>
  <div>
    <input type="radio" id="one" value="boy" v-model="sex">男
    <input type="radio" id="one" value="girl" v-model="sex">女
  </div>
    {{sex}}
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      sex: ""
    }
  })
</script>

8-3、selected

<div id="app">
  <h2>城市</h2>
  <select v-model="city">
    <option disabled value="">请选择</option>
    <option>武汉市</option>
    <option>荆州市</option>
    <option>长沙市</option>
  </select>
    {{city}}
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      city: ""
    }
  })
</script>

//多选
<select v-model="city" multiple>
</select>

8-4、让输入框的数值为number

<input v-model.number="age" type="number">

8-5、trim

自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<input v-model.trim="msg">

8-6、checkbox和change事件

checkbox执行点击事件时用change事件取代,这样能保证视图和数据同步

<div id="app">
  <input type="checkbox" v-model="keyword" @change="change" />
</div>
<script>
    var vm = new Vue({
      el:"#app",
      data:{
        keyword:false
      },
      methods:{
        change(){
          console.log(this.keyword)
        }
      }
    })
</script>

8、计算属性

//当参与计算的值发生改变时，总值会改变

<div id="app">
    {{total}}
</div>
<script>
  var vm =  new Vue({
    el:"#app",
    data(){
      return {
        firstName:"zhang",
        lastName:"san"
      }
    },
    /* 当参与计算的值发生改变时，总值会改变 */
    computed: {
      total(){
          return this.firstName + this.lastName
      }
    },
  })
</script>

<template>
  <div>
    <!-- 最多只能输入6的字符 -->
    <input type="text" v-model="word" placeholder="请输入"> {{msg}}
  </div>
</template>
<script>
export default {
  name: "Home",
  data(){
    return {
      word:""
    }
  },
  computed:{
    msg(){
      if(this.word.length>6){
        return "最多不能超过8的字符"
      }else if(this.word.length<3){
        return "不能少于3个字符"
      }else{
        return "合法"
      }
    }
  }
};
</script>

9、侦听器

监听data中的值，只要值改变函数就会触发

<div id="app">
    {{total}}
</div>
<script>
  var vm =  new Vue({
  el:"#app",
  data(){
    return {
      firstName:1,
      lastName:2,
      total:3
    }
  },
  /* 侦听器  监听data中的值，只要值改变函数就会触发 */
  watch:{
      firstName(){
        this.total = this.firstName + this.lastName
      },
      lastName(){
        this.total = this.firstName + this.lastName
      }
    }
  })
</script>