【Vue.javascript】一、Vue介绍和安装如何使用

发布时间：2024-11-25 23:32:01 来源：网络

.

百度百科中对Vue的解释如下： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的

百度百科中对Vue的解释如下：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

注意：下面的内容需要有html、css、js的基础。

官网地址：https://cn.vuejs.org/（里面带有视频讲解，可以看看）如图：

Vue的使用

首先点击安装按钮

直接用script标签引入

1. 下载js文件并在项目里引入

这里要注意：开发的时候要引入开发版本，生产版本会少了很多提示。点击开发版本按钮后，会提示现在一个js文件，如图：

2. CDN的方式

按照网站上的提示直接在html页面通过引入script标签的方式引入即可。如图：

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

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

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue学习</title>
<!--这里使用CDN的方式引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<!--这个效果的显示主要是分为两步：
1. 给div指定id，并在下面的js中通过el来绑定这个id，也叫做挂载点
2. 通过两个花括号的方式引入挂载vue对象中的msg的内容
-->
<div id="testvue">{{msg}}</div>

<script type="text/javascript">
    new Vue({
        el:"#testvue",
        data:{
            msg:"你好"
        }
    })
</script>

</body>
</html>