vue常用术语、常用指令实例演示

程序员文章站 2022-03-27 08:27:02

...

vue 常用术语

vue 安装,推荐 cdn:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
挂载点:vue 实例的作用域,个人理解为容器
vue 实例，Vue.createApp({}）=>创建 vue 实例,括号中配置项为对象字面量，app.mount 将 vue 实例与页面中的挂载点元素绑定
数据注入:通过访问器属性来实现
响应式:


<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <script src="https://unpkg.com/vue@next"></script>
  </head>

  <body>
    <!-- 1. 挂载点  -->
    <div class="app">
      <p>用户名: {{username}}</p>
    </div>

    <script>
      // 2. vue 实例
      const app = Vue.createApp({
        // vue中的变量/数据全部写到data方法中
        data() {
          return {
            username: "Help",
          };
        },
      }).mount(".app"); // 默认调用，document.querySelector方法
      // 将vue实例与页面中的挂载点元素绑定
      // app.mount(document.querySelector(".app"))
      console.log(app);

      // 3. 数据注入
      console.log(app.$data.username);
      console.log(app.username);

      // 用访问器属性来实现
      const obj = {
        $data: {
          email: "Help10086@foxmail.com",
        },

        // 访问器属性
        get email() {
          return this.$data.email;
        },
      };
      console.log(obj.$data.email);
      console.log(obj.email);

      // 4. 响应式,避免在原代码中修改
      app.username = "DASHU";
    </script>
  </body>
</html>

vue 常用指令演示

vue 指令: v-为前缀的一组指令,写到 html 标签的属性位置上,本质上讲就是”自定义属性”
v-text 相当于 textContent，内容必须是 JS 代码
v-html 相当于 innnerHTML，内容必须是 JS 代码
v-once 只渲染一次，类似常量


<!DOCTYPE html>
<html lang="zh-CN">
  <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>v-text,v-html,v-once</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>

  <body>
    <!-- vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是"自定义属性" -->
    <div class="app">
      <p>用户名: {{username}}</p>
      <!-- v-text 相当于 textContent，内容必须是JS代码  -->
      <p>用户名: <span v-text="username"></span></p>
      <!-- v-html 相当于 innnerHTML -->
      <p>用户名: <span v-html="username"></span></p>
      <!-- v-once: 只渲染一次 -->
      <p>用户名: <span v-once="username"></span></p>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            username: "10086",
          };
        },
      }).mount(".app");

      app.username = '<span style="color:red">500</span>';

      app.username = "1000";
    </script>
  </body>
</html>

[http://help10086.cn/0113/demo3.html]

样式绑定


<!DOCTYPE html>
<html lang="zh-CN">
  <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>样式绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .active {
        color: red;
      }

      .bgc {
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div class="app">
      <!-- 一: 样式绑定 v-bind, 简化: 冒号 -->
      <!-- 行内样式 style -->
      <p style="color: #ff0000">help10086.cn</p>
      <p v-bind:style="style">help10086.cn</p>

      <p style="color: #0000ff; background-color: #ffff00">help10086.cn</p>
      <p :style="{color: textColor, backgroundColor: bgColor}">help10086.cn</p>
      <!-- <button style="前面三个是基本样式,后面三个是定制样式"></button> -->
      <button :style="[btnBase, btnCustom]">提交</button>

      <!-- class样式 -->
      <p :class="active">hello word!</p>
      <p :class="{'active':isActive}">hello texhong!</p>
      <p :class="['active', 'bgc']">hello jinyu!</p>
      <p :class="[active , bgc]">hello viet nam!</p>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            style: "color:#0000ff",

            textColor: "#008000",
            bgColor: "#00ffff",

            btnBase: {
              width: "5em",
              height: "2em",
              border: "none",
            },
            btnCustom: {
              backgroundColor: "seagreen",
              color: "#ffffff",
              cursor: "pointer",
            },

            active: "active",
            isActive: false,

            bgc: "bgc",
          };
        },
      }).mount(".app");
    </script>
  </body>
</html>

[http://help10086.cn/0113/demo4.html]

双向绑定


<!DOCTYPE html>
<html lang="zh-CN">

<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>双向绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <!-- es6  -->
    <p>
        <div>es6:</div>
        <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
    </p>

    <!-- vue  -->
    <div class="app">
        <p>
            <div>vue@input</div>
            <!-- vue中的事件对象,使用 $event , 不能直接用 event  -->
            <input type="text" v-on:input="comment = $event.target.value" :value="comment"><span>{{comment}}</span>
        </p>

        <p>
            <div>vue@v-model</div>
            <!-- vue中的事件对象,使用 $event , 不能直接用 event  -->
            <input type="text" v-model="comment" :value="comment"><span>{{comment}}</span>
        </p>

        <!-- 延迟绑定 -->
        <p>
            <div>vue@v-model.lazy</div>
            <input type="text" v-model.lazy="comment" :value="comment"><span>{{comment}}</span>
        </p>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    comment: ''
                }
            }
        }).mount('.app')
    </script>
</body>
</html>

[http://help10086.cn/0113/demo5.html]

上一篇： JS数组与对象的常用方法 & JSON.stringify() 的用法

下一篇： linux mysql 自己关闭了，看不懂日志，求助

vue常用术语、常用指令实例演示

vue 常用术语

vue 常用指令演示

样式绑定

双向绑定

Vue.js常用指令汇总（v-if、v-for等）

Vue常用的几个指令附完整案例

PHP实现对文本数据库的常用操作方法实例演示

Vue常用指令V-model用法

vue（2）—— vue简单语法运用，常用指令集

Angular 常用指令实例总结整理

又一款MVVM组件 Vue基础语法和常用指令（1）

Vue.js常用指令之循环使用v-for指令教程

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

Vue.js常用指令汇总（v-if、v-for等）