vue杂谈--基本语法

    xiaoxiao2022-07-03  121

    创建vue实例 var app = new Vue

     vue绑定属性使用 v-bind   v-bind:href=" " 简写 :href=""  vue绑定事件使用v-on:click="";  简写 @click=""

      vue中的计算属性是把几个属性综合起来组成一个新的值,在界面上显示

       监听器主要是监听vue字段是指是否有变化

      

    <html> <head> <title>vue演示</title> <script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script> </head> <body> <div id="app"> {{ message }} count: {{ count }} <button type="button" v-on:click="show">Click Me!</button> <div> <a v-bind:href="url">bootcdn</a> </div <div> 计算属性 {{msgtotal}} </div> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', count:0, url:"https://www.bootcdn.cn", xingname:"zhang san" }, methods:{ show:function() { alert("hello ,click me"); this.count=this.count+1; } }, computed:{ msgtotal:function() { return this.xingname+this.message;//计算属性 } }, watch:{ xingname:function(newvalue,oldvalue) { console.log(newvalue);//改变后的值 console.log(oldvalue);//改变前的值 // alert("名称改变"); } } }) </script> </html>

     

    最新回复(0)