vue基本语法与指令

序号	语法/指令	描述
1	`Vue.createApp`	创建vue实例
2	`data`	存放vue中的所有变量
3	`return`	返回需要用到的数据
4	`mount(ele)`	挂载，将vue创建的实例挂载到页面元素(ele)中
5	`v-text`	只能得到html标签中的文本内容，类似js中`textContent`
6	`v-html`	可解析html标签，类似js中`innerHTML`
7	`v-bind`	应用于样式绑定，高频指令，可用冒号`:`表示
8	`v-on`	vue的事件指令,高频指令，可用`@`表示
9	`v-model`	应用于数据的双向绑定
10	`obj.lazy`	`lazy`修饰符,类似js中 `blur事件与change事件相结合`

实例演示

<!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动态生成值 -->
      <span v-text="message"></span>
      <br />
      <!-- 使用v-html动态生成值 -->
      <span v-html="messageHTML"></span>
      <hr />
      <!-- v-bind样式绑定 以数组方式绑定-->
      <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 />
      <!-- 数据双向绑定 -->
      <!-- v-on: vue的事件指令 可简化为@表示 -->
      <!-- @input : input事件，实时监听input值得变化-->
      <!-- :v-tetx ： 将当前input的value值动态绑定给context变量 -->
      <input type="text" @input="context = $event.target.value" :v-tetx="context" />
      <span>{{context}}</span>
      <!-- v-model 数据双向绑定 -->
      <hr />
      <!-- 数据双向绑定 使用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事件相结合-->
      <input type="text" v-model.lazy="contextLazy" :v-text="contextLazy" />
      <span>{{contextLazy}}</span>
    </div>
    <script>
      // Vue.createApp: 创建vue实例
      // data: 存放vue中的所有变量
      // return: 返回需要用到的数据
      // mount(ele): 挂载，将vue创建的实例挂载到页面元素(ele)中
      const app = Vue.createApp({
        data() {
          return {
            msg1: "这是vue插值",
            msg2: "这是vue插值",
            message: "使用v-text动态生成值",
            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");
      // 数据注入: 数据自动注入到了vue实例中 可以通过$data来使用
      console.log(app.$data.msg1);
      // 数据注入：因为数据已经被绑定到vue实例的app对象 所有可以以属性的方式老获取变量
      console.log(app.msg1);
      // 响应式更新变量
      app.msg2 = "响应式更新变量";
    </script>
  </body>
</html>

vue的两个插件

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

uni-app之tab选项卡

2022-09-01 16:35:49