Vue 基础复习一

1. 插值  表达式  动态属性(setAttribute JSES5)   v-html（理解是innerHTML(JSES5)）

实例如下：

<template>
    <div>
        <!-- 第一知识点 插值 -->
        <p>插值 {{message}}</p> 
        <!-- 第二知识点 表达式 -->
        <p>JS {{age?'yes23':'no'}}</p>
        <!-- 第三个知识点  动态属性的使用 -->
        <p :id="dynamicId">动态属性id 的使用</p>
        <hr>
        <!-- 第四个知识点 v-html 使用 -->
        <p v-html="rawHtml">
            <!-- 这里面的span  会被覆盖掉的 -->
            <span>会有xxr 的风险</span>
            <span>【注意】使用v-html之后 将会覆盖子元素的</span>
        </p>
    </div>
</template>
<script>
export default {
     data(){
        return {
            message:'我是插值表达式',
            age:true,
            dynamicId:`id-${Date.now()}`, //ES6 模板字符串语法  ${} 
            rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
        }
     }
}
</script>

computed（具备缓存机制） watch（对于值类型，它不存在的深度监听，对于引用类型 获取不到oldVal）

加入deep:true 可以实现深度拷贝

实例如下：

<template>
    <div>
        <p>num {{num}}</p>
        <p>double1 {{double1}}</p>
        <!-- 数据的双向数据绑定 必须要有get set -->
        <input v-model="double2"></input>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            num:20
        }
    },
    computed:{
        double1:function(){
            return this.num *2
        },
        double2:{
            // 缓存是提高运算的性能。如果data里面的数据不变的，那么下面的值是不变的。
            get:function(){
                return this.num *2
            },
            set:function(val){
                this.num = val/2
            }
        }
    }
}
</script>

 

<template>
    <div>
        <input v-model="name"/>
        <input v-model="info.city"/>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name: 'yushen',
            // 便于讲解watch 对引用类型的深度监听
            info: {
                city: 'xinjiang'
            }
        }
    },
    watch:{
        // 监听data中的name
        name:function(oldVal,val){
            console.log('watch name',oldVal,val);
            // 值类型 可以正常的拿到oldVal 和 val
        },
        // 监听data 中的  info
        info:{
            handler:function(oldVal,val){
                console.log('watch info', oldVal, val)
            // 引用类型，拿不到 oldVal 。因为指针指向同一个地址相同，此时已经指向了新的 val 
            },
            deep:true  //这样就可以深度监听了
        }
    }
}
</script>

动态的使用:class（CSS选择器 class类 10） :style（CSS中的内联式样式 1000） 

<template>
  <div>
      <p :class="{black:isBlack,yellow:isYellow}">使用class（对象）</p>
      <p :class="[black,yellow]">使用class(数组)</p>
      <p :style="styleData">使用style</p>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isBlack:true,
            isYellow:true,
            black:'container1',
            yellow:'container2',
            styleData:{
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
}
</script>

<style>

</style>