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

时间：2020-07-18 11:23:07 阅读：78 评论：0 收藏：0 [点我收藏+]

Vue的概述和HelloWorld的使用
- Vue安装和使用的方式
- Vue的HelloWorld程序
模板语法
- 插值操作
- v-bind指令的使用

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>

v-for展示数据列表

<!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简写的方式。

模板语法

插值操作

文本

数据绑定最常见的形式就是使用“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>

技术图片

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>

技术图片

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: ‘https://pic.downk.cc/item/5e9bd9c5c2a9a83be5bd1094.jpg‘,
        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>

技术图片

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语法糖）

标签：function 目录字符串绑定 es6 声明 movies 点击开发

原文地址：https://www.cnblogs.com/shawnyue-08/p/12731729.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行