Vue.js:选取容器,存储数据,方法,绑定事件,鼠标事件的简单使用

学习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',
			}
		});

感觉有点啰嗦直接上代码和效果图吧,每句代码都有注释.
Vue.js:选取容器,存储数据,方法,绑定事件,鼠标事件的简单使用_第1张图片
代码如下


<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.jstitle>
		<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>
			
			<p>我叫{{name}},今年{{age}}岁。p>
			
			<button v-on:click="{{age++}}">单击大一岁button>
			
			<button v-on:dblclick="{{age++}}">双击大一岁button>br>
			
			<a v-bind:href="blog">博客链接a>
			
			<div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}}div>
			
			<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: '记录于2019',
				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>

你可能感兴趣的:(前端,Vue.js,vue)