Vue基础-用vue写helloWord_vue写一个hello world

作者：我家自动化 | 2024-06-13 05:22:28

踩

vue写一个hello world

Vue基础

1.vue.js的引入

1.使用cdn在线获取vue.js(需要网络)

借助 script 标签直接通过 CDN 来使用 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2.先下载再将离线vue.js引入项目中

找到上图中的位置,复制src的网址,重新打开一个页面,访问刚刚复制的网址

在上面的页面鼠标右键,选择"另存为"保存vue.js

2.用vue完成helloWord的程序

1.创建html页面在js包中导入vue.js

2.通过src标签引入vue.js文件

3.效果图如下：

4.加入button 点击button将msg的值改成哈哈

创建修改msg的函数

methods:{
                changeMsg(){
                    this.msg="哈哈"
                }
            }

在button中调用@click方法 <button @click="changeMsg">按钮</button>

效果如下

5.代码展示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>   <!--使用{{}}来获取Vue中data的数据 -->
    	<button @click="changeMsg">按钮</button>      <!--修改按钮的值-->
    </div>  
    <script>
        const { createApp } = Vue
        createApp({
            data() {  //data: 表示需要展示的数据
                return {  
                    msg: "hello word"
                }
            },
            methods:{
                changeMsg(){
                    this.msg="哈哈"
                }
            }
        }).mount('#app') //指明数据展示在哪个view里面 挂载点
    </script>
</body>
</html>

3.vue知识点总结

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

数据驱动: 自动追踪依赖的模板表达式和计算属性。

组件化：用解耦、可复用的组件来构造界面。

轻量：~33.46KB min+gzip，无依赖。

快速:精确有效的异步批量 DOM 更新。

模块友好: 通过 NPM 或 Bower 安装，无缝融入你的工作流。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】