Vue2学习day02-侦听属性&计算属性与侦听属性&绑定样式&条件渲染&列表渲染&Vue监测数据的原理

Vue2学习day02

侦听属性

监视属性watch：

• 当监视属性变化时回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视
• 想要在初始化时也进行监视让handler调用一下，需要声明immediate:true
• 监视的两种写法：
  • new Vue是传入warch配置
  • 通过vm.$watch监视

<div id="root">
    <h2>今天天气很{
  {info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    
        el: '#root',
        data: {
    
            isHot:true
        },
        computed:{
    
            info(){
    
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods: {
    
            changeWeather(){
    
                this.isHot = !this.isHot
            }
        },
        // 第一种写法
        /*watch:{
            isHot:{
                immediate:true,// 初始化时让handler调用一下
                // handler什么时候调用？当isHot发生改变时调用
                handler(newValue,oldValue){
                    console.log("isHot被修改了",newValue,oldValue)
                }
            }
        }*/
    })
	// 第二种写法
    vm.$watch('isHot',{
    
        immediate:true,// 初始化时让handler调用一下
        // handler什么时候调用？当isHot发生改变时调用
        handler(newValue,oldValue){
    
            console.log("isHot被修改了",newValue,oldValue)
        }
    })
</script>

监视属性简写:

• 配置属性中只有handler时才能使用简写形式
• 相当于handler函数

//第一种写法的简写
isHot(newValue,oldValue){
   
    console.log("isHot被修改了",newValue,oldValue)
}

// 第二种写法简写
vm.$watch('isHot',function(){
   
    console.log("isHot被修改了",newValue,oldValue)
})

深度监视：

• Vue中的watch默认不监视对象内部值的改变
• 配置deep为true开启深度监视可以检测对象内部值的改变

注：

• Vue自身可以检测对象内部值的改变，但是Vue提供的watch默认不可以
• 使用watch是根据数据的具体结构，决定是否采用深度监视

<div id="root">
    <h2>今天天气很{
  {info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr />
    <h3>a的值是：{
  {numbers.a}}</h3>
    <button @click="a++">点我让a的值++</button>
    <hr />
    <h3>b的值是：{
  {numbers.b}}</h3>
    <button @click="a++">点我让b的值++</button>
    <button @click="numbers">点我让b的值++</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    
        el: '#root',
        data: {
    
            isHot:true,
            numbers:{
    
                a:1,
                b:1
            }
        },
        computed:{
    
            info(){
    
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods: {
    
            changeWeather(){
    
                this.isHot = !this.isHot
            }
        },
        watch:{
    
            isHot:{
    
                //immediate:true,// 初始化时让handler调用一下
                // handler什么时候调用？当isHot发生改变时调用
                handler(newValue,oldValue){
    
                    console.log("isHot被修改了",newValue,oldValue)
                }
            },
            // 监视多级结构中某个属性的变化不能用简写，只能用key
            'numbers.a':{
    
                handler(){
    
                    console.log('a被改变了')
                }
            },
            // 监视多级结构中所有属性的变化
            numbers:{
    
                deep:true,// 默认false关闭
                handler(){
    
                    console.log('numbers改变了')
                }
            }
        }
    })
</script>

计算属性与侦听属性：

computed和watch之间的区别：

• computed能完成的功能，warch都可以完成
• watch能完成的功能，computed不一定能完成

两个重要的小原则：

• 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
• 所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数）最好写成箭头函数
  这样this的指向才是vm或组件实例对象

使用warch实现姓名案例：

<div id="root">
    性：<input type="text" v-model="firstName"><br /> 
    名：<input type="text" v-model="lastName"><br /> 
    姓名：<span>{
  {fullName}}}</span>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
    
        el: '#root',
        data: {
    
            firstName: '白',
            lastName: '敬亭',
            fullName:'白-敬亭'
        },
        computed: {
    
            
        },
        watch:{
    
            firstName(newValue,oldValue){
    
                // 写成箭头函数，没有自己的this，会往外找，这里找到firstName，又因为
                // firstName是一个普通函数，this指向为vm，故该定时器函数的this也为vm
                setTimeout(()=>{
    
                    this.fullName = newValue + '-' + this.lastName
                },1000)
            },
            lastName(newValue,oldValue){
    
                this.fullName = this.firstName + '-' + newValue
            }
        }
    })
</script>

绑定样式

绑定样式：

• class样式：
  • 写法：:class=“xxx” xxx可以使字符串、对象、数组
    • 字符串写法适用于：类名不确定，要动态获取
    • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
    • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
• style样式：
  • 写法：类似class样式为 :style=“xxx”
    • :style=“fontSize:xxx” 其中xxx是动态值
    • :style="[a,b]"其中a、b是样式对象 ，即名字不能乱写，要是存在的属性

定义样式：

<style>
   .basic{
    
       width: 400px;
       height: 100px;
       border: 1px solid black;
   }
   
   .happy{
    
       border: 4px solid red;;
       background-color: rgba(255, 255, 0, 0.644);
       background: linear-gradient(30deg,yellow,pink,orange,yellow);
   }
   .sad{
    
       border: 4px dashed rgb(2, 197, 2);
       background-color: gray;
   }
   .normal{
    
       background-color: skyblue