【VUE】一 vue初体验

春天的菠菜

已于 2023-02-27 17:11:34 修改

阅读量169

点赞数

分类专栏： VUE 文章标签： ui

于 2023-02-27 17:10:10 首次发布

本文链接：https://blog.csdn.net/legend818/article/details/129236120

版权

VUE 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一、引用VUE

1、下载到本地引用

2、cdn方式

# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
#生产环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

二、初体验

1、编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>vue初识</h1>
    <div>"我叫{{name}},我的微信账号是{{wechat}}"</div>
    <input type="button" value="点我看真身" v-on:click="clickMe">
</div>
<script>
    var app= new Vue({
            el:'#app',
            data: {
                name:"菠菜",
                wechat:"bocai"
            },
            methods:{
                clickMe:function () {
                    this.name="春天的菠菜";
                        this.wechat="springbocai";
                }
            }
        })
</script>
</body>
</html>