Table of contents
Get the event object in the method corresponding to the event
Adding parentheses, adding parentheses generally requires additional parameters
Use native js to prevent bubbling
Use modifiers of vue events to prevent bubbling
Use native js to prevent bubbling
Use modifiers of vue events to prevent bubbling
Vue Official Website: Vue.js - Progressive JavaScript Framework | Vue.js (vuejs.org)
basic knowledge
For our first learning, we use the way of downloading js by ourselves.
This article uses the vue2.7.js version, some operations may not be possible if the version is too low.
Understand how Vue is written
- A vue instance can only take over one container
- Interpolation syntax: { {}} can read all attributes in data
Create a hello word page
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
</body>
</html>js code
el: used to specify which container the current vue instance is used for, and the value is a css selector string
data: used to store data, the data is used by the container specified by el
<script src="./js/vue2.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
},
});
</script>result
Modify data through the console
data to function mode
Notice
If the data in the above page data changes, the data used in the container will be automatically updated
The way of writing data, we usually write it as a function, the code is as follows:
data(){
return {
message: 'Hello world!',
}
}Why should data be written as a function?
The reason why the data attribute in Vue cannot be written in the format of an object is because an object is a reference to an address, rather than an independent existence. If a .vue file has multiple subcomponents that receive a variable together, changing the value of this variable in one of the subcomponents will affect the value of this variable in other components. If they are written as functions, then they have a concept of scope in it, separated from each other and unaffected.
instruction
What are directives?
Provide some more convenient operations for page + data in vue, these operations are called instructions.
This is how it is used in html
<div v-xxx=''></div>In vue, v-xxx is the instruction of vue, and the instruction is to drive DOM behavior with data, simplifying DOM operation.
1. Basic instructions
- v-text cannot parse html tags
- v-html parseable html tags
- v-if performs element insertion (append) and removal (remove) operations
- v-else-if
- v-else
- Switch between v-show display:none and display:block
- v-for array item, index object value, key, index
Instruction Synthesis Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-text='mytext'></div>
<hr>
<div v-html='myhtml'></div>
<hr>
<button v-if="isButtonIf">v-if 元素插入和移除</button>
<hr>
<button v-if="num==1">测试v-if</button>
<button v-else-if="num==2">测试v-else-if</button>
<button v-else>测试v-else</button>
<hr />
<button v-show="isButtonShow">v-show 元素的显示和隐藏</button>
<hr />
v-for 循环数组。这个指令写道哪个标签就循环哪个标签，可以显示数组内容和下标
<ul>
<li v-for="(love,index) in lovesArray">
{
{index}}-{
{love}}
</li>
</ul>
v-for 循环对象。可以显示对象的key和value
<ul>
<li v-for="(attr,key) in myUser">
{
{key}}:{
{attr}}
</li>
</ul>
v-for 循环对象数组。可以显示对象的成员value
<ul>
<li v-for="(u,index) in userArray">
{
{index}}:{
{u.username}}
</li>
</ul>
v-for 循环数字
<ul>
<li v-for="num in 10">
{
{num}}
</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
mytext: '<h1>我是v-text</h1>',
myhtml: '<h1>我是v-html</h1>',
isButtonIf: true,
num: 2,
isButtonShow: false,
lovesArray: ['吃', '睡', '玩'],
myUser: {
username: 'youyou',
age: 18
},
userArray: [{
username: 'youyou',
age: 18
},
{
username: 'feifei',
age: 30
}
]
}
}
});
</script>
</html>result
Two, single data binding
The v-bind directive can take a parameter after its name, which is usually an attribute of the HTML element
v-bind: attribute name = " expression "
Short form : attribute name = " expression "
<body>
<div id="app">
<img v-bind:src="tupian" width="300px">
<img :src="tupian" width="300px">
</div>
</body>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data(){// 用于储存数据，数据供el指定的容器使用
return{
tupian:'./img/long.jpg',
}
},
});
</script>Single items cannot pass values from the front end to data, but can only pass values from data to the front end
Three, two-way data binding
The v-model directive enables easy two-way binding between form input and application state
v-model=" variable "
Generally used for form acquisition and setting data
<body>
<div id="app">
<form action="">
<input type="text" v-model="person.name">
<input type="text" v-model="person.age">
<select v-model="person.love">
<option value="eat">吃</option>
<option value="he">喝</option>
</select>
<input type="radio" v-model="person.sex" value="1">男
<input type="radio" v-model="person.sex" value="2">女
</form>
</div>
</body>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data(){// 用于储存数据，数据供el指定的容器使用
return{
person:{
name:"小美",
age:19,
love:"eat",
sex:2,
},
}
},
});
</script>event binding
Event binding v-on: event name="expression||function name" abbreviation @event name="expression||function name"
Event names can be native or custom. Note that the definition of the function should also be in Vue, using the methods attribute
Get the event object in the method corresponding to the event
without brackets
<body>
<div id="app">
<button @click="fun1" >点击获取事件对象</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun1(event){
console.log(event.target);
},
},
});
</script>Adding parentheses, adding parentheses generally requires additional parameters
<body>
<div id="app">
<button @click="fun2($event,'其他参数')" >点击获取事件对象(带括号)</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun2(evnet, arg){
console.log(event.target,arg);
},
},
});
</script>event modifier
stop bubbling
Scenario where bubbling occurs: the child element and the parent element are bound to the same event, and then the child element is clicked, and the parent element also triggers the event
Use native js to prevent bubbling
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click="fun3">里层div</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun3(event){
console.log(event.target);
event.stopPropagation(); // 使用原生js阻止冒泡
},
},
});
</script>Use modifiers of vue events to prevent bubbling
<body>
<div id="app">
<div @click="fun4">
外层div
<div @click.stop="fun4">里层div</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun4(event){
console.log(event.target);
},
},
});
</script>prevent default behavior
Some tags have default behaviors, such as a tag, which has a default page jump.
Use native js to prevent bubbling
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun5(event){
console.log(event.target);
event.preventDefault(); // 使用原生js阻止默认行为
},
},
});
</script>Use modifiers of vue events to prevent bubbling
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="fun6">百度</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun6(event){
console.log(event.target);
},
},
});
</script>an event
This event will only be executed once, the second click has no effect
<div @click.once="fun7">一次事件</div>keyboard event modifier
Keyboard event modifier, which is mainly used to filter the input of specific characters to trigger.
<body>
<div id="app">
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
change(event){
console.log(event.key,event.keyCode);
},
},
});
</script>