preface

filter :filter

Global filter

<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat(' insane +1', '123') | test }}</p>
</div> <script>
// Define a Vue Global filters , The name is called msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// A string of replace Method , The first parameter , Except for one Out of string , You can also define a regular
return msg.replace(/ pure /g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: ' once , I am also a simple teenager , A simple I , Silly question , Who is the simplest man in the world '
},
methods: {}
});
</script>
</body> </html>

Define the global filter for formatting time

<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat(' insane +1', '123') | test }}</p>
</div> <script>
// Define a Vue Global filters , The name is called msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// A string of replace Method , The first parameter , Except for one Out of string , You can also define a regular
return msg.replace(/ pure /g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: ' once , I am also a simple teenager , A simple I , Silly question , Who is the simplest man in the world '
},
methods: {}
});
</script>
</body> </html>

Define private filters

<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat(' insane +1', '123') | test }}</p>
</div> <script>
// Define a Vue Global filters , The name is called msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// A string of replace Method , The first parameter , Except for one Out of string , You can also define a regular
return msg.replace(/ pure /g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: ' once , I am also a simple teenager , A simple I , Silly question , Who is the simplest man in the world '
},
methods: {}
});
</script>
</body> </html>

A string of padStart Method

Custom key modifier

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head>
<body>
<div id="app">
<!--click event -->
<input type="button" value=" add to " @click="add()">
<!--enter event -->
<input type="text" class="form-control" v-model="name" @keyup.enter="add()"> <!--f2 Keyboard key events -->
<input type="text" class="form-control" v-model="name" @keyup.113="add()">
<input type="text" class="form-control" v-model="name" @keyup.f2="add()">
</div> <script> // Custom global key modifier
Vue.config.keyCodes.f2 = 113 // establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: { },
methods: {
add() {
alert(1);
}
} });
</script> </body>
</html>

Hook function

Custom private directive

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head>
<body>
<div id="app">
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
</div> <script> // Use Vue.directive() Define global instructions v-focus
// among : Parameters 1 : The name of the instruction , Be careful , At the time of definition , Before the name of the instruction , No need to add v- Prefix ,
// however : At call time , must Before the command name add v- Prefix to call
// Parameters 2: It's an object , On this object , There are some instruction related functions , These functions can be used at specific stages , Perform related operations
Vue.directive('focus', {
bind: function (el) { // Whenever an instruction is bound to an element , It will be executed immediately bind function , Only once
// Be careful : At every Function , The first parameter , Forever el , Express The element to which the instruction is bound , This el Parameters , It's a native JS object
// Element in When the command was just bound , Not yet Insert into DOM In the middle , Now , call focus Methods don't work
// because , An element , Just insert DOM after , To get the focus
// el.focus()
},
inserted: function (el) { // inserted Show elements Insert into DOM In the time , Will execute inserted function 【 Trigger 1 Time 】
el.focus()
// and JS Action related operations , Best in inserted To perform , place JS The act does not take effect
},
updated: function (el) { // When VNode When it's updated , Will execute updated, May trigger multiple times }
}) // Customize a To set the font color Instructions
Vue.directive('color', {
// style , As long as the element is bound by an instruction , Whether or not the element is inserted into the page , This element must have an inline style
// In the future, the elements will definitely show up on the page , Now , The browser's rendering engine is bound to parse styles , Apply to this element
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// Style related operations , Generally, it can be in bind perform // console.log(binding.value)
// console.log(binding.expression) el.style.color = binding.value
}
}) // establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {
dt: new Date()
},
methods: {
directives: { // Custom private directive
'fontweight': { // Set the font thickness
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // Be careful : This function Equate to hold The code says bind and update In the middle
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
} });
</script> </body>
</html>

Life cycle

in general Vue There are four states in the life cycle of

1、creating state --vue The process by which an instance is created
2、mounting state -- Hang to the real DOM node
3、updating state -- If data The data change in will trigger the re rendering of the corresponding component
4、destroying state -- Example destruction

The top four states correspond to 8 A way

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head> <body>
<div id="app">
<input type="button" value=" modify msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div> <script>
// establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log(' Yes show Method ')
}
},
beforeCreate() { // This is the first life cycle function that we encounter , Before the instance is completely created , Will execute it.
console.log("beforeCreate()")
// console.log(this.msg)
// this.show()
// Be careful : stay beforeCreate When a lifecycle function executes ,data and methods Medium The data hasn't been initialized yet
},
created() { // This is the second life cycle function encountered
console.log("created()")
// console.log(this.msg)
// this.show()
// stay created in ,data and methods It's all initialized !
// If you want to call methods The method in , Or operation data Data in , Earliest , Only in created In the operation
},
beforeMount() { // This is the first 3 Life cycle functions , Express Template has been edited in memory , But not yet Template rendering to On the page
console.log("beforeMount()")
// console.log(document.getElementById('h3').innerText)
// stay beforeMount When it comes to execution , Elements in the page , It's not really replaced , Just a few template strings that I wrote before
},
mounted() { // This is the first 4 Life cycle functions , Express , Templates in memory , It's actually attached to the page , The user can see the rendered page
console.log("mounted()")
// console.log(document.getElementById('h3').innerText)
// Be careful : mounted yes Last lifecycle function during instance creation , When performing the mounted It means , The instance has been completely created , here , If there is no other operation , The instance , Just be quiet Lying in our memory , Motionless
}, // The next two events are running
beforeUpdate() { // Now , Express Our interface hasn't been updated yet 【 Has the data been updated ? The data must have been updated 】
console.log("beforeUpdate()")
/* console.log(' The content of the elements on the interface :' + document.getElementById('h3').innerText)
console.log('data Medium msg The data is :' + this.msg) */
// Come to the conclusion : When executed beforeUpdate When , Data displayed in the page , It's still old , here data Data is up to date , The page has not been associated with Keep up-to-date data in sync
},
updated() {
console.log("updated()")
//console.log(' The content of the elements on the interface :' + document.getElementById('h3').innerText)
//console.log('data Medium msg The data is :' + this.msg)
// updated When the event is executed , Page and data Data is already in sync , It's all the latest
}
});
</script>
</body>
</html>

