Vue.js：选取容器,存储数据,方法,绑定事件,鼠标事件的简单使用
今天了解了些简单的使用：el: 选取html容器元素data: 存储数据methods:方法v-bind,v-html:绑定属性的值双击鼠标事件:单击v-on:click鼠标移动事件:v-on:mousemove引入Vue.js：https://cdn.jsdelivr.net/npm/vue/dist/vue.js<script src="https://cdn.jsde...
·
学习Vue.js第一天
今天了解了些以下简单的使用：
el: 选取html容器元素
data: 存储数据
methods:方法
data-binding:绑定属性的值
鼠标事件:单击v-on:click,双击v-on:dblclick
鼠标移动事件:v-on:mousemove
引入Vue.js：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
实例化Vue
new Vue({});
el:选取html容器元素,这里选中div id="dcf"的容器
new Vue({
el:'#dcf',
}
});
感觉有点啰嗦直接上代码和效果图吧,每句代码都有注释.
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#view {
width: 500px;
padding: 100px 20px;
border: solid 1px lightsalmon;
text-align: center;
}
</style>
</head>
<body>
<div id="dcf">
<!--{{}}起来的方法需要在方法后面加(),用""起来的可以不用-->
<h1>{{monster()}}</h1>
<!--直接{{}}里面放data里的属性就可以显示值了-->
<p>我叫{{name}},今年{{age}}岁。</p>
<!--单击事件-->
<button v-on:click="{{age++}}">单击大一岁</button>
<!--双击事件-->
<button v-on:dblclick="{{age++}}">双击大一岁</button></br>
<!--如果直接href="blog"是不行的,F12也看见我们的链接显示的是href="blog"而不是href="https://blog.csdn.net/qq_42259469"-->
<a v-bind:href="blog">博客链接</a>
<!--鼠标事件,显示鼠标的X,Y轴-->
<div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}}</div>
<!--嵌入b标签加粗-->
<p v-html="Record ">{{time}}</p>
</div>
</body>
<script>
new Vue({
el: '#dcf',
data: {
name: 'Old Monster',
age: '22',
blog: 'https://blog.csdn.net/qq_42259469',
Record: '<b>记录于2019</b>',
x: 0,
y: 0
},
methods: {//可以放多个方法
monster: function() {
return 'hello,Vue.js!!!';
},
updateXY: function(event) {
this.x = event.offsetX;//获取鼠标X轴
this.y = event.offsetY;//获取鼠标Y轴
}
}
});
</script>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)