VUE基础语法

戒烟失败的老可爱

已于 2022-05-03 16:58:07 修改

阅读量531

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-03 16:57:21 首次发布

本文链接：https://blog.csdn.net/qq_40749255/article/details/124557759

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VUE基础语法

前言

vue的语法与JavaScript的语法没有什么太大的区别，总体来说还是基于基础的JavaScript语法，只不过多了一些更加方便、高效的写法。

在开始阅读本篇笔记之前，请先将vue的基础模板加载到WebStorm中。基础模板文件如下：

<div id="app">
  {{message}}
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>

将模板载入标识设置为：vue

在这里插入图片描述

文章目录

VUE基础语法

基础语法说明

列表

在使用列表之前，需要先简单理解一个命令：v-for。这是一个代表着循环的命令操作，其本质上是迭代的方式来完成对一个列表（集合？数组？在不同的语言有不同的叫法，其本质上的区别与我们使用该命令没有冲突）。接下来使用v-for来说明列表：

<div id="app">
    <ul>
        <!--vue的列表展示-->
        <!-- {{}} 为 Mustache语法，使用该语法来接收值 -->
        <li v-for="item in names">{{item}}</li> <!-- v-for 表示遍历（迭代） -->
    </ul>
</div>

<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            /*向vue中添加一个列表元素*/
            names: ['Reman','Bob','ReLucy']
        }
    })
</script>

**【注】：**v-for命令的具体说明会放在后面进行说明，本段代码仅说明列表。

补充说明展示vue实例中数据对象值的语法；

Mustache语法展示的值包括但不限于以下内容：

表达式
字符串
函数
正则表达式
boolean

列表方法

在说明列表方法之前，需要使用到绑定事件的命令来说明（这样会方便一些）：

绑定事件命令 v-on：

该命令可以绑定多种事件，可以理解为曾经在JS中常用的事件都可以被v-on来绑定，用法如下：

<button v-on:click="fun()">
    被绑定的事件（单击、提交等）
</button>

从编程逻辑来讲，列表同样拥有CRUD操作，而这些CRUD操作由绑定的事件来操作的话就需要定义协议方法来操作数据：

<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['Reman','Bob','ReLucy']
        },
        methods: {
            fun(){
                console.log("该事件已经被监听“);
            }
        }
    })
</script>

**【注】：**补充说明methods：

methods意为方法，属于vue实例对象中的一个参数，从Java语言的角度来讲可以理解为类中定义的方法，执行一系列操作使用的。

methods中可以包含多个方法，同样也可以传递参数（后续说明）。

接下来介绍列表的方法：

    this.arrays.push: 向数组末尾加入一个元素；
    this.arrays.unshift： 向数组首部添加一个元素
    this.arrays.pop： 删除数组的最后一个元素
    this.arrays.shift： 删除数组的第一个元素
    this.arrays.splice: 该函数作用比较多，可以删除、插入、替换元素；
        第一个参数表示位置（数组下标），表示接下来的你选择的三种操作之一的开始位置。
        第二个参数
            在删除中表示： 从第一个参数位置开始要删除几个元素；如果是删除操作，第二个参数不填写，则表示从第             一个参数与的位置一直到最后一个参数与全部删除
            在替换中表示： 从第一个参数位置开始要替换几个元素；
            在插入中： 第二个参数要填写为  0  ，
        第三个参数
            在替换中要填写替换后的元素
            在插入中要填写需要插入的元素

    this.arrays.sort(): 排序函数
    this.arrays.reverse()：表示对数组翻转遍历
    ！！注意！！
    this.arrays[0]='123'
    通过索引来修改数组中的值的函数不是响应式的。

    通过vue的函数来修改数组：
    Vue.set(数组,索引值,修改后的值)

方法使用：

<div id="app">
    <!--vue的列表展示-->
    <ul>
        <li v-for="item in names">{{item}}</li> <!-- v-for 表示遍历（迭代） -->
    </ul>
    <button @click="addLast()">末尾添加元素</button>
    <button @click="addTop()">首部添加元素</button>
    <!-- 剩下的方法可以自己尝试测试 -->
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            /*向vue中添加一个列表元素*/
            names: ['Reman','Bob','ReLucy']
        },
        methods: {
            addLast(){
                // this表示当前对象，指的是当前的vue实例
                this.names.push('1')
            },
            addTop(){
                this.names.unshift('1');
            }
        }
    })
</script>

补充Mustache语法

该语法在使用的时候有很多比较便利的使用技巧，比如：字符串的拼接、数据的计算等，不过这些我们一般不会用在Mustache语法中，这些操作会用在vue实例中的方法和计算属性（计算属性后续会有说明）。

<div id="app">
    <!-- 字符串拼接 -->
  <h2>{{firstname + ' ' + secondname + ' ' + lastname}}</h2>
    <!-- 数据在显示的之前进行进行计算 -->
  <h2>{{number * 2}}</h2>
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstname: 'Reman',
      secondname: 'Bob',
      lastname: 'Lucy',
      number: 2
    }
  })
</script>

指令

vue提供了一系列指令的功能，方便前端开发，以下会说明常用的指令的基本使用：

v-for

这个指令在上面的列表中有过说明，这个指令的本质可以理解为迭代器的实现，开发时可以通过迭代得到相应的对象或者是属性。

