vue基本語法與指令

序號	語法/指令	描述
1	`Vue.createApp`	創(chuàng)建vue實例
2	`data`	存放vue中的所有變量
3	`return`	返回需要用到的數(shù)據(jù)
4	`mount(ele)`	掛載，將vue創(chuàng)建的實例掛載到頁面元素(ele)中
5	`v-text`	只能得到html標簽中的文本內(nèi)容，類似js中`textContent`
6	`v-html`	可解析html標簽，類似js中`innerHTML`
7	`v-bind`	應(yīng)用于樣式綁定，高頻指令，可用冒號`:`表示
8	`v-on`	vue的事件指令,高頻指令，可用`@`表示
9	`v-model`	應(yīng)用于數(shù)據(jù)的雙向綁定
10	`obj.lazy`	`lazy`修飾符,類似js中 `blur事件與change事件相結(jié)合`

實例演示

<!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>vue基本語法與指令</title>
    <!-- 引入vue.js -->
    <script src="vue.js"></script>
    <style>
      .bgc {
        background-color: lightgreen;
      }
      .color {
        color: lightcoral;
      }
      .box {
        display: block;
        margin-top: 2px;
        border: 1px solid;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <!-- vue中變量使用插值填充 -->
      <h4>{{msg1}}</h4>
      <h4>{{msg2}}</h4>
      <!-- 使用v-text動態(tài)生成值 -->
      <span v-text="message"></span>
      <br />
      <!-- 使用v-html動態(tài)生成值 -->
      <span v-html="messageHTML"></span>
      <hr />
      <!-- v-bind樣式綁定 以數(shù)組方式綁定-->
      <span v-bind:class="cssArr">Hello World</span>
      <!-- v-bind樣式綁定 以對象方式綁定 簡化v-bind為冒號-->
      <span :class="cssObj">Hello World</span>
      <!-- v-bind樣式綁定 是否使用該樣式 默認啟用 反之禁用-->
      <span :class="{bgc:isBgc}">Hello World</span>
      <br />
      <!-- 數(shù)據(jù)雙向綁定 -->
      <!-- v-on: vue的事件指令 可簡化為@表示 -->
      <!-- @input : input事件，實時監(jiān)聽input值得變化-->
      <!-- :v-tetx ： 將當(dāng)前input的value值動態(tài)綁定給context變量 -->
      <input type="text" @input="context = $event.target.value" :v-tetx="context" />
      <span>{{context}}</span>
      <!-- v-model 數(shù)據(jù)雙向綁定 -->
      <hr />
      <!-- 數(shù)據(jù)雙向綁定 使用v-model簡化 -->
      <!-- v-model="contextModel"===@input="contextModel = $event.target.value" -->
      <input type="text" v-model="contextModel" :v-tetx="contextModel" />
      <span>{{contextModel}}</span>
      <hr />
      <!-- 延遲綁定：修飾符 -->
      <!-- lazy:失去焦點時改變值 blur事件 change事件相結(jié)合-->
      <input type="text" v-model.lazy="contextLazy" :v-text="contextLazy" />
      <span>{{contextLazy}}</span>
    </div>
    <script>
      // Vue.createApp: 創(chuàng)建vue實例
      // data: 存放vue中的所有變量
      // return: 返回需要用到的數(shù)據(jù)
      // mount(ele): 掛載，將vue創(chuàng)建的實例掛載到頁面元素(ele)中
      const app = Vue.createApp({
        data() {
          return {
            msg1: "這是vue插值",
            msg2: "這是vue插值",
            message: "使用v-text動態(tài)生成值",
            messageHTML: '<i style="color:red">v-html指令</i>',
            cssArr: ["bgc", "color", "box"],
            cssObj: {
              bgc: "bgc",
              color: "color",
              box: "box",
            },
            // 禁用‘.bgc的樣式’
            bgc: "bgc",
            isBgc: false,
            context: "",
            contextModel: "",
            contextLazy: "",
          };
        },
      }).mount(".app");
      // 數(shù)據(jù)注入: 數(shù)據(jù)自動注入到了vue實例中 可以通過$data來使用
      console.log(app.$data.msg1);
      // 數(shù)據(jù)注入：因為數(shù)據(jù)已經(jīng)被綁定到vue實例的app對象 所有可以以屬性的方式老獲取變量
      console.log(app.msg1);
      // 響應(yīng)式更新變量
      app.msg2 = "響應(yīng)式更新變量";
    </script>
  </body>
</html>

vue的兩個插件

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

uni-app之tab選項卡

2022-09-01 16:35:49

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

vue基本語法與指令

實例演示

vue的兩個插件