【vue-1】vue入门—创建一个vue应用

WXG1011

已于 2024-05-22 17:26:13 修改

阅读量338

点赞数 5

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

于 2024-05-21 16:36:03 首次发布

本文链接：https://blog.csdn.net/WXG1011/article/details/139094617

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近在闲暇时间想学习一下前端框架vue，主要参考以下两个学习资料。

官网快速上手 | Vue.js

b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili

一、创建一个vue3应用

<!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.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ msg }}
        <h1>{{web.title}}</h1>
        <h2>{{web.url}}</h2>
    </div>
    <script>
        const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){
                const web = reactive({
                    title:"开始学习vue啦",
                    url:"vue.com"
                })
                return{
                    msg:"sucess",
                    web
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

模块化开发

注：首先要安装Live Server插件。

导入js文件：

import {createApp, reactive} from './vue.esm-browser.js'

script添加类型：

<script type="module">

二、ref与reactive区别

1、存储类型不同

ref：用于存储单个基本类型的数据，如：数字、字符串等；

reactive：用于存储复杂数据类型，如：对象或数组等。

2、修改方式不同

ref修改方式：

# 导入
import {ref} from './vue.esm-browser.js'

# 定义常量
const number = ref(10)

# 修改
number.value = 20

reactive修改方式：

const web = reactive({
    title:"开始学习vue啦",
    url:"vue.com"
})
web.url = "hhahaha"

三、渲染数据v-text和v-html

插值方式：

<h3>{{web.title}}</h3>

v-text方式：

<h3 v-text="web.title"></h3>

v-html方式：

<h3 v-html="web.url"></h3>

完整示例代码：

<!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.global.js"></script> -->
    
</head>
<body>
    <div id="app">
        <h3>{{web.title}}</h3>
        <h3 v-text="web.title"></h3>
        <h3 v-html="web.url"></h3>
    </div>
    <script type="module">
        import {createApp, reactive} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){ 
                const web = reactive({
                    url:"<i style='color:blue'> www.vue.com</i>",
                    title:"学习vue"
                })
                
                return{
                    web     
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

另：<i>文本内容呈现斜体文本。

举例：

He named his car <i>The lightning</i>, because it was very fast.

运行结果：He named his car The lightning, because it was very fast.

WXG1011

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【vue-1】vue入门—创建一个vue应用

创建一个Vue3应用
复制链接

扫一扫

专栏目录