<div id="app">
  <ul>
      <!-- 遍历得到数组中的每一个元素 -->
    <li v-for="item in names">{{item}}</li>
      <!-- 遍历得到数组中每一个元素的值和下标 -->
    <li v-for="(item,index) in names">{{index}}--{{item}}</li>
  </ul>
  <ul>
      <!-- 遍历得到对象数组中的每一个对象及其内部属性 -->
        <li v-for="f in fruits">{{f.name}}---{{f.price}}</li>
    </ul>
    <ul>
        <!-- 遍历得到对象数组中的每一个对象 -->
        <li v-for="f of fruits">{{f}}</li>
    </ul>
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['Reman','Bob','ReLucy'],
      fruits: [
          {
              name: 'apple',
              price: 12
          },
          {
              name: 'banana',
              price: 15
          }
      ]
    },
    methods: {
        
    }
  })
</script>

同时在v-for中可以对数组中的每一个元素添加key其功能为给每一个元素添加一个唯一的键，这样可以提高上面演示的数组的CRUD操作效率。

简单理解就是没有key的数组在插入数据的时候像线性表一样，需要对每一个受影响的元素进行位置移位；而添加了键的数组的顺序则是根据我们添加的key决定的，这个时候数组的排序是按照键来操作的，而键可以理解为链表的结构。

v-cloak

该指令的特性是在标记的元素上，直到关联实例编译结束之前都会一直保持v-cloak属性，这样的特性可以帮助我们防止因为页面中的数据响应不及时出现页面闪烁的情况。

<style>
    [v-cloak]{
        display: none;
    }
</style>
<div id = "app" v-cloak>
  <!-- 当数据响应不及时的时候，该代码块不会显示到页面中 -->
  {{message}}
</div>

v-html

该指令表示为将响应的数据按照html语法的格式解析后显示在页面中。

<div id="app">
  {{url}}
</div>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-pre

该指令表示为跳过编译阶段将标签内的内容原封不动的显示在页面中

<div id="app">
  <!-- 在页面中显示的是   {{url}}   -->
  <span v-pre>{{url}}</span>
</div>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-once

该指令表示的是标签内通过Mustache语法显示的数据只会被渲染一次，后期服务器响应的数据发生改变后，页面上显示的数据也不会改变。

v-on

该指令表示绑定事件，在前文中也表述过，现在来详细说明一下：

<!-- v-on 简写为 @ -->
<!-- 绑定简单的操作 -->
<button @click=‘number++’>
    数值加一
</button>
<!-- 绑定函数 -->
<button @click='say'>
    点击一下
</button>
<!-- 绑定函数并传递参数 -->
<button @click=‘add(2)’>
    数值加一
</button>
......
add(num){
  this.number += num;
}
<!-- 阻止某些行为 -->
  <!-- .stop阻止冒泡（阻止父级dom节点的事件被触发） -->
  <a @click.stop= "handle"> 跳转 </a>
  <!-- .prevent阻止默认行为（a不会触发跳转） -->
  <a @click.prevent="handle"> 跳转 </a>
<!-- 绑定按键 -->
  <!-- .enter回车键 -->
  <input @keyup.enter='submit'>
<!-- 自定义绑定按键 -->
<!-- 通过将键盘键码赋值给自定义变量名来操作 -->
Vue.config.keyCodes.qwe=65;
<!-- qwe在开发过程中代表A -->

v-bind

该指定表示动态绑定，简写为:：

使用该指令可以将服务器响应的数据动态的添加到页面中的一些属性、样式等代码中，这样可以实现模板开发。

<a :href="url">{{targ}}</a>

该指令还可以绑定前端样式，在绑定的前端样式中，将样式规定为键值对，key为样式名，value为布尔值，代表该样式是否生效。我们可以制作一个小小的实例来演示一下：

<div id="app" :class="getClasses()">
  <h2>{{message}}</h2>
  <button @click="btnClick()">点一下</button>

</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isColor: false,
      isFont: false
    },
    methods: {
      btnClick: function(){
        this.isColor = !this.isColor;
      },
      getClasses: function(){
        return {active: this.isColor, line: this.isFont}
      }
    }
  })
</script>

同样的，我们也可以使用方法返回对象，或者定义数组来实现对样式的操作，不过一般来说，很少有通过服务器将样式信息部署到页面上。不过这种动态绑定样式的操作可以快捷的操作整个页面的样式风格。具体如何使用可以自行测试，在此不做赘述。

v-if、v-else、v-else-if

该系列指令就是一套判定指令，我们可以通过判定条件来选择在页面中显示什么元素。

<div id="app">
    <div v-if="score>=90">
        优秀
    </div>
    <div v-else-if="score>=80&&score<90">
        良好
    </div>
    <div v-else-if="score>=70&&score<80">
        一般
    </div>
    <div v-else>
        较差
    </div>
</div>
<script>
    const vue = new Vue({
        el:"#app",
        data:{
            score:100
        }
    })
</script>

v-show

该指令与v-if指令很相似，同样也是通过判定条件来决定是否在页面中显示相应的元素，只不过v-show是修改标签的display属性，即显示或隐藏；v-if表示的是，如果判定结果为false，则不会将该标签加入到DOM树中。

v-model

该指令表示为双向绑定，具体体现为：服务器响应的数据会及时显示在页面，而在页面对于数据的修改也会及时的响应给vue实例

<div id="app">
  <input type="text" v-model="message" @keyup.enter="enterMessage">
  {{message}}
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>