提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Vue框架快速入门

2023-02-18 15:29:20 时间

Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前，最好先学习一下这些知识。由于Vue的中文文档比较完善，所以这里只介绍Vue框架的一些核心概念，详细的使用方法还得查看官方文档。


Vue的中文文档可以查看https://cn.vuejs.org/v2/guide/installation.html 。


Vue路由功能需要导入vue-router，它的中文文档可以查看https://router.vuejs.org/zh-cn/ 。


Vue的状态管理功能需要使用vuex，它的中文文档可以查看https://vuex.vuejs.org/zh-cn/ 。


如果需要更多Vue资料，可以查看awesome-vue，列举了很多Vue资源。


Vue基本概念

从单文件开始

首先，我们来抛开那些复杂的框架配置，先从单文件开始学习Vue最基本的内容。这样做很简单，讲下面的代码复制为一个HTML文件，在浏览器中打开即可。这里引用了Vue框架的CDN，所以不需要任何配置即可使用Vue。


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Vue单文件例子</title>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

Vue实例

Vue框架中最重要的东西就是Vue实例了，它是Vue框架的核心对象。在创建Vue实例的时候需要传入一些参数，el参数是Vue实例的作用范围；data参数是Vue实例使用的数据。在Vue实例对应的元素中，我们可以使用模板语法{{var}}来使用这些数据。


<h1>Vue实例</h1>

<div id="s1">

  <p>{{data}}</p>

</div>

<script>

  let vm1 = new Vue({

    el: '#s1',

    data: {

      data: '一些数据'

    }

  })

</script>

1

2

3

4

5

6

7

8

9

10

11

12

模板语法

文本插值

上面已经展示了一个小例子。文本需要写在两对花括号之间。当然这里其实不止可以写单个变量，还可以写组合表达式，例如{{text + new Date()}}。


所有在构造Vue实例是传入的数据都是可响应的，也就是说只要数据发生改变，那么视图的数据也会发生改变。如果希望数据不发生改变，需要使用v-once指令。所有v-开头的都是Vue独有的指令，这些指令将在后面介绍。


HTML插值

有时候需要操作原始HTML，Vue也提供了支持。要插入的HTML代码需要使用v-html指令来指定，这个指令会将它所在的HTML代码块整个替换为要插入的HTML块。由于可能导致XSS攻击，所以最好不要随便替换HTML块。另外要替换HTML块的话只能使用v-html指令，如果使用前面的文本插值的话，插入的只是一段文本。

————————————————

版权声明：本文为CSDN博主「乐百川」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u011054333/article/details/78256169


相关文章