What Vue does: It frees developers from dom manipulation and focuses on data manipulation,Copy the codeData-driven, interface rendering automatically changes as data changes 1. Remove developers' energy from DOM, and rarely do DOM manipulation 2. Binding elements to data by directive 3. Data changes Element interface changes 4. Developers pay attention to changes in dataCopy the codeConfiguration: download from Vue official website; Or NPM install vue
Vue object is instantiated after js package is introduced.
var vm = new Vue({/ / instantiate
el: '#btn'.// Select the label (scope)
data: {// Variable (data), associated with the page tag
bool: true},methods: {// Write method object
Fn1(){/ / method
},
Fn2(){}}});Copy the codeRender data:
<div id='app'>{{name}}</div>// Use interpolation {{}} to place data variablesCopy the codeVue data is two-way data binding, data is interdependent, the disadvantage is that the source is difficult to find, but improve the perception of data
Instructions:
V-if (Conditional Rendering)
<p v-if='bool'></p>// displays the element
p>// Display the element otherwise
<p v-else-if='bool'></p>// Display the element if the condition is met
Copy the code<li v-for='(item,index) in list’ v-bind: <li v-for='(item,index) in list’ v-bind: The key index of = > {{item}} – {{index}} < / li >)
/ / array<li v-for='item in list'>{{item}}</li>// list is an array of operations.<li v-for='(item,index) in list'>{{item}}--{{index}}</li>//item is each item, index is the array index, list is the array of operations (create li based on the length of list)<li v-for='item in 20'>{{item}}</li>// Create 20 li // strings directly<li v-for='item in "hello vue"'>{{item}}</li>// Iterates over the string, outputs 9 li characters for each item // object<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>// Val,key,index are the attribute, attribute name,index of each item of the object respectivelyCopy the codeV-click (Event directive)
<button v-on:click="test">Am I</button>// Similar to onclick, test is a function in Vue instantiation // V-on :click is equivalent to @click<a v-on:click.stop="doThis"></a>// Cancel the bubbling event<div v-on:click.self="doThat">.</div>// Only clicking on the element itself will triggerCopy the codeV-bind (Property setting)
<div v-bind:class='state?" red":"green"'>//v-bind: 'attribute name '=' attribute value' //<div v-bind:class='state?" red":"green"'>
Copy the codeFilter :(a function that processes data)
Global filters: Difference from local filters (local filters can only be used in the current component)
<! DOCTYPEhtml>
<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>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<! - this is the parameter This is filtered, the middle separated by | -- - >
</div>
<script>
// Global filtering
Vue.filter('getTime'.function (value) {
// Can write data processing in the middle
return value;
});
var vm = new Vue({
el: '#box'.data: {
nowTime: Date.now()
}
});
</script>
</body>
</html>
Copy the codeLocal filtration:
<! DOCTYPEhtml>
<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>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<! - this is the parameter This is filtered, the middle separated by | -- - >
</div>
<script>
// Local filtering
var vm = new Vue({
el: '#box'.data: {
nowTime: Date.now()
},
filters: {
getTime: function (value) {
// Can write data processing in the middle
returnvalue; }}});</script>
</body>
</html>
Copy the codeComponent: is an extended instance of VUE
Global component :(whole page can be used)
<template id="tp1">
<! -- Component creation -->
<div></div>
</template>
Copy the codevar mod = {// Component configuration
template: '#tp1'.// Select the component
data() {
return {
/ / write variables}},methods: {
/ / write function}}Copy the codeVue.component('mod', mod);// Register the component
Copy the code// Enter it directly on the page<mod></mod>// It can be usedCopy the codeLocal components :(can only be used in the currently selected scope)
let box = new Vue({
el: '#box'.// The current scope is within the box tag
data: {},methods: {},components: {// Create a local component
mod: ({
template: '#tp1'.data() {
return{}},methods: {}})}});Copy the codeData transfer between components :(similar event throwing and listening)
Parent component to child component:
<! DOCTYPEhtml>
<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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<! -- Subcomponent -->
<template id="son">
<div>{{callson}}</div>
</template>
<! -- Parent component, parent component contains children -->
<template id="fat">
<div>
<! When the parent component data changes, transfer the data by saving it in its own property.
<div>{{fbool}}</div>
<button @click='change'>Change</button>
<! Call callson as an attribute with data passed to child elements
<son :callson='fbool'></son>
</div>
</template>
<script>
Vue.component('son', {
template: '#son'.data: function () {
return{}},props: ['callson'] // The child component receives data there
});
Vue.component('fat', {
template: '#fat'.data: function () {
return {
fbool: false}},methods: { // When you click the button of the parent component, the data in the parent component changes
change() {
this.fbool = !this.fbool; }}});var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
Copy the codeChild component to parent component:
<! DOCTYPEhtml>
<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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="son">
<div>
<button @click='change'>Change</button>
<! -- <div>{{sbool}}</div> -->
</div>
</template>
<template id="fat">
<div>
<div>{{fbool}}</div>
<! -- Create a custom event, bind the function in the parent element, and pass the parameters separated by a comma -->
<son @callfat='changeF'></son>
<! Method to trigger parent element when child element is clicked -->
</div>
</template>
<script>
Vue.component('son', {// When you click the button of a child component, the data in the child component changes
template: '#son'.data: function () {
return {
sbool: false}},methods: {
change() {
this.$emit('callfat');
this.sbool = !this.sbool; }}}); Vue.component('fat', {
template: '#fat'.data: function () {
return {
fbool: false}},methods: {
changeF() {
this.fbool = !this.fbool; }}});var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
Copy the codeSibling components: (combining child to parent, parent to child) :
<! DOCTYPEhtml>
<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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="sonf">
<div>
<button @click='change'>Change</button>
<div>First <br>{{sfbool}}</div>
</div>
</template>
<template id="sons">
<div>Second <br>{{callson}}</div>
</template>
<template id="fat">
<div>
<sonf @callfat='changeF'></sonf>
<sons :callson='fbool'></sons>
</div>
</template>
<script>
Vue.component('sonf', {
template: '#sonf'.data: function () {
return {
sfbool: false}},methods: {
change() {
this.$emit('callfat');
this.sfbool = !this.sfbool; }}}); Vue.component('sons', {
template: '#sons'.data: function () {
return{}},props: ['callson']}); Vue.component('fat', {
template: '#fat'.data: function () {
return {
fbool: false}},methods: {
changeF() {
this.fbool = !this.fbool; }}});var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
Copy the codeNon-adjacent sibling components:
let angel=new Vue();// Introduce a Vue instance
Copy the codeangel.$emit('test'.'Hello')// The sender throws events and data in the function
angel.$on('test'.this.change)// The receiver receives events and data
Copy the codeAnimation:
<transition name='aaa'>If there is more than one element in the middle of the CSS animation with the name value, you need to nest an element outside, and then add to the element<div v-if='show'>
<p>Hello</p>
<p>World</p>
</div>
</transition>
Copy the code .aaa-enter{the topopacity: 0;
}
.aaa-enter-to{after enteringopacity: 1;
}
.aaa-enter-active{transition timetransition: all 3s;
}
.aaa-leave{before leavingopacity: 1;
}
.aaa-leave-to{leftopacity: 0;
}
.aaa-leave-active{transition timetransition: all 3s;
}
Copy the code