vue.js
- 引入vue.js檔案:
- vue的基本語法？
- 觸發事件?
- 一個小代碼：
- 效果圖:
提出問題？
怎么使用data中資料?
怎么使用methods中函式？
1.vue.js是引入vue檔案才可以使用vue.js
引入vue.js檔案:
官網的外部檔案
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
vue的基本語法？
var app=new Vue({
el:’#app’, // 獲取元素的id屬性，進而系結這個元素
data:{
message:‘我是為啥’,
//資料里的變數值可以在系結的元素列印出資料
//怎么使用data中資料:在系結的元素打下{{message}}顯示資料了
},
methods: {
doli:function(){
//
},
//在methods寫下函式,函式名,再到系結的元素寫下觸發事件,可以點擊執行里面的函式
})
觸發事件?
觸發事件有： （記住）
點擊事件： @click=“函式名”，
mouseenter ：進入 mouseover：在 mousemove：移動 mouseout：移出 mouseleave：離開
click：單擊 mousedown：按下滑鼠 mouseup：松開滑鼠 dblclick：雙擊
一個小代碼：
<div id="app" @mouseover="doli" @mouseleave="doll">
{{message}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'我是為啥',
},
methods: {
doli:function(){
this.message="晚上好";
},
doll:function(){
this.message="我是為啥";
}
},
})
</script>
效果圖:
滑鼠未接觸div時：
滑鼠接觸div時:(文字改變了)
滑鼠再離開div時:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304783.html
標籤：其他
下一篇：2021-10-02