@click与v-model的区别，model是双向绑定

我写的错误的代码

<!DOCTYPE html>
<html>
<head>
    <div>
        <title>如如</title>
        <input @click = "HelloWorld" type="text" />
    </div>
</head>
<body>
    <script>
       export default {
           
       }
    </script>
</body>
</html><!DOCTYPE html>
<html>
<head>
    <div>
        <title>如如</title>
        <input @click = "HelloWorld" type="text" />
    </div>
</head>
<body>
    <script>
       export default {
           
       }
    </script>
</body>
</html>

第二次思考

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
    <div id = app>
        <input type="text" v-model = "HelloWorld" />
       <p> {{ message }} </p> 
    </div>
</head>
<body>
    <script src="vue.js" type = "text/Javascript"></script>
    <script>
       new vue {
           name: app;
           :message
       }   
       
    </script>
</body>
</html>

抄了书，显示不出来，是版本问题，
cnpm install vue 和vue2，都不行

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
    <div id = app>
        <input type="text" v-model = "HelloWorld">
       <p> {{ message }} </p> 
    </div>
</head>
<body>
    <script type = "text/javascript">
       var vm = new vue({
           el: '#app',
           data:{
            message:'Hello Vue'
           }
       });       
    </script>
</body>
</html>

改一下版本问题吧
自己写的，有bug

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
    <div id = app>
        <input type="text" v-model = "HelloWorld">
       <p> {{ message }} </p> 
    </div>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        export default {
            name: 
            data:{
            message:'Hello Vue'
           },
        },
    </script>
    vue.createApp.mount(#app)
</body>
</html>

还是不行

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
    <div id = app>
        <input type="text" v-model = "HelloWorld">
       <p> {{ message }} </p> 
    </div>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        export default {
            name: 
            data:{
            message:'Hello Vue';
           },
        },
    </script>
    Vue.createApp(message).mount('#app')
</body>
</html>

我的天啊，这样就可以了，刚才是怎么不可以呢，vue2，是引用的版本地址不对吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    /*属性选择器*/
	[v-cloak]{
		display:none;
	}
</style>
</head>
<body>
<div id="app" >
    <input type="text" v-model ="message">
 <!--解决插值闪烁-->
  <p v-cloak>{{ message }}</p>
</div>
<!--一般情况下面，要把这个放在页面下面加载防止页面加载慢，但是上面的{{message可能显示出来不好看，所有在上面的p标签加入v-cloak表示页面加载完成再显示}}-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

终于好啦！new vue的vue没有大写，应该是new Vue

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
</head>
    <body>
    <div id = "app">
        <input type="text" v-model = "message">
       <p> {{ message }} </p> 
    </div>


    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
       new Vue({
           el: '#app',
           data:{
            message:'hello, hamimelon!'
           }
       })
    </script>
</body>
</html>

vue3应该怎么改呢？还不知道

vue3这样为什么不对

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
</head>
    <body>
    <div id = "app">
        <input type="text" v-model = "message">
       <p> {{ message }} </p> 
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
      createApp({
          data() {
            return {
              message: 'Hello, World'
            }
          }
        }).mount('#app')
      </script>
</body>
</html>

这样也不对

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
</head>
    <body>
    <div id = "app">
        <input type="text" v-model = "message">
       <p> {{ message }} </p> 
    </div>


    <script>
        import { createApp } from 'vue'
      
        createApp({
          data() {
            return {
              message: 'Hello, World'
            }
          }
        }).mount('#app')
      </script>

    
</body>
</html>

怎么改？

最后居然改对了啊，！！

<!DOCTYPE html>
<html>
<head>
    <title>如如</title>
</head>
    <body>
    <div id = "app">
        <input type="text" v-model = "message">
       <p> {{ message }} </p> 
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp({
          data() {
            return {
              message: 'Hello, World'
            }
          }
        }).mount('#app')
      </script>
</body>
</html>