01，Vue_(入门,Vite,模板语法,计算属性,监听器,类与样式绑定)

李乃龙1

已于 2023-02-10 15:44:35 修改

阅读量122

点赞数

分类专栏： Vue3+es6 文章标签： vue.js javascript 前端

于 2023-02-09 16:54:35 首次发布

本文链接：https://blog.csdn.net/w7635122886/article/details/128956088

版权

Vue3+es6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1，官网

https://cn.vuejs.org/

2，vue3基础使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../file/vue3.js"></script>
</head>
<body>

    <div id="counter">
        <div>{{age}}</div>
        <div>{{name}}</div>
    </div>

<script>
    const Couter = { // 配置对象
        data:function () {
            return{
                age:25,
                name:"李乃龙"
            }
        }
    }
    //创建应用把配置对象传入,会自动解析
    //mount 用来挂载和上面的div相关联
    Vue.createApp(Couter).mount("#counter")
</script>
</body>
</html>

在这里插入图片描述

3，Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

要使用 Vite 来创建一个 Vue 项目，非常简单：
使用npm
在这里插入图片描述

npm init vite@latest Demo02_Vue_Vite -- --template vue

在这里插入图片描述

4，vue声明式渲染

在这里插入图片描述

<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
  </div>
</template>

<script>
  //声明式渲染，可以提高开发效率
  export default {
    data(){
      return{
        name:"java开发工程师",
        age:25
      }
    }
  }
</script>

在这里插入图片描述

5，模板语法

5.1，v-once

v-once:当数据改变时插值处的值不会更新

<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
    <!--v-once:当数据改变时插值处的值不会更新-->
    <p v-once>{{name}}</p>
    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        name:"linailong",
        age:25
      }
    },
    methods:{
      changeName:function(){
        this.name = "李乃龙"
      }
    }
  }
</script>

在这里插入图片描述

5.2，v-html

展示html格式内容

<template>
  <div>
    <div  v-html="rawHtml"></div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        name:"linailong",
        age:25,
        rawHtml:"<h1>小飞飞</h1>"
      }
    }
  }
</script>

在这里插入图片描述

5.3 v-bind

动态绑定属性内容

<template>
  <div>
    <!--v-bind:动态绑定属性内容-->
    <p v-bind:id="id">v-bind绑定</p>
    <div><button @click="changeColor">切换颜色</button></div>
    <img v-bind:src="imageUrl"/>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        id:"d1",
        imageUrl:"https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
      }
    },
    methods:{
      changeColor:function () {
        this.id = "d2"
      }
    }
  }
</script>

<style>
  #d1{
    color: red;
  }

  #d2{
    color: blue;
  }
</style>

在这里插入图片描述

5.4 v-on

监听DOM事件

<template>
  <div>
   <button v-on:click="changeclick">v-on</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
      }
    },
    methods:{
      changeclick:function () {
       alert("v-on")
      }
    }
  }
</script>

<style>
 
</style>

在这里插入图片描述

5.5 动态属性

<template>
  <div>
   <p v-bind:[attributeName]="id">v-bind绑定</p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
          id:"d1",
          attributeName:"id"
      }
    },
    methods:{

    }
  }
</script>

<style>
#d1{
    color: #535bf2;
}
</style>

在这里插入图片描述

6，计算属性的使用和mothods的区别

6.1，计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护

<template>
  <div>
      <p>{{message}}</p>
<!--      使用js-->
      <p>{{message.split('').reverse().join()}}</p>
      <p>{{message.split('').reverse().join()}}</p>
      <p>{{message.split('').reverse().join()}}</p>
<!--      使用计算属性-->
      <p>{{reverseMsg}}</p>
      <p>{{reverseMsg}}</p>
      <p>{{reverseMsg}}</p>
<!--      使用methods-->
      <p>{{reverseMessage()}}</p>
      <p>{{reverseMessage()}}</p>
      <p>{{reverseMessage()}}</p>

  </div>
</template>

<script>
  export default {
    data(){
      return{
          message:"helloworld"
      }
    },
    computed:{ //计算属性
        reverseMsg:function () {
            console.log("computed")
            return this.message.split('').reverse().join()
        }
    },
    methods:{
        reverseMessage:function () {
            console.log("methods")
            return this.message.split('').reverse().join()
        }

    }
  }
</script>

<style>
#d1{
    color: #535bf2;
}
</style>

在这里插入图片描述

6.2，计算属性和methods的特点

计算属性： 只要依赖的属性不变就回缓存起来，下次从缓存中取，
methods： 每次都会调用methods中的方法

6.3，计算属性set，get

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

<template>
  <div>
      <p>{{message}}</p>

<!--      使用计算属性-->
      <p>{{reverseMsg}}</p>
      <p>{{reverseMsg}}</p>
      <p>{{reverseMsg}}</p>

      <button @click="reverseMsg = '小飞飞'">修改message的值</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
          message:"helloworld"
      }
    },
    computed:{ //计算属性
        reverseMsg:{//每一个计算属性中都有get和set
            get:function () { //调用reverseMsg属性时调用
                console.log("get")
                return this.message.split('').reverse().join()
            },
            set:function (newValue) { //设置或更改 reverseMsg 调用
                console.log("set："+newValue)
            }
        }
    },
    methods:{
    }
  }
</script>

<style>
#d1{
    color: #535bf2;
}
</style>

在这里插入图片描述

7，监听器 watch

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

在选项式 API 中，我们可以使用 watch 选项在每次响应式属性发生变化时触发一个函数。

<template>
  <div>
      <p>{{message}}</p>
      <button @click="message = '你好'">改变message</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
          message:"helloworld"
      }
    },
    computed:{ //计算属性
    },
    methods:{ //定义方法
    },
    watch:{ //监听数据的变化
        message:function (newValue,oldValue) {
            console.log("newValue--:"+newValue)
            console.log("oldValue--:"+oldValue)
            //进行异步操作,或者把复杂逻辑的代码写在里面
        }
    }
  }
</script>

<style>
#d1{
    color: #535bf2;
}
</style>

在这里插入图片描述

8，类与样式绑定

<template>
  <div>
      <!--最普通写法-->
      <p class="active">hello_01</p>

      <!--使用v-bind绑定-->
<!--      active是类名-->
<!--      isActive 用来控制样式是否生效-->
      <div :class="{ active2: isActive }">hello_02</div>

<!--      对个样式绑定-->
      <div :class="{ active2: isActive, active3: isActive}">hello_03</div>

<!--      以对象的形式绑定-->
      <div :class="classObj">hello_04</div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
          message:"helloworld",
          isActive:true,
          classObj:{
              active2:true,
              active3:true
          }
      }
    },
    computed:{ //计算属性
    },
    methods:{ //定义方法
    },
    watch:{ //监听数据的变化

    }
  }
</script>

<style>
.active{
    color: #535bf2;
}

.active2{
    color: red;
}

.active3{
    color: red;
    border: 1px royalblue solid;
}
</style>