组合代码,把div和vue代码拼起来在浏览器中显示

第一次思考:
是不是没有引用vue

<html>
    <head>
       <title>问问</title>
    </head>
    <body>

    
<div id="event-with-method">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">Greet</button>
</div>
<scrpit>
Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        name: 'Vue.js'
      }
    },
    methods: {
    
    
      greet(event) {
    
    
        // `methods` 内部的 `this` 指向当前活动实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM event
        if (event) {
    
    
          alert(event.target.tagName)
        }
      }
    }
  }).mount('#event-with-method')
  </scrpit>
  </body>
  </html>

第二次思考:
引用了也好像不行,不好使
为什么不好使呢
是需要安装vue吗?

<html>
    <head>
       <title>问问</title>
    </head>
    <body>

    
<div id="event-with-method">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">Greet</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<scrpit>
  Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        name: 'Vue.js'
      }
    },
    methods: {
    
    
      greet(event) {
    
    
        // `methods` 内部的 `this` 指向当前活动实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM event
        if (event) {
    
    
          alert(event.target.tagName)
        }
      }
    }
  }).mount('#event-with-method')
  </scrpit>
  </body>
  </html>

猜你喜欢

转载自blog.csdn.net/weixin_40945354/article/details/115296843
今日推荐