vue的学习--day1

a-626

已于 2024-07-25 14:02:51 修改

阅读量879

点赞数 29

分类专栏：实训学习文章标签：学习

于 2024-07-15 20:45:36 首次发布

本文链接：https://blog.csdn.net/m0_62263513/article/details/139983257

版权

实训学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、软件的安装

首先，安装vscode,这个安装好像没有什么需要注意的点，如果不放心的话就网上找个博客，跟着步骤安装即可。

安装完成之后，在组件（下图）中安装相应的插件。首先建议英文和我一样不好的，安装一个汉化插件。

搜索chinese,下载第一个即可：

然后我们要写的是vue，所以需要下载相关的插件，如下图：

导入vue.js:

然后尝试跑通一个代码，这个代码就以官网中的内容进行尝试：

再下载Live Server（为了能够直接在浏览器中查看到修改的结果）：

然后就可以开始学习相应的语法了。

二、使用软件运行一个简单的代码

首先，打开vscode,然后新建一个超文本标记语言文件，即后缀名为.html或者.htm都为html格式的文件。例如：demo.html。

新建之后输入一个英文输入法的感叹号（!）然后回车就可以可以自动生成一个框架，我们后续的代码在这个基础上添加即可。

我们要使用vue可以通过 CDN 使用 Vue，在引用的时候将下面这个路径引用到代码中，就可以使用vue了。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

但是对于这个方法，每次使用的时候都需要联网访问，所以还有一种方法就是将这里面的内容复制到一个新的.js文件中，例如，我新建的是vue.js：

这里面的内容可以自己去上面那个网站去复制，如果不想去的话就每次联网操作吧。因为里面的内容太多了，无法一次性复制到这里。

unpkg.com/vue@3.4.31/dist/vue.global.js

在引用的时候，就直接写：

配置好这个之后，就写一个简单的代码，让程序可以跑起来。

参考这个快速上手的代码就可以：

快速上手 | Vue.js (vuejs.org)

参考代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
//上面的这个引用了vue.js就不用写这个了。


<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>


    <script>
        const { createApp, ref } = Vue
        
        createApp({
            setup() {
            const message = ref('Hello vue!')
            return {
                message
            }
            }
        }).mount('#app')
        </script>
    
</body>
</html>

在运行的时候右击，然后选择下图中的那个操作就可以在浏览器上显示内容，通过刷新还可以实时更新内容。

最终结果：

测试是否能直接修改现实的内容，例如将内容修改为”Hello 北京！“，然后刷新浏览器页面，可以看到也跟着改变了。

三、基础学习

简介 | Vue.js (vuejs.org)

事件绑定

v-on:click="handler" 或 @click="handler"

其中，v-on表操作，click是事件名称

双向绑定

v-model

四、易错点

新建html中使用vue需要注意的点：

1、首先，需要借助 script 标签直接通过 CDN 来使用 Vue：

```
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
但是，使用这个方法的话，就需要每次都连接网络再使用，所以，还有另一种不需要联网的方式，就是新建一个.js文件，将这个网站中的内容全部复制进去，然后在引用的时候直接引用该文件即可。
```
<script src="vue.js"></script>
```
2、不要出现类型对应错误，比如名字name，如果不写单引号，就会出错，导致其他正常的内容也无法显示。
3、里面写的符号都是英文状态下的，如果用中文状态下的符号也会出错。
4、要将编辑的内容当到app中，如果放在外面也不能正常显示