首页 / VUE / 00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖）

00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9106字，纯文字阅读大概需要14分钟。

内容图文

目录

1、Vue的概述和HelloWorld的使用

Vue安装和使用的方式

  • 直接用<script>引入：直接下载（右键，链接另存为）并用<script>标签引入，Vue会被注册为一个全局变量；

  • CDN

    • 开发环境
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    • 生产环境：对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

  • NPM

    在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

    # 最新稳定版
$ npm install vue

现在初步阶段使用第一种下载的方式，并且项目中引用Vue.js文件。

Vue的HelloWorld程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
</head>
<body>
  <div id="app">
    <h3>{{message}}</h3>
    <span>我的ID是{{name}}</span>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    //ES6语法中,let定义变量/const定义常量
    const app = new Vue({
      /* el:声明要挂载的元素 */
      el: '#app',
      /* 定义一些数据 */
      data: {
        message: 'Hello Vue.js',
        name: "ShawnYue-08"
      }
    });
  </script>
</body>
</html>

展示数据列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>展示列表</title>
</head>
<body>
  <div id="app">
    <ol>
      <li v-for="item in movies">{{item}}</li>
    </ol>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        /* 数组形式:[] */
        movies: ['盗梦空间', '钢铁侠', '复仇者联盟', '星际穿越', '少年派']
      }
    });
  </script>
</body>
</html>

计数器案例---新的属性methods

method属性用于在Vue对象中定义方法；

v-on:click：该指令用于监听某个元素的点击事件，并指定点击后需要执行的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计数器案例</title>
</head>
<body>
  <div id="app">
    <h3>当前计数:{{counter}}</h3>
    <button v-on:click="increment">+</button>
    <!-- <button @click="increment">+</button> -->
    <button v-on:click="decrement">-</button>
    <!-- <button @click="decrement">-</button> -->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods: {
        increment: function () {
          this.counter++;
        },
        decrement: function () {
          this.counter--;
        }
      }
    });
  </script>
</body>
</html>

语法糖：v-on:click指令可以用@click简写的方式。

2、模板语法

2.1、插值操作

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mustache语法</title>
</head>
<body>
  <div id="app">
    <h3>我的id是{{id}}.</h3>
    <!-- Mustache语法中，不仅可以写变量，还可以使用表达式 -->
    <h3>姓名：{{firstName + lastName}}</h3>
    <h3>{{firstName}}{{lastName}}</h3>
    <h3>{{number * 2}}</h3>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        id: '03163151',
        firstName: '渣',
        lastName: '渣辉',
        number: 10
      }
    });
  </script>
</body>
</html>

v-text和Mustache语法相似，将数据显示在页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-text</title>
</head>
<body>
  <div id="app">
    <p>v-text: <span v-text="message"></span></p>
    <p>v-text: <span>{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.'
      }
    });
  </script>
</body>
</html>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-once</title>
</head>
<body>
  <div id="app">
    <span v-once>这个将不会改变{{message}}</span>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      }
    });
  </script>
</body>
</html>

v-pre指令用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-pre</title>
</head>
<body>
  <div id="app">
    <p>Mustache：<span>{{message}}</span></p>
    <p>v-pre：<span v-pre>{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.'
      }
    });
  </script>
</body>
</html>

00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖） - 文章图片

v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
  <style>
    /* 属性选择器 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    {{message}}
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    /* 在Vue解析HTML之前，div有一个v-cloak属性 */
    /* 在Vue解析HTML之后，div中没有一个v-cloak属性 */
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js.'
        }
      });
    }, 3000);
    /* 延迟3s执行 */
  </script>
</body>
</html>

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-html</title>
</head>
<body>
  <div id="app">
    <p>Using mustache:{{rawHtml}}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        rawHtml: '<span style="color: red">There should be red.</span>'
      }
    });
  </script>
</body>
</html>

00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖） - 文章图片

2.2、v-bind指令的使用

前面的指令主要是将值插入到内容中，除了内容需要动态绑定，某些属性也需要动态绑定。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（学到组件时再介绍）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <a v-bind:href="href"><img v-bind:src="imgUrl" alt=""></a>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: '',
        href: 'https://www.superbed.cn/info/5e9bd9c5c2a9a83be5bd1094'
      }
    });
  </script>
</body>
</html>

v-bind语法糖

简写方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind语法糖</title>
</head>
<body>
  <div id="app">
    <a :href="href"><img :src="imgUrl" alt=""></a>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://pic.downk.cc/item/5e9ab3d4c2a9a83be5a462c1.jpg',
        href: 'https://www.superbed.cn/info/5e9ab3d4c2a9a83be5a462c1'
      }
    });
  </script>
</body>
</html>

v-bind绑定class属性（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
  <style>
    /* class选择器 */
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <p><span class="title" :class="{active: isActive, line: isLine}">{{message}}</span></p>
    <button v-on:click="click">点击</button>
    <!--<button @click="click">点击</button>-->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        isActive: true,
        isLine: true
      },
      methods: {
        click: function () {
          this.isActive = !this.isActive;
        }
      }
    });
  </script>
</body>
</html>

绑定的数据对象不必内联在模板里。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <span :class="classObject"></span>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          line: true
        }
      }
    });
  </script>
</body>
</html>

v-bind绑定class属性（数组语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span class="title" :class="['active', line]">{{message}}</span></p>
    <!-- 数组中不带单引号的，是要读取data域中的值，带单引号的是字符串 -->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        line: 'line'
      }
    });
  </script>
</body>
</html>

作业：初始index=0的元素显示红色，然后点击哪个元素，哪个元素就显示红色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind和v-for的结合</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <ol>
      <li :class="{active: currentIndex === index}" @click="click(index)" v-for="(item, index) in movies">{{item}}</li>
    </ol>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['星际穿越', '火影忍者', '进击的巨人', '九品芝麻官'],
        currentIndex: 0
      },
      methods: {
        click: function (index) {
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>
</html>

v-bind绑定style（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span :style="{fontSize: fontSize, color: color}">{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        fontSize: '50px',
        color: 'red'
      }
    });
  </script>
</body>
</html>

00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖） - 文章图片

v-bind绑定style（数组语法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span :style="[baseStyle1, baseStyle2]">{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        baseStyle1: {color: 'red'},
        baseStyle2: {fontSize: '50px'}
      }
    });
  </script>
</body>
</html>

内容总结

以上是互联网集市为您收集整理的00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖）全部内容，希望文章能够帮你解决00、Vue概述、HelloWorld程序、Mustache语法、v-html、v-on:click、v-for、v-bind动态绑定属性、v-bind语法糖）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/627298.html

来源：【匿名】