vue-resource launch get、post、jsonp request

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script>
<script src="../Scripts/Vue.js/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get request " @click="getInfo">
<input type="button" value="post request " @click="postInfo">
<input type="button" value="jsonp request " @click="jsonpInfo">
</div>
<script>
// establish Vue example , obtain ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // launch get request
// When initiated get After the request , adopt .then To set up a successful callback function this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// adopt result.body Get the successful data returned by the server
// console.log(result.body)
})
},
postInfo() { // launch post request application/x-wwww-form-urlencoded
// Manually initiated Post request , There is no form format by default , therefore , Some servers can't handle it
// adopt post The third parameter of the method , { emulateJSON: true } Set up Type of content submitted by Normal form data format
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},
jsonpInfo() { // launch JSONP request
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script> </body>
</html>

Information

Vue.js Introduction series ( Two ) More articles about

  1. Vue.js Introduction series ( One )

    Basic Vue The code structure <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  2. Vue.js Introduction series ( 3、 ... and )

    preface

  3. Vue.js Introductory series ( One )

    Vue Official website : https://cn.vuejs.org/v2/guide/forms.html# Basic usage [ Introductory series ] ( One )  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Android Video recording never starts with a series of tutorials ( Two )———— Show video images

    1. Create an empty project , Note that the following permissions are declared : <uses-permission android:name="android.permission.CAMERA"/> < ...

  5. Android Video recording never starts with a series of tutorials ( One )———— brief introduction

    One .WHY Android SDK Provides MediaRecorder Help developers record videos , But this class is very chicken , It should be rarely used in actual projects , The biggest reason I think is that the output video resolution is too limited , Can't meet the needs of the project ...

  6. Android Video recording never starts with a series of tutorials ( 3、 ... and )———— Video direction

    function Android Video recording never starts with a series of tutorials ( Two )———— Show... In the video image Demo after , We should be able to see that the direction of the video is wrong . because Android in ,Camera The original direction of the video image given to us is as shown in the figure below ...

  7. Vue.js Introductory tutorial

    Vue.js Introductory tutorial :https://cn.vuejs.org/v2/guide/index.html

  8. Introduction to data mining series ( Two ) The problem of classification OneR Algorithm

    Introduction to data mining series ( Two ) The problem of classification OneR Algorithm Introduction to data mining series blog :https://www.cnblogs.com/xiaohuiduan/category/1661541.html Project address :G ...

  9. Introduction to data mining series ( Twelve ) The use of keras structure CNN Network identification CIFAR10

    brief introduction In the last blog : Introduction to data mining series ( Five past eleven ) And CNN In the network introduction , It introduces CNN The working principle and working process of , In this blog post , We will use specific code to explain how to use keras Construct a CNN The Internet is right CIFAR-10 Count ...

Random recommendation

  1. My first blog ----LCS Learning notes

    LCS Introduction In this post , Bo mainly tells you an algorithm ---- Longest common subsequence (LCS) Algorithm . I first came into contact with this algorithm in the high school informatics competition . It took a long time to understand the algorithm . Teachers often say , This algorithm is the parent algorithm , That is from here ...

  2. VsFtpd Brief notes on service configuration

    Ftp Service is the most common way to transfer files , Record the configuration steps , For future use . 1. use YUM install VsFtpd service :[root@Redis usr]# yum install vsftpd 2. Start after installation Vs ...

  3. asp

    <%@LANGUAGE="%> <!--#include file="include.asp"--> <meta http-equiv=&q ...

  4. Judge whether it contains Chinese , Include return true, Does not include return false

    /** * function : Judge whether it contains Chinese , Include return true, Does not include return false */ function isChina(s) { var patrn = /[\u4E00-\u9FA5]|[\uFE30- ...

  5. Object oriented design principles OO

    The principle of object-oriented design is OOPS(Object-Oriented Programming System, Object oriented programming system ) The core of programming , But most Java Programmers are chasing things like Singleton.Decorator ...

  6. Interface and Abstract class difference

    In object orientation ,Interface and Abstract class Two mechanisms for implementing abstract class definitions . 1. A class that declares the existence of a method without implementing it is called an abstract class (abstract class), It's used to create a system that embodies some basic ...

  7. [jobdu] Reverse pairs in arrays

    http://ac.jobdu.com/problem.php?pid=1348  Reverse order pairs in arrays are also a common problem , There are also some descriptions in the introduction to algorithms , Reference resources :http://www.cnblogs.com/wuyue ...

  8. Reverse engineering vgenerator( One )

    Preface I want to realize one by myself mybatis-generator Similar wheels , At present, only MySQL Part of the way . Use off hours , Wrote a little project , This function is realized . I'm going to write this in three blogs . Base class /** * Base class ...

  9. HNOI2019 polygon polygon

    HNOI2019 polygon polygon https://www.luogu.org/problemnew/show/P5288 This is a question ... First of all, the conclusion : Obviously, the end state must be that all edges are connected to n 了 according to ...

  10. 『 Programming problem team 』Beta Stage sprint blog 2

    1. Provide a photo of the standing meeting that day 2. Everyone's job ( Yes work item Of ID) (1) The work done yesterday Sun Zhiwei : 1. Added SubTask class , Complete basic UI 2. by SubTask Class adds expansion / shrinkage ...