Vue入门

<!DOCTYPE html>

<html lang="en"> 

   <head>

         <meta charset="UTF-8">

         <title>example</title>

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

   </head>

   <body>

         <div id="root">

                <input  v-model="firstName"/>    //输入框 ，v-model实现firstName的双向绑定

                 <input v-model="lastName"/>   

                 <div  v-text="fullName"></div>  //v-html="funllName"  输出fullName

                 <div  v-bind:title="this is count">{{count}}</div>   //title: 鼠标点击hint

                  <ul><li v-for="(item,index) of myArr" :key="index">{{item}}</li></ul>   //v-for：循环集合 myArr，得到每一项item

                 <button v-on:click="clickHandle">clickMe</button>   //click事件绑定

                  <div  v-show="show">this info could hid</div>  // v-if 是删除html,v-show仅仅是用display:none.

          </div>

          <script>

                new Vue({    //初始化 vue实例

                     el:"#root",   //el:对应元素ID

                    // template: '',  //元素的显示模板

                     data:{     //实例的数据

                           firstName:'',

                           lastName:'',

                           count:0,

                            show = true;

                            myArr:[1,2,3]

                      },

                      computed:{   //计算字段

                             fullName: function(){

                                   return this.firstName+' '+ this.lastName;

                              }

                      }

                      methods:{   //事件函数

                             clickHandle: function(){

                                   this.show = ! this.show;

                             }

                      },

                      watch:{   //变量changed绑定的函数

                            firstName: function(){

                                  this.count ++;

                             }

                            lastName: function(){

                                 this.count++;

                            }

                      }

                })

          </script>

   </body>

</html>