filter
format
<div id="box"> <p>{{Data entering the filter data| Filter name('Parameter 1','Parameter 2') }}</p> Vue.filter('Filter name',function (input data data,Parameter 1,Parameter 2) { return pass; })
<body> <div id="box"> <p>{{msg| tihuan('Simple','Callous') }}</p> </div> <script> // Format 1 Vue.filter('textadd',function(enterdata) { return enterdata+' unfeeling'; }); //Format 2 Vue.filter('tihuan',function (enterdata,before,after) { return enterdata.replace(before,after); }) var vm = new Vue({ el:'#box', data:{msg:"Once upon a time, I was a simple teenager, ha ha ha ha ha ha ha ha ha ha ha ha ha"}, mehtods:{}, }); </script>
Custom instruction
Browser requests to html file, parsing html file from top to bottom, generating dom tree in memory, rendering page.
bind: in memory
inserted: on page
css style in bind
js behavior code is placed in inserted
grammar
Vue.directive('focus', {
bind: function (el) {
Execute before inserting dom
},
inserted: function (el) {
Execute after dom insertion
},
updated: function (el) {
}
})
Instruction to use
v-focus
Life cycle function
new Vue() creates an empty Vue object and does not enter memory
1beforeCreate (before creation) initialization did not start. This function is called without initializing data and methods
After 2created (initialization) initialization method and data, the El controlled by vue has not been invoked before entering el. < br / > after the complete template is loaded into memory, but not before the page is rendered, call. The page is not displayed yet vm.el It has not been invoked before entering el.
<br/>
3 before mount: after the full template is loaded into memory, but not before rendering to the page, call.
The page is not displayed yet vm.el It has not been invoked before entering el. < br / > after the complete template is loaded into memory, but not before the page is rendered, call. The page is not displayed yet vm.el.data
The template in 4mounted memory is applied to the page, that is, the el of the page is stored in memory vm.el Replace, the page can display vm.el Replace, the page can display vm.el Replace, the page can display vm.el.data
Replace the DOM object pointed to by the el attribute with the html content compiled above. Complete the html rendering in the template to the html page. ajax interaction occurs during this process.
1-4 is to create vue components
5-6 is the running process of vue components
5beforeUpdate (before update)
Virtual dom modification, but not called before synchronizing to the rendered page.
6updated (after update)
The virtual dom is modified and applied to the post.
<script>
var vm = new Vue({
el:'.box',
data:{
msg:'Ha ha ha',
},
methods:{
show(){
console.log('ojbk!');
}
},
beforeCreate(){ //Create a vue empty component before allocating memory
// console.log(this.msg);
// this.show();
},
created(){ // vue creates components. After vue allocates memory, vue invokes the page before calling.
// console.log(this.msg);
// this.show();
},
beforeMount(){
//vue is loaded into the html generation template, which enters the memory before rendering to the page.
// console.log(document.getElementById('hh3').innerHTML);
},
mounted(){
// vue loads the html file to generate the template, which loads the memory and renders the page.
// console.log(document.getElementById('hh3').innerHTML);
},
beforeUpdate(){
//Modify the vue component, but it is not applied to the page before calling.
// console.log(this.msg +'this is vue';
// console.log(document.getElementById('hh3').innerHTML +' this is the page ');
},
updated(){
console.log(this.msg+'This is vue');
console.log(document.getElementById('hh3').innerHTML+'This is the page');
//Also called after vue and page modification.
}
});
vue sends ajax
Three kinds of ajax requests
get format
this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function(returndata){
console.log(returndata);
console.log(returndata.body.errcode);
});
<div id="box">
<input type="button" value="get request" @click='ajaxget'>
<input type="button" value="post request" @click='ajaxpost'>
<input type="button" value="jsonp request" @click='ajaxjsonp'>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-resource-1.3.4.js"></script>
<script>
var a = new Vue({
el:'#box',
data :{},
methods:{
ajaxget(){
this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function(returndata){
console.log(returndata);
console.log(returndata.body.errcode);
});
},
ajaxpost(){
this.$http.post('http://jsonplaceholder.typicode.com/comments',{},{emulateJSON:true}).then(function(returndata){
console.log(returndata);
});
},
ajaxjsonp(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(function(data){
console.log(data.body[6].username )
console.log(data.body[3].phone )
});
},
},
});