Vue（二）

南城孤巷

已于 2022-04-08 10:13:43 修改

阅读量193

点赞数 2

分类专栏： vue 文章标签： vue.js

于 2022-03-07 21:50:20 首次发布

本文链接：https://blog.csdn.net/qq_53293179/article/details/123340424

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

属性计算

计算属性:
        1.定义:要用的属性不存在,要通过已有属性计算得来。

2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.

        3.get函数什么时候执行?

                (1).初次读取时会执行一次。

                (2).当依赖的数据发生改变时会被再次调用。

        4.优势:与methods实现相比，内部有缓存机制（复用)，效率更高，调试方便。

        5.备注:

                1.计算属性最终会出现在vm上,直接读取使用即可。

                2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<div id="root">
    {{fullName}}
</div>

<script>
    new vue=({
        el："root",
        data:{
            fristName:"张"，
            lastName:"三"
        },
        computed:{
            fullName:{
                get(){
                    return this.fristName+"-"+this.lastName
                },
    
                set(value){
                    const arr=value.split("-")
                    this.fristName=arr[0]
                    this.lastName=arr[1]
                }
            }
        }
    })
</script>

//简写，简写的话只能读取
<script>
    new vue=({
        el："root",
        data:{
            fristName:"张"，
            lastName:"三"
        },
        computed:{
            fullName(){
                return this.fristName+"-"+this.lastName
            }
        }
    })
</script>

天气案例

<div id="root">
    <h2>今天天气为{{info}}</h2>
    <button @click="weatherChange">改变天气</button>
</div>

<script>
    new vue=({
        el："#root",
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?"晴天":"阴天"
            }
        },
        methods:{
            weatherChange(){
                this.isHot=!this.isHot
            }
        }
    })
</script>

监视属性

监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!

3.监视的两种写法:

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

<div id="root">
    <h2>今天天气为{{info}}</h2>
    <button @click="weatherChange">改变天气</button>
</div>

<script>
    const vm=new vue=({
        el："#root",
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?"晴天":"阴天"
            }
        },
        methods:{
            weatherChange(){
                this.isHot=!this.isHot
            }
        },
        //方法一
        watch:{
            isHot:{
                immediate:true,   //初始化调用一次
                handler(newValue,oldValue){
                    console.log("isHot已被修改")
                }
        }
            
        }
    })
 
    vm.$watch("isHot",{
         immediate:true,   //初始化调用一次
         handler(newValue,oldValue){
         console.log("isHot已被修改")
         }
    })
</script>

深度监视

(1).vue中的watch默认不监测对象内部值的改变(一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<script>
    const vm=new vue=({
        el："#root",
        data:{
            number:{
                a:10,
                b:5
            }
        },
       
        watch:{
            number(){
                deep:true,
                handler(new,old){
                    console.log("number改变了")
                }
                
            }
        }
            
        
    })
 
  
</script>

监视属性简写



<script>
    const vm=new vue=({
        el："#root",
        data:{
            isHot:true
        },
        
        //方法一
        watch:{
            isHot(newValue,oldValue){
               console.log("isHot已被修改")
        }
            
        }
    })
 
    //方法二
    vm.$watch("isHot",function(newValue,oldValue){
         console.log("isHot已被修改")
    })
</script>

对比

computed和watch之间的区别:
1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能·computed不一定能完成.例如: watch可以进行异步操作。

两个重要的小原则:

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），

最好写成箭头函数，这样this的指向才是vm或组件实例对象。

绑定class

<div id="root">
     <!--字符串写法，适用于：样式类名不确定，需要动态指定-->
     <button :class="mood">{{name}}</button>

     <!--数组写法，适用于：样式数量不确定，类名也不确定-->
     <button :class="classArr">{{name}}</button>

     <!--对象写法，适用于：样式数量确定，类名也确定，但要确定动态启用-->
     <button :class="ato1:true ato2:true">{{name}}</button>
</div>

<script>
    const vm=new vue=({
        el："#root",
        data:{
            mood:"moods",
            classArr:["ato1","ato2","ato3"],
            
            
        }
        
    })
</script>

<stye>
    .moods{}
    .ato1{}
    .ato2{}
    .ato3{}
</stye>

绑定style

<div id="root">

     <!--数组写法-->
     <button :style="styleArr">{{name}}</button>

     <!--对象写法-->
     <button :style="styleObjet">{{name}}</button>
</div>

<script>
    const vm=new vue=({
        el："#root",
        data:{
            
            styleArr:[
                {fontSize:"40px"},
                {color:"red"}
            ],
            styleObjet:{fontSize:"40px"}
            
            
        }
        
    })
</script>

总结

绑定样式:
1. class样式
写法:class="xxx"xxX可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style=""[fontsize: xxx]"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

条件渲染

条件渲染:
        1.v-if
                写法:
                        (1).v-if="表达式”
                        (2).v-else-if="表达式"
                        (3).v-else="表达式”
                适用于:切换频率较低的场景。
                特点:不展示的DOM元素直接被移除。
                注意: v-1f可以和:v-else-if、 v-else起使用，但要求结构不能被“打断”。

        2 ,v- show
                写法: v-show=" 表达式"
                适用于:切换频率较高的场景。
                特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

        3.备注:使用v-if的时，元素可能无法获取到，面使用v-show定可以获取到。

<div id="root">
    <h3>当前n为：{{n}}</h3>
    <button @click="n++">点我n++</button>

     <!--使用v-show做条件渲染-->
     <h3 v-show="n==0">n==0</h3>
     <h3 v-show="n==1">n==1</h3>

     <!--使用v-if做条件渲染-->
     <h3 v-if="n==0">n==0</h3>
     <h3 v-else-if="n==1">n==1</h3>
     <h3 v-else-if="n==2">n==2</h3>
     <h3 v-else>n>2</h3>
</div>

<script>
    const vm=new vue=({
        el："#root",
        data:{
            n:0 
        }
        
    })
</script>

列表渲染

v-for指令:
1.用于展示列表数据
2.语法: v-for="(item, index) in xxx" :key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
<div id="app">
   <ul>
    <!--数组遍历-->
    <li><h2>人员列表<h2></li>
    <li v-for="(value, index) in person" :key="index">
     {{ index }}: {{ value }}
    </li>

    <!--对象遍历-->
    <li><h2>汽车信息<h2></li>
    <li v-for="(value, key ,index) in car" :key="key">
     {{ index }}:{{key}} : {{ value }}
    </li>

     <!--字符串遍历-->
    <li><h2>字符串遍历<h2></li>
    <li v-for="(char,index ) in str">
        {{index+1}}:{{char}}
    </li>

     <!--遍历指定次数-->
    <li><h2>遍历指定次数<h2></li>
    <li v-for="(a,index ) in 3">
        {{index}}:{{a}}
    </li>
</ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    person:["小王","小李","小米"],
    car:{
        name: "cidielc",
        age: 12,
        price: 190000
    },
    str: "abc"
  }
})
</script>
        
    </body>
</html>