Vue入门基础语法

阿柒r7
168 阅读2分钟

1.代码规范

缩进一般为4个空格，前端一般情况下缩进两个空格，不同的公司不一样，超过50%的公司的缩进规定是两个空格。故本文及之后的代码缩进都用2个空格。

其他地方可以参考CLI 中editconfig 也是2个空格。

2.WebStorm中Vue模板的设置

下图是模板的一个例子：

image-20210510160332146

image-20210510160355050

3.mustache的简单语法

3.1.mustache语法可以实现简单的文字和数字呈现，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{firstName+lastName}}</h2>
    // mustache语法语句长度过长时也可以用options中的computed来实现
    <h2>{{firstName+' '+lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!',
            firstName: 'Kobe',
        lastName: 'Bryant',
        counter: 100
        }
    })
  </script>
</body>
</html>

3.2.v-once指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
<!--    v-once指令用于应对这样需求：在服务器端更改数据或者控制台更改页面响应内容时，对应的DOM不会跟随改变，也就是非响应模式-->
    <h2 v-once>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!'
        }
    })
  </script>
</body>
</html>

对应效果图和console操作显示：

img

3.3.v-html指令

全部代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{url}}</h2>
    <h2 v-html = "url">{{}}</h2>
  </div>
  
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!',
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
  </script>
</body>
</html>

对应效果图：

img

3.4.v-text指令

全部代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}} I am  Wei Chun.</h2>
<!--    div中的内容会被message所覆盖-->
    <h2 v-text="message"> I am  Wei Chun.</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!'
        }
    })
  </script>
</body>
</html>

img

3.5.v-pre指令

全部代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
<!--    原封不动的显示元素中的内容-->
    <h2 v-pre>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!'
        }
    })
  </script>
</body>
</html>

img

3.6.v-cloak指令

在没有style演示控制和v-cloak指令修饰之前，在页面显示之初，会呈现出mustache原始标签，在延时之后才会显示出要显示的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<!--  -->
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    // 在vue解析之前，div中有一个属性v-cloak
    // 在vue解析之后，div中没有一个属性v-cloak
    // 掩饰显示内容，但是不会显示原mustache语法标签，达到用户显示友好的目的，但几乎不常用
    setTimeout(function(){
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, world!'
        }
      })
    }, 1000)
  </script>
</body>
</html>

3.7.v-bind指令

前面学的指令主要作用是将值插入到我们模板的内容当中。

但是除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如：

① 动态绑定a元素的href属性；

② 动态绑定img元素的src属性。

这时，可以使用v-bind指令↓

作用：动态绑定属性

缩写：:

预期：any（with argument) | Object(without argument)

参数：attrOrProp(optional)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--    mustache语法是直接使用在标签内部的（content），不能放在图片源-->
<!--    <img src="{{message}}" alt="">-->
<!--    这个做法同上面mustache语法的错误用法没有本质区别-->
<!--    <img src="imgURL" alt="">-->
<!--    动态绑定图片源：当图片源改变的时候，浏览器端也会自动更改-->
    <img v-bind:src="imageURL" alt="">
    <img :src="imageURL" alt="">
    <a v-bind:href="aHref">百度一下</a>
<!--    v-bind的语法糖-->
    <a :href="aHref">百度两下</a>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!',
            imageURL: 'https://img14.360buyimg.com/img/s100x100_jfs/t1/165712/18/9083/56369/603f3fa7E94c2bc8e/063831e5edec7f4d.jpg!cc_100x100.webp',
        aHref: 'http://www.baidu.com',
        }
    })
  </script>
</body>
</html>

img

3.7.1.v-bind动态绑定class(1)

通过鼠标监听事件监听鼠标点击，并执行动作。

前端常会用到鼠标点击切换某一个按钮或者div的样式显示，例如：

某个元素标签有一个默认样式，当点击时切换到指定给的样式，再次点击时样式回复默认，如此反复切换。

绑定class有两种方式：① 对象语法；② 数组语法

对象语法：class后面跟的是一个对象。

对象语法有以下几种常见的用法：

用法①：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法②：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法③：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法④：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

对象语法的综合使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: #ff0000;
    }
  </style>
</head>
<body>
  <div id="app">
<!--    <h2 class="active">{{message}}</h2>-->
<!--    <h2 :class="active">{{message}}</h2>-->
<!--    {}代表的是对象，不是mustache语法-->
<!--    通过控制true和false来控制标签的active属性的添加（true）和移除（false）-->
<!--    <h2 :class="{类名1: true, 类名2: false}">{{message}}</h2>-->
<!--    下面这种情况并不会将属性覆盖掉，而是合并共存-->
    <h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
<!--    函数的调用实际上应该带小括号的，e.g.leftBtnClick()-->
    <h2 class="title" :class="getClasses()">{{message}}</h2>
    <button @click="leftBtnClick">change color</button>
    <button @click="rightBtnClick">change property</button>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!',
        isActive: 'true',
        isLine: 'true',
        },
      methods: {
        leftBtnClick: function () {
          this.isActive = !this.isActive
        },
        rightBtnClick: function () {
          this.isLine = !this.isLine
        },
        getClasses: function () {
          return {active: this.isActive, line: this.isLine}
        }
      }
    })
  </script>
</body>
</html>

img

img

img

3.7.2.v-bind绑定class(2)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--    单引号将会被当做字符串去解析,不带单引号则作为变量去解析-->
    <h2 class="title" :class="['active', 'line']">{{message}}</h2>
    <h2 class="title" :class="[active, line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, world!',
        active: 'aaa',
        line: 'lll',
        },
        methods: {
        getClasses: function () {
          return [this.active, this.line]
        }
      },
    })
  </script>
</body>
</html>

img

avatar
文章
阅读
粉丝