Vue3--基础语法使用

_聪明勇敢有力气

已于 2022-09-18 16:10:09 修改

阅读量192

点赞数 1

分类专栏： vue3 文章标签： javascript 前端 vue.js

于 2022-09-17 21:04:57 首次发布

本文链接：https://blog.csdn.net/weixin_65402230/article/details/126910361

版权

vue3 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

基础语法使用

1.Mustache差值语法

我们不仅通过在Vue.createApp()中使用template来渲染数据或者标签，而且可以把template省略不写，而是把数据写在根标签下，通过{{}}的形式

  <div id="app">

    <!-- 1.基本使用 -->
    <h2>{{ message }}</h2>
    <h2>当前计数: {{ counter }} </h2>

    <!-- 2.表达式 -->
    <h2>计数双倍: {{ counter * 2 }}</h2>

    <!-- 3.三元运算符 -->
    <h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

    <!-- 4.调用methods中函数 -->
    <h2>{{ formatDate(time) }}</h2>

    <!-- 5.注意: 这里不能定义语句 -->
    <!-- <h2>{{ const name = "why" }}</h2> -->

  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      data: function() {
        return {
          message: "Hello Vue",
          counter: 100,
          age: 22,
          time: 123
        }
      },

      methods: {
        formatDate: function(date) {
          return "2022-10-10-" + date
        }
      }
    })

    // 2.挂载app
    app.mount("#app")

2.v-once

v-once用于指定元素或者组件只渲染一次
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化;

 <!-- 指令: v-once -->
    <h2 v-once>
      {{ message }}
      <span>数字: {{counter}}</span>
    </h2>

3.v-text

用于更新元素的 textContent

<div id="app">
    <h2> aa {{message}} bbb</h2>
    <h2 v-text="message">aaa</h2>
</div>

4.v-html

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

<div id="app">
    <h2>{{ content }}</h2>
    <h2 v-html="content"></h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      data: function() {
        return {
          content: `<span style="color: red; font-size: 30px;">哈哈哈</span>`
        }
      },
    })

    // 2.挂载app
    app.mount("#app")

5.v-pre

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
跳过不需要编译的节点，加快编译的速度

6.v-cloak

这个指令保持在元素上直到关联组件实例结束编译
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕

<style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

  <div id="app">
    <h2 v-cloak>{{message}}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    
    setTimeout(() => {
      // 1.创建app
      const app = Vue.createApp({
        data: function() {
          return {
            message: "Hello Vue"
          }
        },
      })

      // 2.挂载app
      app.mount("#app")
    }, 3000)

7.v-memo

只有赋值的那个值发生改变才会整体改变

 <div id="app">
      <div v-memo="[name]">
        <h2>年龄：{{age}}</h2>
      </div>
      <button @click="updateInfo">改变信息</button>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            age: 18,
          };
        },
        methods: {
          updateInfo() {
            this.age = 20;
          },
        },
      });
      app.mount("#app");

8.v-bind

一.v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
v-bind可以简写为:

      <!-- 绑定img的src属性 -->
      <img v-bind:src="showImagUrl" alt="" />
      <!-- 绑定a 的href属性 -->
      <a v-bind:href="href"></a>

二.v-bind绑定class属性
基本绑定

      <h2 :class="classes">Hello world</h2>

2动态class可以写对象语法
{key:value}
key :要绑定的class名
value: true/false

      <button :class="{active:isActive}" @click="btnClick">我是按钮</button>
      ...
      ...
      btnClick() {
            this.isActive = !this.isActive;
          },

3.动态绑定的class和普通的class是可以同时使用的

	  <button
        class="abc cba"
        :class="getDynamicClasses()"
        @click="btnClick">
      </button>

4.动态class可以使用数组语法

      <h2 :class="['abc' ,'cba']">Hello world</h2>
      <h2 :class="['abc' ,className]">Hello world</h2>
      <h2 :class="['abc' ,className,isActive?'active':'']">Hello world</h2>
      <h2 :class="['abc' ,className,{active:isActive}]">Hello world</h2>

三.v-bind绑定style

    <div id="app">
      <!-- 普通的html写法 -->
      <h2 style="color: red; font-size: 30px">哈哈哈</h2>
      <!-- style中的某些之 来自data中 -->
      <h2 v-bind:style="{color: fontColor, fontSize: fontSize + 'px'}">
				<!-- 动态绑定属性 属性是一个对象 -->
      <h2 :style="objStyle">
        哈哈哈
      </h2>
      <h2 :style="[objStyle,{backgroundColor:'purple'}]">嘿嘿</h2>
	</div>

    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            fontColor: "blue",
            fontSize: 30,
            objStyle:{
            	fontSize:'50px',
            	color:'green'
            	}
          };
        },
      });
      app.mount("#app");
    </script>

四.v-bind绑定属性名

	<div id="app">
      <h2 :[name]="'aaa'">Hello world</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            name: "class",
          };
        },
      });
      app.mount("#app");
    </script>