vue濡備綍缁檇iv娣诲姞浜嬩欢
扬州沐宇科技
2021-05-13 14:45:04
vue
鍦╲ue涓粰div娣诲姞浜嬩欢鐨勬柟娉曪細1.鏂板缓vue.js椤圭洰锛?.娣诲姞div鏍囩锛?.浣跨敤click灞炴€ф坊鍔犱簨浠讹紝骞剁粦瀹歷-on鎸囦护锛?.浣跨敤methods鏂规硶瑙﹀彂浜嬩欢锛?/p>
鍏蜂綋姝ラ濡備笅锛?/p>
1.棣栧厛锛屽湪vue-cli涓垱寤轰竴涓獀ue.js椤圭洰锛?/p>
vue create project-name
2.vue.js椤圭洰鍒涘缓濂藉悗锛屽湪椤圭洰涓坊鍔犱竴涓猟iv鏍囩锛?/p>
<div id="root">{{text}}</div>3.div鏍囩娣诲姞濂藉悗锛屽湪鏍囩涓娇鐢╟lick灞炴€ф坊鍔犱竴涓簨浠讹紝骞朵娇鐢╲-on鎸囦护瀵逛簨浠剁粦瀹氾紱
<div id="root" v-on:click='bdjy()'>{{text}}</div>
4.鏈€鍚庯紝浜嬩欢缁戝畾缁戝畾濂藉悗锛屼娇鐢╩ethods鏂规硶鍗冲彲瑙﹀彂浜嬩欢锛?/p>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
text:'hello world!'
},
methods:{
bdjy:function(){
alert()
}
}
});
</script>
上一条：vue如何调用全局函数
下一条：如何选择java xml的解析库
