vue学习笔记4

1.数组变化侦测

<template>
<div>数组变化侦听</div>
<button v-on:click="addListHandler">添加数据</button>
<ul>
  <li v-for="(item,index) in names" :key="index">{{ item }}</li>
</ul>

</template>
<script>
export default{
  data(){
    return{
      
      names:["zhangsan","李四","王五"]
    }
  },
  methods:{

    clickDiv(){
      console.log("点击Div")
    },
    addListHandler(){
      //会引起ui自动更新
      // this.names.push("赵六")
      //不会引起ui自动更新
      // this.names.concat("田七")
      // console.log(this.names.concat("田七"))
      this.names=this.names.concat("李师师")
    }
  }
}

</script>

2.计算属性

可以用来处理复杂逻辑

<template>
<div>计算属性</div>
<h3>兴趣</h3>
<p>{{ hobbyContent }}</p>
</template>
<script>
export default{
  data(){
    return{
      
      test:{
        name:"张三",
        hobbies:["打球","听音乐","跳舞"]
      }
    }
  },
  methods:{

    clickDiv(){
      console.log("点击Div")
    },
    addListHandler(){
      //会引起ui自动更新
      // this.names.push("赵六")
      //不会引起ui自动更新
      // this.names.concat("田七")
      // console.log(this.names.concat("田七"))
      this.names=this.names.concat("李师师")
    }
  },
  computed:{
    hobbyContent(){
      return this.test.hobbies.length>0?'Yes':'No'
    }
  }
}

</script>

3.class绑定

<template>
<p :class="{'active':isActive,'text-danger':hasError}">class样式绑定1</p>
<p :class="classObject">class样式绑定2</p>
<p :class="[arrActive,arrHasError]">class样式绑定3</p>
</template>
<script>
export default{
  data(){
    return{
      
      isActive:true,
      hasError:true,
      classObject:{
        'active':true,
        'text-danger':true
      },
      arrActive:'active',
      arrHasError:'text-danger'
    }
  }
}

</script>

<style scoped>
.active{
  font-size: 30px;
}
.text-danger{
  color: red;
}

</style>

4.style绑定

5.侦听器

侦听页面变化，只可以侦听在data中声明且使用模板语法引用的数据。

<template>
<h3>侦听器</h3>
<p>{{ message }}</p>
<button @click="updateHandler">修改数据</button>
</template>
<script>

export default{
  data(){
    return{
      
     message:"hello"
    }
  },
  methods:{
    updateHandler(){
      this.message="world"
    }

  },
  watch:{
    message(newValue,oldValue){
      //newValue：改变后的数据
      //oldValue:改变前的数据
      console.log(newValue,oldValue)

    }
  }
}

</script>

6.表单输入绑定

使用v-model实现

<template>
<h3>表单输入绑定</h3>
<form>
  <input type="input" v-model.lazy="message"/>
  <p>{{ message }}</p>

  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</form>
</template>
<script>

export default{
  data(){
    return{
      
     message:"",
     checked:false
    }
  }
}

</script>

7.模板引用（直接操作dom）

没有特殊需求不要操作DOM

<template>
<h3>获取DOM操作</h3>
<div ref="container">内容</div>
<button @click="getElementHandler">获取元素</button>
</template>
<script>

export default{
  data(){
    return{
      
     message:"",
     checked:false
    }
  },
  methods:{
    getElementHandler(){
      console.log(this.$refs.container)
      this.$refs.container.innerHTML="hello"
    }
  }
}

</script>