目錄
過濾器filter
<body>
<div id="app">
<!--過濾器也可以在調用的時候傳遞多個參數-->
<!--過濾器也可以多次調用-->
<p>{{ msg | msgFormat('瘋狂'+1, '123') | test }}</p>
</div>
</body>
<script>
//定義一個vue全局過濾器，msgFormat
Vue.filter('msgFormat', function(msg, arg, arg2) {
//字符串的replace方法，第一個參數還可以寫正則
return msg.replace(/單純/g, arg + arg2);
});
Vue.filter('test', function(msg) {
//字符串的replace方法，第一個參數還可以寫正則
return msg + '=====';
});
var vm = new Vue({
el: "#app",
data: {
msg: "曾經，我也是一個單純的少年，我很單純"
},
methods: {
}
})
</script>
vue-resource發送http請求
導入vue.js、vue-resource.js注意：vue-resource依賴vue，所以注意先後順序
<div id="app">
<input type="button" @click="getData" value="get請求" />
<input type="button" @click="postData" value="post請求" />
<input type="button" @click="jsonpData" value="jsonp請求" />
</div>
<script>
function jsonFc(data){
console.log("jsonp" + data);
console.log(data.name);
console.log(data.age);
}
var vm = new Vue({
el:"#app",
data:{
},
methods:{
getData(){//發起get請求，通過.then來設置回調函數
this.$http.get("http://127.0.0.1:3000/jsonpData").then(function(result){
//成功回調
console.log(result);
},function(err){
//失敗回調
})
},
postData(){//post請求
//手動發起的post請求默認沒有表單格式，有的服務器處理不了
//通過post方法第三個參數，設置提交的內容爲普通表單格式
this.$http.post("/url", {}, {emulateJSON:true}).then(result=>{
//成功回調
console.log(result);
},err=>{
//失敗回調
})
},
jsonpData(){//jsonp
this.$http.jsonp("http://127.0.0.1:3000/jsonpData").then(result=>{
console.log(result);
},err=>{
})
}
}
})
</script>
axios發送http請求
注意導入vue.min.js和axios.min.js
GET方式：
axios
.get('url')
.then(response => (
this.info = response.data.sites
))
.catch(function (error) { // 請求失敗處理
alert(error);
});
POST方式：
axios.post('url',{
rows : json
}).then(function(resp){
}).catch(function(e){
//請求失敗處理
});
post方式後臺獲取參數爲null解決辦法：
axios.post('url','keys=' + evictStr).then(function(resp){
console.log(resp);
}).catch(function(e){
});
VUE生命週期
VUE生命週期鉤子函數
<div id="app">
<input type="button" value="修改msg" @click="msg = 'no'" />
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'ok'
},
methods:{
show(){
console.log("執行了show()");
}
},
beforeCreate(){
//這是我們遇到的第一個生命週期函數，表示實例完全被創建出來之前會執行。
//在本方法中，data和methods都未被初始化
//console.log(this.msg);//undefined
//this.show();//方法也未被初始化
},
created(){
//這是遇到的第二個生命週期函數
//在本方法中，data和methods都已經初始化好了
//如果要調用methods和data，最早應該是在created方法中操作。
//console.log(this.msg);ok
//this.show();//執行了show()
},
beforeMount(){
//這是遇到的第三個生命週期函數，表示模板已經編譯完成了，但是尚未把模板渲染到頁面中
//beforeMont執行的時候，頁面中的元素，還沒有真正替換過來，只是之前寫的一些模板字符串
//console.log(document.getElementById("h3").innerText);//{{ msg }}
},
mounted(){
//這是遇到的第四個生命週期函數，表示內存中的模板已經真實的掛載到頁面中，用戶已經可以看到渲染好的頁面了
//注意：mounted是實例創建期間的最後一個生命週期函數，當執行mounted已經完全創建好了，
//如果要通過某些插件操作頁面上的dom節點，最早要在mounted中進行操作
//此時如果沒有其他操作的話，這個實例就靜靜地躺在內存中一動不動
//此時組件已經脫離了創建階段，進入了運行階段。
//console.log(document.getElementById("h3").innerText);//ok
},
//接下來的是運行中的兩個事件
beforeUpdate(){
//數據被更新了觸發這個事件，這時候表示我們的界面還沒有被更新
console.log("beforeUpdate界面上元素的內容" + document.getElementById("h3").innerText);//ok
console.log("beforeUpdatedata中的內容" + this.msg);//no
//得出結論：當執行beforeUpdate時，頁面中的元素是舊的，此時data中數據是新的
},
updated(){
//update執行的時候，頁面和data數據，已經保持一致了
console.log("updated界面上元素的內容" + document.getElementById("h3").innerText);//no
console.log("updateddata中的內容" + this.msg);//no
},
beforeDestroy(){
//當執行beforeDestroy,vue實例從運行階段進入了銷燬節點。
//當執行beforeDestroy的時候，此時實例身上所有data、methods過濾器等等，都處於可用狀態。
},
destroyed(){
//當執行destroyed時候，組件已經被完全銷燬了，此時組件中所有的data、methods等都不可用。
}
})
</script>
自定義指令
<div id="app">
<p>頁面載入時，input 元素自動獲取焦點：</p>
<input v-focus>
</div>
<script>
// 註冊一個全局自定義指令 v-focus
/*Vue.directive('focus', {
// 當綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})*/
// 創建根實例
new Vue({
el: '#app',
directives: {
// 註冊一個局部的自定義指令 v-focus
focus: {
// 指令的定義
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
watch
<div id="app">
<input type="text" v-model="firstname"/>+
<input type="text" v-model="lastname" />=
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
},
watch:{
//使用watch監視data 中指定數據的變化，觸發這個watch
firstname:function(newVal, oldVal){
this.fullname = newVal + '-' + this.lastname;
},
lastname:function(newVal){
this.fullname = this.firstname + '-' + newVal;
}
}
})
</script>
computed
<div id="app">
<input type="text" v-model="firstname"/>+
<input type="text" v-model="lastname" />=
<input type="text" v-model="fullname" />
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstname:'',
lastname:''
},
methods:{
},
computed:{
//在這裏可以定義一些屬性，這些屬性叫做計算屬性，
//計算屬性本質就是一些方法，只不過我們在使用這些計算屬性的時候，是把它們的名稱直接當做屬性來使用
//並不會把計算屬性，當做方法去調用
//注意：計算屬性，在引用的時候，一定不要加小括號()去調用， 直接把它當做普通屬性去使用
//注意：只要計算屬性， 這個function內部所用到的任何data中的數據發生變化，就會立即重新計算屬性值
//注意：計算屬性的求值結果，會被緩存起來，方便下次直接使用；如果計算屬性中所依賴的所有數據，都沒有發生過變化，則不會重新計算求值
fullname:function(){
console.log("ok");
return this.firstname + '-' + this.lastname;
}
}
})
</script>