开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue2(2) -> 正文阅读

[JavaScript知识库]vue2(2)

天气案例

监视属性watch

天气案例

绑定事件的时候，@xxx="yyy" ? yyy可以写一些简单的语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <!-- <button @click="isHot=!isHot">切换天气</button> -->
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    const vm=new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot=!this.isHot
            }
        }

    })

</script>
</html>

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视

监视的两种写法：

1）new Vue时传入watch配置

2）通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    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(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue);
        //         }
        //     }
        // }
    })
    vm.$watch('info',{
        immediate:true,
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue);
        }
    })
</script>
</html>

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）
配置deep:true可以监测对象内部值改变（多层）

备注：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers={a:666,b:888}">彻底换掉numbers</button>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    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(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }

            },
            // 监视多级结构中某个属性的变化
            // 'numbers.a':{
            //     handler(){
            //         console.log('a被改变了');
            //     }
            // },
            // 监视多级结构中所有属性的变化
            numbers:{
                deep:true,
                handler(){
                    console.log('number改变了');
                }
            }
        }
    })
    
</script>
</html>

监视简写属性

需要没有immediate和deep属性

简写有两种方式，一在watch，二在全局中

isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue);
            }

vm.$watch('isHot',function(newValue,oldValue)){
        console.log('isHot被修改了',newValue,oldValue);
    }

watch对比computed

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作，如setTimeout

两个重要的小原则：

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

watch:{
            firstname(val){
                setTimeout(()=>{
                    this.fullName=val+'-'+this.lastname
                })
                this.fullName=newValue+'-'+this.lastname
            },
            lastname(newValue){
                this.fullName=this.firstname+'-'+newValue
            }
        }

绑定class样式

字符串写法，适用于：样式的类名不确定，需要动态指定
数组写法，适用于要绑定的的样式个数不确定，名字也不确定
对象写法，适用于要绑定的个数确定，名字也确定，但要动态决定用不用

条件渲染

1.v-if

写法：

v-if="表达式"
v-else-if="表达式"
v-else="表达式”

适用于：切换频率较高的场景

特点：不展示DOM的元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被”打断“

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>当前的n值为：{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2 v-show="1===1">欢迎来到{{name}}</h2>

        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1===1">欢迎来到{{name}}</h2>

        <!-- v-else和v-else-if -->
        <div v-if="n===1">Angular</div>
        <div v-else-if="n===2">React</div>
        <div v-else-if="n===3">Vue</div>
        <div v-else> 哈哈</div>

        <div>
            <h2 v-show="n===1">你好</h2>
            <h2 v-show="n===1">尚硅谷</h2>
            <h2 v-show="n===1">北京</h2>
        </div>

        <!-- v-if与template的配合使用 -->
        <template>
            <h2>你好</h2>
            <h2>guigu</h2>
            <h2>北京</h2>
        </template>

    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    const vm=new Vue({
        el:'#root',
        data:{
            name:'花京院',
            n:0
        }
    })

</script>
</html>

列表渲染

v-for指令

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <ul>
        <li v-for="(p,index) of persons" :key="index">
          <!-- {{p}}--{{index}} -->
          {{p.name}}---{{p.age}}---{{index}}--{{p.id}}
        </li>
      </ul>

      <!-- 遍历对象 -->
      <h2>汽车信息（遍历对象）</h2>
      <ul>
        <li v-for="(value,k) of car" :key="k">
            <!-- //k表示属性名 -->
            {{k}}---{{value}}
        </li>
      </ul>

      <!-- 遍历字符串 -->
      <h2>测试遍历字符串（用得少）</h2>
      <ul>
        <li v-for="(a,b) of str">
            <!-- a表示字符串的每个字符，b表示索引值 -->
            <!-- char                 index -->
            {{a}}---{{b}}
        </li>
      </ul>

      <!-- 遍历指定次数 -->

      <h2>测试遍历指定次数（用得少）</h2>
      <ul>
        <li v-for="(number,index) of 5" :key="index">
          {{index}}----{{number}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    new Vue({
      el: "#root",
      data: {
        // 遍历数组
        persons: [
          { id: "001", name: "张三", age: 18 },
          { id: "002", name: "李四", age: 19 },
          { id: "003", name: "王五", age: 20 },
        ],
        car: {
          name: "奥迪A8",
          price: "70万",
          color: "黑色",
        },
        str:'hello'
      },
    });
  </script>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-08-19 18:55:10 更:2022-08-19 18:59:21

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 9:37:32-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码