vue学习之基本用法

1. 前期准备

  • 安装vs code IDE,vs code 安装 插件 open in brower
  • 新建 vue-learning 文件夹
  • vs code IDE打开文件夹

2. 基本用法

  • 创建demo1.html文件,内容如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>
    <!-- 2. 声明 vue 控制 DOM 区域 -->
    <div id="app">{{ message }}</div>

    <script>
        // 3. 创建 vue 实例对象
        const {
            createApp,
            ref
        } = Vue

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


</html>
  • 右键,在默认浏览器打开,效果如下
    vue学习之基本用法_第1张图片

参考

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

你可能感兴趣的:(vue,vue.js,javascript,前端框架)