【前端Vue学习系列】二、Vue基础篇

最新推荐文章于 2024-05-24 02:08:26 发布

Java升级之路

最新推荐文章于 2024-05-24 02:08:26 发布

阅读量195

点赞数

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

本文链接：https://blog.csdn.net/qq_30859353/article/details/119598457

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

系列文章目录

【前端Vue学习系列】一、初识Vue

文章目录

系列文章目录
前言
一、Vue项目的目录结构
二、基本语法
总结

前言

上篇文章带大家认识了Vue，以及初始化了一个Vue工程的项目。今天继续介绍一下Vue的一些基础用法。

一、Vue项目的目录结构

使用开发工具（idea、webstorm、vscode…）打开Vue项目。由于后端用idea的比较多，这里以idea为例（需要安装Vue.js插件）,打开后目录结构如下：
在这里插入图片描述
如上图所示，Vue的目录结构主要由以下部分组成：

my-vue-project
    ├--- build
    ├--- config
    ├--- node_modules
    └--- src
         ├--- assets
         └--- components
         ├--- router
         └--- App.vue
         ├--- main.js
    ├--- static
    └--- package.json

build ：构建相关，用来存放项目构建脚本，对项目进行编译打包
config ：配置相关，用来存放基本的配置文件
node_modules ：用来存放的是项目的所有依赖
src ：存放项目的源码
assets ：主题字体等静态资源
components ：全局公用组件
router ：路由
App.vue ：入口页面
main.js ：入口加载组件初始化等
static ：第三方不打包资源
package.json ：定义了项目的所有依赖，包括开发时依赖和发布时依赖

二、基本语法

1.基本数据渲染和指令

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

代码如下：

<template>
  <div class="hello">
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据-->
    <h1 v-bind:title="message">
      {{content}}
    </h1>

    <!-- v-bind 指令的简写形式： 冒号（:） -->
    <h1 :title="message">
      {{content}}
    </h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content: '我是标题',
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  }
}
</script>

运行项目，浏览器打开地址，可看到页面正常渲染出来数据。
在这里插入图片描述

2.双向数据绑定

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定：

 <template>
  <div class="hello">
	...
		
    !-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="searchMap.keyWord">

    <!-- v-model 可以进行双向的数据绑定  -->
    <input type="text" v-model="searchMap.keyWord">

    <p>您要查询的是：{{searchMap.keyWord}}</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      searchMap: {
        keyWord: '希留'
      }
    }
  }
}
</script>

使用v-bind绑定的数据是单向的，并不会随着输入值的改变而改变
在这里插入图片描述
使用 v-model 指令才能把数据双向绑定

3.修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()方法
(即阻止事件原本的默认行为)

示例代码如下：

<template>
  <div class="hello">
	...
		
    <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()方法
     （该方法表示阻止表单提交的默认行为） -->
    <form action="save" v-on:submit.prevent="onSubmit">
      <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
      </label>
    </form>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      user: {}
    }
  },
  methods: {
    onSubmit() {
      if (this.user.username) {
        console.log('提交表单')
      } else {
        alert('请输入用户名')
      }
    }
  }
}
</script>

当在方法上加了.preven修饰符后，点击保存只会执行onSubmit方法。若没加，则会先执行onSubmit方法在执行action里的方法。
在这里插入图片描述

4.缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写，它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

5.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以Vue提供了计算属性。对于任何复杂逻辑，你都应当使用计算属性。且计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
示例代码如下：

<template>
  <div class="hello">
	...
	<p>原始值: "{{ message }}"</p>
    <!-- 1、插值数据绑定中使用表达式 -->
    <p>反转消息: {{ message.split('').reverse().join('') }}</p>
    <!-- 2、使用计算属性 -->
    <p>反转消息: "{{ reversedMessage }}"</p>
  </div>
</template>
  

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自来水来自海上 haha'
    }
  },
  computed: {
      reversedMessage () {
          return this.message.split('').reverse().join('')
      }
  }
}
</script>

在这里插入图片描述

6.侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
示例代码如下：

<template>
  <div class="hello">
	...
	<p>
      Ask a yes/no question:
      <input v-model="question">
      <button @click="getAnswer()">提问</button>
    </p>
    <p>{{ answer }}</p>
  </div>
</template>
  

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      message: '上海自来水来自海上 haha'
    }
  },
  methods: {

    getAnswer() {
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = '网找不到API接口. ' + error
        })
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = '等待您停止输入...'
      this.getAnswer()
    }
  }
}
</script>

在这里插入图片描述

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

7.条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if 是一个指令，所以必须将它添加到一个元素上。v-else-if，充当 v-if 的“else-if 块”，可以连续使用；
v-else 指令来表示 v-if 的“else 块”，必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。v-show 不支持元素，也不支持 v-else。

两者对比：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8.列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute，建议尽可能在使用 v-for 时提供 key attribute，因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。
示例代码如下：

<!-- 1、遍历数据列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
      ]
    }
  },

}
</script>

在这里插入图片描述

9.过滤器

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

```javascript
<!-- 1、遍历数据列表 -->
    <table border="1">   
      <tr v-for="(item, index) in userList" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
        <!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
        <td>{{item.gender | genderFilter}}</td>
      </tr>
    </table>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      ...
      userList: [
        { id: 1, username: 'helen', age: 18 ,gender: 1},
        { id: 2, username: 'peter', age: 28 ,gender: 1},
        { id: 3, username: 'andy', age: 38 ,gender: 0}
      ]
    }
  },
  // filters 定义局部过滤器，只可以在当前vue实例中使用
  filters: {
      genderFilter(gender) {
        return gender === 1 ? '男' : '女'
      }
  }
}
</script>

在这里插入图片描述

总结

以上就是今天要讲的内容，本文简单介绍了Vue的基础使用，相信大家对Vue有了进一步的认识了，赶快动手操作起来，gogogo。
感谢大家的阅读，如有不足之处，还请多多指教；

Java升级之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【前端Vue学习系列】二、Vue基础篇

系列文章目录【前端Vue学习系列】一、初识Vue文章目录系列文章目录前言一、Vue项目的目录结构二、基本语法1.基本数据渲染和指令2.双向数据绑定3.修饰符4.缩写5.计算属性6.侦听属性7.条件渲染8.列表渲染9.过滤器总结前言上篇文章带大家认识了Vue，以及初始化了一个Vue工程的项目。今天继续介绍一下Vue的一些基础用法。一、Vue项目的目录结构使用开发工具（idea、webstorm、vscode…）打开Vue项目。由于后端用idea的比较多，这里以idea为例（需要安装Vue.
复制链接

扫一扫