vue.js基础_yyy言者的博客

怎么使用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时: