创建一个vue-basic-cdn文件夹然后导入到vscode中,新建三个文件,index.html,app.js,styles.css 。
一、el和data的使用
el的含义是这个vue实例要操作哪一个元素的对象,#号是id定位方式,class的定位方式是.
data 返回的是一个对象需要,return,对象里面的可以在index.html中使用,但是只能在el指定的容器中使用
//实例化Vue对象
new Vue({
el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
data() {
return {
name: 'testor',
age: '20'
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Hello,{{name}}</h1>
<p>我的年龄是:{{age}}</p>
</div>
</body>
<script src="app.js"></script>
</html>
二、methods方法的使用
在app.js里添加一个methods,在这里面写方法,并且可以传参数
return 使用反引号``,引用变量属性使用${}
//实例化Vue对象
new Vue({
el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
data() {
return {
name: 'testor',
age: '20'
}
},
methods: {
greet(time) {
return `Good ${time} ${this.name}`
},
haveLunch() {
return `吃过午饭了吗?`;
}
}
})
三、v-bind属性绑定
只要标签里的属性上加上 v-bind,这个属性就可以获取到vue实例里data的值
v-bind: 有一个简写的方式,可以只写冒号:
v-html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Data binding</h1>
<h1>Hello,{{name}}</h1>
<p>我的年龄是:{{age}}</p>
<p>{{ greet('morning') }}</p>
<p>{{ haveLunch() }}</p>
<p>
<a v-bind:href="website">baidu</a>
</p>
<p v-html="websiteTag"></p>
<p><input type="text" v-bind:value="name" /></p>
</div>
</body>
<script src="app.js"></script>
</html>
//实例化Vue对象
new Vue({
el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
data() {
return {
name: 'testor',
age: '20',
website: 'https://www.baidu.com'
websiteTag: '<a href="https://www.taobao.com">taobao</a>'
}
},
methods: {
greet(time) {
return `Good ${time} ${this.name}`
},
haveLunch() {
return `吃过午饭了吗?`;
}
}
})
四、v-on事件绑定
点击事件
双击事件
鼠标事件
v-on:click="add(1)"
@click="subtract(1)"
这样的写法,可以传参
双击用
v-on:dblclick="add()"
@dblclick="subtract()"
鼠标事件,这个方法不能写()
v-on:mousemove="updateXY"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css" />
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<button v-on:click="add(1)">add age +1</button>
<button @click="subtract(1)">subtract age -1</button>
<button v-on:dblclick="add(10)">add age +10</button>
<button @dblclick="subtract(10)">subtract age -10</button>
<p>{{age}}</p>
<div id="canvas" v-on:mousemove="updatXY">
{{x}},{{y}}
</div>
</div>
</body>
<script src="app.js"></script>
</html>
//实例化Vue对象
new Vue({
el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
data() {
return {
name: 'testor',
age: '20',
x: 0,
y: 0
}
},
methods: {
greet(time) {
return `Good ${time} ${this.name}`
},
haveLunch() {
return `吃过午饭了吗?`;
},
add(inc) {
this.age += inc;
},
subtract(dec) {
this.age -= dec;
},
updatXY(event) {
console.log(event)
this.x = event.offsetX
this.y = event.offsetY
}
}
})
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333
}
五、事件修饰符
在事件上加上修饰符,例如v-on:click.once=""就是请求这个方法,只有第一次是生效的
v-on:click.prevent="",
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css" />
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<button v-on:click.once="add(1)">add age +1</button>
<button @click="subtract(1)">subtract age -1</button>
<button v-on:dblclick="add(10)">add age +10</button>
<button @dblclick="subtract(10)">subtract age -10</button>
<p>{{age}}</p>
<!-- 鼠标事件 -->
<div id="canvas" v-on:mousemove="updatXY">
{{x}},{{y}}
</div>
<!-- 事件修饰符,只有alert弹窗了,不跳转百度了 -->
<a v-on:click.prevent="handleClick()" href="https://www.baidu.com">百度</a>
</div>
</body>
<script src="app.js"></script>
</html>
//实例化Vue对象
new Vue({
el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
data() {
return {
name: 'testor',
age: '20',
x: 0,
y: 0
}
},
methods: {
greet(time) {
return `Good ${time} ${this.name}`
},
haveLunch() {
return `吃过午饭了吗?`;
},
add(inc) {
this.age += inc;
},
subtract(dec) {
this.age -= dec;
},
updatXY(event) {
console.log(event)
this.x = event.offsetX
this.y = event.offsetY
},
handleClick() {
alert("确定");
}
}
})
六、键盘事件
v-on:keyup,加事件修饰符,enter ,每次点enter后才出发这个方法
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<label>姓名</label>
<input type="text" v-on:keydown="logName" />
<label>年龄</label>
<input type="text" v-on:keyup="logAge" />
</div>
</body>
<script src="app.js"></script>
</html>
new Vue({
el: "#vue-app",
data() {
return {
name: '',
age: 31
}
},
methods: {
logName() {
console.log('正在输入名字.....');
},
logAge() {
console.log('正在输入年龄');
}
}
})
七、v-mode 双向数据绑定
只能在三个标签使用,input、select、textarea,需要有输入,同时还有输出
写法如下
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>双向数据绑定 /input /select /textarea</h1>
<label>姓名</label>
<input type="text" v-model.lazy="name" />
<span>{{ name}}</span>
<label>年龄</label>
<input type="text" v-model="age" />
<span>{{ age }}</span>
</div>
</body>
<script src="app.js"></script>
</html>
new Vue({
el: "#vue-app",
data() {
return {
name: '',
age: 31
}
},
methods: {
}
})
现象如下
八、ref的使用,绑定到元素上,可以通过refs获取元素对象
ref可以绑定到一个元素上,然后就可以获取这个元素对象,
例如拿到input标签的值
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>ref</h1>
<label> 姓名</label>
<input type="text" ref="name" v-on:keyup="getName" />
<span>{{ name }}</span>
<label>年龄</label>
<input type="text" ref="age" v-on:keyup="getAge" />
<span>{{ age }}</span>
</div>
</body>
<script src="app.js"></script>
</html>
new Vue({
el: "#vue-app",
data() {
return {
name: '',
age: 31
}
},
methods: {
logName() {
console.log('正在输入名字.....');
},
logAge() {
console.log('正在输入年龄');
},
getName() {
console.log(this.$refs.name.value)
this.name = this.$refs.name.value
},
getAge() {
console.log(this.$refs.age.value)
this.age = this.$refs.age.value
}
}
})
九、watch,一般的时候不建议使用,耗费性能,但是如果是为了调试可以使用
watch就是可以监听,data里的值
new Vue({
el: "#vue-app",
data() {
return {
name: '',
age: 31
}
},
methods: {
},
watch: {
name(val, oldVal) {
console.log(val, oldVal)
},
age(val, oldVal) {
console.log(val, oldVal)
}
}
})
十、computed,计算属性
methods里的方法是有一个值有变化了,其他的方法都运行,为了解决这个问题,使用computed计算属性,只对有变化的值,进行计算。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>computer计算属性</h1>
<button @click="a++">add to a</button>
<button @click="b++">add to b</button>
<p>{{ a }}</p>
<p>{{ b }}</p>
<p>Age + a ={{ ageToA }} </p>
<p>Age + b ={{ ageToB }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
new Vue({
el: "#vue-app",
data() {
return {
name: '',
age: 31,
a: 0,
b: 0
}
},
methods: {
},
watch: {
},
computed: {
ageToA() {
console.log(this.a + this.age);
return this.a + this.age;
},
ageToB() {
console.log(this.b + this.age);
return this.b + this.age;
}
}
})