1.vue实例

作者: yaoyao妖妖 | 来源:发表于2018-07-06 13:53 被阅读21次

Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <!--引入/vue.js-->
    <script src="./vue.js"> </script>
</head>
<body>
   <div id="root">

       <!--当被点击的时候会自动到vue对应的 methods 中找 handleClick的方法-->
       <div v-on:click="handleClick">
           <!--{{}}会到vue中的data找message对应的部分来替换message显示-->
           {{message}}
       </div>

       <!--小组件的使用-->
       <item> </item>


   </div>

   <script>

       //全局的小组件,无需注册
       Vue.component('item',{
           template:'<div> hello </div>'
       })

       //app这个vue的实例会接管root这个
       // dom里面的内容,会分析<div id="root"> </div>这个dom里面所有的内容,并显示出来
       var app = new Vue({
           el:'#root',
           components:{ //将局部组件注册一下
           },
           data: {

               message:'hello world'
           },
           methods:{
               handleClick:function () {

               }
           }
       })

   </script>
</body>
</html>