目录
过滤器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>