JavaScript框架|vue.js基础 javascript|html|vue.js

vue.js

- 引入vue.js文件:
- vue的基本语法？
- 触发事件?
- 一个小代码：
- 效果图:

提出问题？
怎么使用data中数据?
怎么使用methods中函数？
1.vue.js是引入vue文件才可以使用vue.js
引入vue.js文件:

官网的外部文件

src="https://cdn.jsdelivr.net/npm/vue@2.6.12">

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：双击

一个小代码：

{ { message}}>var app=new Vue({el:'#app',data:{message:'我是为啥',},methods: {doli:function(){this.message="晚上好"; }, doll:function(){this.message="我是为啥"; }},})

效果图: 【JavaScript框架|vue.js基础】鼠标未接触div时：