王元肉==>个人主页
| 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 |
推荐阅读
文章结构 模板语法数据绑定data的两种写法事件处理事件的基本使用事件修饰符键盘事件 模板语法{{undefined}}Vue解析为空，页面上不会展示，所以当值没有展示的时候，要考虑自己的值是不是undefined
//有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
DOCTYPE html>
<html lang="en">
<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>模板语法title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
head>
<body>
<div id="root">
<h1>插值语法h1>
<span>hello,{{who}}span>
<h1>指令语法h1>
<a :href="url">百度一下a>
div>
<script>
// 阻止vue在启动时产生生产提示
Vue.config.productionTip = false;
script>
<script>
new Vue({
el: '#root',
data: {
who: 'world',
url: 'http://www.baidu.com'
}
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<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>数据绑定title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
head>
<body>
<script>
Vue.config.productionTip = false;
script>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="value">
<br> 双向数据绑定：
<input type="text" v-model:value="value">
<br>
单向数据绑定简写：<input type="text" :value="value">
<br> 双向数据绑定简写：
<input type="text" v-model="value">
div>
<script>
new Vue({
el: '#root',
data: {
value: 'hahaha'
}
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<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>titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
head>
<body>
<script>
Vue.config.productionTip = false;
script>
<div id="root">
{{value}}
div>
<script>
const v = new Vue({
el: '#root',
// data: {
// value: 'hahaha'
// },
// data在组件中使用时必须写成函数式
data() {
return {
value: 'hahaha'
}
}
})
v.$mount('#root')
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
head>
<body>
<div id="root">
<h2>欢迎来到{{ name }}学习h2>
<button v-on:click="showInfo1">点我提示信息button>
<button @click="showInfo1">点我提示信息1（不传参）button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）button>
div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: "吉大"
},
methods: {
showInfo1(event) {
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert("同学你好！");
},
showInfo2(event, number) {
console.log(event, number);
// console.log(event.target.innerText)
console.log(this); //此处的this是vm
alert(number);
},
// showInfo2:(event, number) => {
// console.log(event, number);
// console.log(this); //此处的this是这个Vue实例创建所在的作用域中的this，在这其实就是window
// alert(number);
// },
}
});
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
<style>
* {
margin-top: 20px;
}
.demo1 {
height: 50px;
background-color: skyblue;
}
.box1 {
padding: 5px;
background-color: skyblue;
}
.box2 {
padding: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
style>
head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习h2>
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息a>
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息button>
div>
<button @click.once="showInfo">点我提示信息button>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
div>
div>
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息button>
div>
<ul @wheel.passive="demo" class="list">
<li>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: '吉大'
},
methods: {
showInfo(e) {
alert('同学你好！')
// console.log(e.target)
},
showMsg(msg) {
alert(msg);
},
demo() {
console.log(1);
for (let i = 0; i < 100000; i++) {
console.log('#')
}
}
}
})
script>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>键盘事件title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">script>
head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习h2>
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
<input type="text" placeholder="按下大小写提示输入" @keydown.caps-lock="showInfo">
<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
new Vue({
el: '#root',
data: {
name: '吉大'
},
methods: {
showInfo(e) {
alert(e.keyCode)
}
},
})
script>
html>
结束啦！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）