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时: