Matters needing attention in naming the contents of this issue:
① . variable definitions cannot use middle dashes
② . hump cannot be used for custom component naming
1, Style binding
1. class binding
Usage: v-bind:class="expression"
Type of expression: string, array, object
2. style binding
v-bind:style="expression"
Type of expression: string, array, object
① Turn the font red and large
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- vue Related dependencies of -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.f200{
font-size: 200px;
}
</style>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<h3 :class="f200" :style="color_red">{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
// Specific embodiment of binding boundary Es6
new Vue({
el:'#app',
data() {
return {
msg:'vue Your uncle',
color_red:'color: red;',
f200:'f200'
};
}
})
</script>Operation results:
2, Event handler
Event listeners can use v-on instructions
2.1 event modifier
Vue calls the modifier through the instruction suffix represented by a dot (.)
.stop .prevent .capture .self .once
<!-- Prevent click events from bubbling -- >
<a v-on:click.stop="doThis"></a>
<!-- Submit events no longer reload pages -- >
<form v-on:submit.prevent="onSubmit"></form>
<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- Only modifiers -- >
<form v-on:submit.prevent></form>
<!-- Use event capture mode when adding event listeners -- >
<div v-on:click.capture="doThis">...</div>
<!-- The callback -- > is triggered only when the event is triggered on the element itself (not on a child element)
<div v-on:click.self="doThat">...</div>
<!-- Click event can only be clicked once -- >
<a v-on:click.once="doThis"></a>
2.2 key modifier
Vue allows you to add key modifiers for v-on when listening for keyboard events:
<!-- VM. Submit() -- > is called only when the keyCode is 13
<input v-on:keyup.13="submit">
Vue provides aliases for the most commonly used keys
<!-- Ditto -- >
<input v-on:keyup.enter="submit">
All key aliases:
. enter . tab . Delete (capture delete and backspace keys) . esc . space . up . down . left
.right .ctrl .alt .shift .meta
Shortcut keys: Tab
① , bubbling events & submit answers (only once)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- vue Related dependencies of -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.chartreuse{
width: 400px;
height: 400px;
background-color: chartreuse;
}
.orange{
width: 300px;
height: 300px;
background-color: orange;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
.bisque{
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<p>Bubbling event</p>
<div class=" chartreuse" @click=" chartreuse">
<div class="orange" @click="orange">
<div class="blue" @click="blue">
<!-- Prevent click event bubble event modifier stop-->
<div class=" bisque" @click.stop=" bisque"></div>
</div>
</div>
</div>
<p>Submit answers</p>
<!-- You can submit only once Event modifier once -->
<button @click.once="dosub">Submit</button>
<p>Key modifier</p>
<!--
If nothing is filled in, the mouse moves in to trigger an event;@click="dosub"
Press enter to trigger the event; v-on:keyup.enter="dosub"
-->
<input v-on:keyup.enter="dosub" />
</div>
</body>
<script type="text/javascript">
// Specific embodiment of binding boundary Es6
new Vue({
el:'#app',
data() {
return {
f200:'f200',
};
},
methods:{
chartreuse(){
alert(" chartreuse");
},
orange(){
alert("orange");
},
blue(){
alert("blue");
},
bisque(){
alert(" bisque");
},
dosub(){
alert("Done, submit the answer");
}
}
})
</script>
</html>Operation results:
III Vue form
1. Common controls
Text box / password box / text field / hidden field
Radio check box / multiple check box
radio button
Drop down box
Note: how is submission achieved when the confirmation box is checked?
v-bind:disabled="show" It is controlled by a show variable,
flag is true when checkbox is selected;
When flag is true, show is false;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>form </title>
</head>
<body>
<div id="app">
<h1>title</h1>
<ul>
<li>
<p>vue form </p>
<label>full name:</label><input v-model="uname" /><br />
<label>password:</label><input v-model="upwd" type="password" /><br />
<!-- Convert the user's input value to Number type -->
<label>Age:</label><input v-model.number="age" /><br />
<label>Gender:</label>
<input type="radio" v-model="sex" name="sex" value="1" />male
<input type="radio" v-model="sex" name="sex" value="0" />female<br />
<label>Hobbies:</label>
<div v-for="h in hobby">
<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
</div>
<label>Category:</label>
<select v-model="type">
<option value="-1">===Please select===</option>
<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
</select><br />
<label>remarks:</label>
<textarea v-bind:value="mark"></textarea><br />
confirm<input type="checkbox" v-model="flag" />
<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
uname: null,
upwd: null,
age: 10,
sex: 1,
hobby: [{
id: 1,
name: 'Basketball'
}, {
id: 2,
name: 'Football'
}, {
id: 3,
name: 'Chinese chess'
}],
hobbies: [],
types: [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}, {
id: 3,
name: 'C'
}],
type: null,
mark: 'Student notes',
flag: false
}
},
computed: {
show: function() {
return !this.flag;
}
},
methods: {
doSubmit: function() {
console.log('doSubmit')
var obj = {
uname: this.uname,
upwd: this.upwd,
age:this.age+10,
sex: this.sex,
hobbies:this.hobbies,
type: this.type,
mark: this.mark,
}
console.log(obj);
}
}
})
</script>
</html>
The operation is as follows:
★ 4, Components (key)
4.1 introduction to components
Component is one of Vue's most powerful functions
Components can extend HTML elements and encapsulate reusable code
Component system allows us to build large-scale applications with independent and reusable small components. The interface of almost any type of application can be abstracted into a component tree
4.2 global and local components
Global component: Vue.component(tagName, options). TagName is the component name and options is the configuration option.
Local components: new Vue({el:'#d1',components: {...}})
After registration, we can call components in the following ways:
<tagName></tagName>
4.3props:
props is a custom attribute used by the parent component to pass data.
The data of the parent component needs to be passed to the child component through props, and the child component needs to explicitly declare "prop" with the props option
Create a component. Requirement: when a myButton is referenced, a uniquely marked button should be displayed on the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- vue Related dependencies of -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- Define boundary -->
<div id="app">
<!--
Requirements: hope to use<mybutton></mybutton>This component displays a unique tag button,
And there is text in the button
m Just like usual id/name It's the same
-->
<mybutton m="ha-ha"></mybutton>
<mybutton m="Ha ha, ox and horse"></mybutton>
</div>
</body>
<script type="text/javascript">
/*
There is no mybutton component in Vue
Define a mybutton
options Corresponding json object
The hump naming method cannot be used to define components. For example, MyButton will report an error
*/
Vue.component("mybutton", {
//props defines the variables in the component and defines an m variable
props: ["m"],
/*template Displays a uniquely marked button representing what the custom component will display*/
template: "<button v-on:click='incrn'>I was{{m}}Click{{n}}second</button>",
data: function() {
return {
//Variables defining n
n: 1
}
},
methods:{
incrn(){
this.n++;
}
}
})
// Specific embodiment of binding boundary Es6
new Vue({
el: '#app',
data() {
return {
};
}
})
</script>
</html>Result: the components do not affect each other
① , easyUI tree control
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="app">
<li></li>
<li><ul>
<li></li>
<li></li>
<li></li>
</ul></li>
<li><ul>
<li></li>
<li></li>
</ul></li>
</ul>
<script>
// $.ajax({
// for(var i in data){
// //data[i] returns an object, which is the leaf node (there is no node behind it)
// //data[i] returns an array, a first-order node (followed by a node)
// }
// success:function(){
// //Get ul and add in ul
// //Is the object
// $("#app").append("<li></li>")
// //Is an array
// $("#app").append("<ul>
// <li></li>
// <li></li>
// <li></li>
// <li></li>
// </ul>")
// }
// })
$("#app").tree({
url:...,
success:function
})
//Summary: the control encapsulates a large amount of repeated js code, such as:. tree/.datagrid
</script>
</body>
</html>result:
★ 5, Component communication (custom events)
Listening event: $on(eventName)
Trigger event: $emit(eventName)
Note 1: vue custom events are designed for inter component communication. In vue, the parent component transmits data to the child component through prop. If you want to transmit the data of the child component to the parent component, you can bind the user-defined events
Parent Vue instance - > Vue instance, pass data through prop Child Vue instance - > parent Vue instance, passing data through events
Note 2: event names are different from components and prop s. There is no automatic case conversion for event names. Instead, the name of the triggered event needs to exactly match the name used to listen to the event. It is recommended to use "short horizontal line separated naming", such as three click
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>{{ts}}</h3>
<p>vue assembly</p>
<!-- Using custom components my-button Transfer value when(amount to jsp The concept of passing values from tags to helper classes) -->
<my-button m="ha-ha" v-on:three-click="xxx"></my-button>
</li>
</ul>
</div>
</body>
<script>
// How to define global components
Vue.component('my-button', {
props: ['m'],
template: '<button v-on:click="doClickMyButton">I am a custom component, which is{{m}}Yes{{n}}second</button>',
data: function() {
return {
n: 0
};
},
methods: {
doClickMyButton: function() {
console.log('doClickMyButton Method called');
this.n++;
//It will be called after three clicks
if (this.n % 3 == 0) {
//Trigger the event defined by the user-defined component. Any parameter can be passed here
//However, the bound function of the triggered event should be consistent with the number of parameters
//Trigger event $emit(eventName)
this.$emit('three-click', this.n,
'https://blog.csdn.net/qq_59025975?spm=1010.2135.3001.5343 ',' what are you ');
}
}
}
})
var vm = new Vue({
el: "#app",
data: {
ts: new Date().getTime()
},
methods: {
// When a child component passes a value to a parent component, you only need to define parameters in the method of the parent component
xxx: function(a, b, c) {
console.log('Custom event bound functions are executed')
console.log(a);
console.log(b);
console.log(c);
}
}
});
</script>
</html>② . results:
When my component changes, the methods defined in Vue will be called at the same time
The method will not be called when clicking the first and second time
The third time: all three parameters are passed out
The method will not be called the fourth time
End of this issue!
catalogue
① , bubbling events & submit answers (only once)
★ 5, Component communication (custom events)