Vue3.js简单应用学习

easyboot

已于 2022-05-13 13:47:00 修改

阅读量255

点赞数

分类专栏： # Vue.js 文章标签： vue.js elementui javascript

于 2022-05-12 23:00:30 首次发布

本文链接：https://blog.csdn.net/easyboot/article/details/124742171

版权

Vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.最新的Vue.js 获取地址

<script src="https://unpkg.com/vue@3"></script>

2.简单的Vue.js测试

<!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>
</head>
<body>
    <div id="app">

    </div>
   <template id="testtl">
       <h1>{{message}}</h1>  
       <h1>{{counter}}</h1>
       <!-- <button @click="increment">+</button>
       <button @click="decrement">-</button> -->
       <button v-on:click ="increment">+</button>
       <button v-on:click ="decrement">-</button>
   </template>

    <script src="js/vue.js"></script>

    <script>
        const App = 
        {
            template:'#testtl',
            data:function(){
                return{
                    message:'hello word ',
                    counter:0
                }
            },
            methods:{
                increment(){
                    this.counter++;
                },
                decrement(){
                    this.counter--;
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

easyboot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3.js简单应用学习

1.最新的Vue.js 获取地址<script src="https://unpkg.com/vue@3"></script>2.简单的Vue.js测试<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..
复制链接

扫一扫