import Vue from 'vue'
var globalVar ="123"
new Vue({
el:'#root',
template:
`<div
:id="aaa"
v-on:click="handleClick"
:style="[styles,style2]"
:class="{isActive?"active":"not active"}" //动态绑定状态
>
{{Data.now()}}
//<p>{{globalVar}}</p> //模板外面的值访问不到
<p>{{getJoinedArr}}</p>
<p v-html="html"></>
</div> `,
data:{
isActive:true,
arr:[1,2,3],
aaa:'main',
html:'<span>13</span>',
styes:{ color:'black',
appearance:'none' //vue中已经对万恶的浏览器兼容,做了处理
},
styes2:{
color:'red',
} },
methods:{
handleClcik(){
alert('123')
},
getJoinedArr (arr) { //通过方法对数据进行包装
return arr.join(' ')
}
}
})复制代码
绑定事件说明:不同于jquery中常见的冒泡,vue中的v-on事件已经做过优化。