VUE入门-基础（helloword）_vue vscode helloworld

作者：小小林熬夜学编程 | 2024-06-13 05:19:10

踩

vue vscode helloworld

1.安装Vscode编辑器

参考（Vue入门+Vscode）

2.安装相关插件

参考（Code Runner运行代码Vue入门+Vscode）

3.编写代码

3.1资源下载vue.js

下载地址(https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js)

3.2源码示例（helloword.html）

vscode 创建已.html结尾的文件，输入'!' 按 'Tab'键自动生成html模板


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>helloword</title>
</head>
<body>
 
    <div id="app">
        <!-- 界面模板-->
        <!-- mustache 语法 -->
        <h1>{{title}}</h1>
    </div>
 
    <script src="./vue.min.js"></script>
 
    <script>
        var newVue = new Vue({
            //css选择器
            el:"#app", 
            data:{  
                title:"hello vue,hello word",
            },
        })
        // newVue.$mount("#app");
    </script>
</body>
</html>

3.3运行文件

右键helloword.html "open with live server"或者Alt + L O

3.4运行结果如下

4.代码解析

4.1引入vue.js

4.2编写页面模板

4.3编写vue对象

var newVue = new Vue({}）

4.4挂载（模板Vue对象关联）

el:"#app", 或者 newVue.$mount("#app");

4.5编写vue对象属性

data:{title:"hello vue,hello word",},

4.6页面模板使用vue属性

<h1>{{title}}</h1>

初学小白，如描述有误望大家见谅帮忙指正 3Q 一起学习一起进步

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/711028