【VUE】

马丁·路德银

已于 2022-04-14 17:29:36 修改

阅读量517

点赞数

分类专栏： GUI开发文章标签： javascript

于 2022-04-14 16:58:51 首次发布

本文链接：https://blog.csdn.net/weixin_44304929/article/details/124175995

版权

GUI开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

根窗口

index.html文件

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>VUE</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

定义根窗口App.vue

<template>
  <div>Coffee</div>
</template>

<script>

</script>

把根窗口挂载到<div id="app"></div>

import { createApp } from 'vue'
import App from './App.vue'//根窗口

createApp(App).mount('#app')

自定义控件

通过{{}}绑定属性，通过v-on:<事件>="函数名"把事件和处理函数绑定。

<template>
    <button v-on:click="clicked">{{Coffee}}</button>
    <button>buttonText</button>
</template>

<script>
export default {
    name:"TwoButton",
    data: function(){
        return {
            Coffee: "white Coffee"
        }
    },
    methods:{
        clicked: function(){
            console.log("this is button");
        }
    }
}
</script>

使用自定义控件，需要先通过components注册，再使用。

<template>
  <div class="home">
    <TwoButton/>
  </div>
</template>

<script>
import TwoButton from 'TwoButton.vue'

export default {
  name: 'Home',
  components: {
    TwoButton
  }
}
</script>