本文详细介绍了VUE.js的基础知识，包括数据绑定、表格数据管理、过滤器、按键修饰符、自定义指令、生命周期和使用vue-resource进行API调用。通过具体案例，深入浅出地讲解了VUE.js在实际项目中的应用。
VUE入门笔记，第二节
一、总结以上:实例-表格列表
【目标：实现表格数据的添加、删除和过滤筛选】
【解决方案】
<!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>表格列表</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.tableStyle {
margin: 20px auto;
width: 500px;
border-collapse: collapse;
}
.tableStyle tr>th,td{
width: 60px;
height:50px;
text-align: center;
}
.search {
margin: 50px auto;
width:730px;
}
</style>
</head>
<body>
<div id="app" >
<div class="search">
id: <input type="text" name="id" v-model="id">
name: <input type="text" name="name" v-model="name">
<input type="button" value="添加" @click="add(id,name)">
search: <input type="text" name="search" v-model="keywords">
</div>
<table class="tableStyle" border="1">
<tr>
<th>id</th>
<th>name</th>
<th>cTime</th>
<th>操作</th>
</tr>
<!-- <tr v-for="item in list" v-bind:key="item.id"> -->
<tr v-for="item in search(keywords)" v-bind:key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="http://www.baidu.com" @click.prevent="remove(item.id)">删除</a></td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
id: "",
name: "",
keywords: "",
list: [
{id:1,name:"宝马",ctime:new Date()},
{id:2,name:"奔驰",ctime:new Date()}
]
},
methods:{
add:function(id,name){
let newArray = {id:id,name:name,ctime:new Date()};
this.list.push(newArray);
},
remove:function(id){
let newList = new Array();
this.list.forEach((item,index)=>{
if(item.id!=id){
newList.push(item);
}
});
this.list = newList;
},
search(keywords){
let newList = new Array();
this.list.forEach((item,index)=>{
if(item.name.indexOf(keywords)!=-1){
newList.push(item);
}
});
return newList;
}
}
});
</script>
</body>
</html>
结果：
二、过滤器
1、全局过滤器
【目标：将河北替换成邯郸】
【解决方案】
<!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>过滤器vm.filter</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat }}</p>
</div>
<script>
//定义一个vue全局过滤器，过滤器名称叫做msgFormat
//function第一个参数已经被定义死了，必须是过滤器管道符前面 传递过来的数据
Vue.filter('msgFormat',function(msg){
return msg.replace("河北","邯郸");
});
var vm = new Vue({
el: '#app',
data:{
msg: "我是河北人，我现在在北京"
}
});
</script>
</body>
</html>
2、私有过滤器
<!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>过滤器vm.filter</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat("全局") }}</p>
</div>
<hr>
<div id="app2">
<p>{{ msg | msgFormat("私有") }}</p>
</div>
<script>
//定义一个vue全局过滤器，过滤器名称叫做msgFormat
//function第一个参数已经被定义死了，必须是过滤器管道符前面 传递过来的数据
Vue.filter('msgFormat',function(msg,flag){
console.log(flag);
return msg.replace("河北","邯郸");
});
var vm = new Vue({
el: '#app',
data:{
msg: "我是河北人，我现在在北京"
}
});
var vm2 = new Vue({
el: '#app2',
data:{
msg: "我是河北人，我现在在北京"
},
methods:{
},
filters:{ //定义私有过滤器，两个条件： 过滤器名称、处理函数
//过滤器调用的时候，采用就近原则。如果私有过滤器和全局过滤器名称一致，
//这时候优先调用私有过滤器
msgFormat:function(msg,flag){
console.log(flag);
return msg.replace("北京","石家庄");
}
}
});
</script>
</body>
</html>
三、按键修饰符
【目标：将案例-表格列表中 的添加按钮，改成name按回车键直接添加】
【知识点：】
常用的按键修饰符：
.enter #按回车键
.tab #按tab键
.delete #按delete键
.esc #按esc键
.space #按回车键
.up #按↑键
.down #按↓键
.left #按←键
.right #按→键
其他按键需要自定义，或者直接用键盘对应的按键编码使用
如：Vue.config.keyCodes.f2= 113; 将按键编码为113的f2键 自定义为f2
【解决方案】
<!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>按键修饰符以及自定义</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.tableStyle {
margin: 20px auto;
width: 500px;
border-collapse: collapse;
}
.tableStyle tr>th,td{
width: 60px;
height:50px;
text-align: center;
}
.search {
margin: 50px auto;
width:730px;
}
</style>
</head>
<body>
<div id="app" >
<div class="search">
id: <input type="text" name="id" v-model="id">
<!--添加按键修饰符enter-->
name-按键修饰符: <input type="text" name="name" v-model="name" @keyup.enter="add(id,name)">
name-自定义按键修饰符: <input type="text" name="name" v-model="name" @keyup.f2="add(id,name)">
<input type="button" value="添加" @click="add(id,name)">
search: <input type="text" name="search" v-model="keywords">
</div>
<table class="tableStyle" border="1">
<tr>
<th>id</th>
<th>name</th>
<th>cTime</th>
<th>操作</th>
</tr>
<!-- <tr v-for="item in list" v-bind:key="item.id"> -->
<tr v-for="item in search(keywords)" v-bind:key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="http://www.baidu.com" @click.prevent="remove(item.id)">删除</a></td>
</tr>
</table>
</div>
<script>
Vue.config.keyCodes.f2= 113;
var vm = new Vue({
el: "#app",
data:{
id: "",
name: "",
keywords: "",
list: [
{id:1,name:"宝马",ctime:new Date()},
{id:2,name:"奔驰",ctime:new Date()}
]
},
methods:{
add:function(id,name){
let newArray = {id:id,name:name,ctime:new Date()};
this.list.push(newArray);
},
remove:function(id){
let newList = new Array();
this.list.forEach((item,index)=>{
if(item.id!=id){
newList.push(item);
}
});
this.list = newList;
},
search(keywords){
let newList = new Array();
this.list.forEach((item,index)=>{
if(item.name.indexOf(keywords)!=-1){
newList.push(item);
}
});
return newList;
}
}
});
</script>
</body>
</html>
四、自定义指令
1、自定义全局指令
【目标：自定义指令，让input框自动获取焦点】
【知识点：】
//focus是指令名称，但用的时候要用 <input v-focus>
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
});
【钩子】
##bind：只调用一次，指令第一次绑定到元素时调用【只调用1次】---一般是样式，如css样式 color font-size等
##inserted：表示元素插入到DOM中的时候，就会执行【只调用1次】--一般是行为，如js click keyup等
##updated:当window更新的时候，就会执行【制定多次】
如果钩子是bind或update可以简写
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
【参数】
//el是指令绑定的元素，可以用来直接操作原生DOM。默认第一个参数
//binding：
// name: 指令名称 如focus
// value: 指令绑定的值 如blue 2
// expression：指令绑定的表达式 如'blue' ‘1+1’
...
【测试】
<!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>自定义全局指令</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app" >
id:<input type="text" v-color="'red'" >
name:<input type="text" v-focus>
</div>
<script>
//inserted一般绑定js行为
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
});
//bind一般绑定css样式
Vue.directive('color',{
bind:function(el,binding){
console.log(el);
console.log("name:"+binding.name+" value:"+binding.value+" expression:"+binding.expression);
el.style.color=binding.value;
}
});
var vm = new Vue({
el: "#app",
data:{
},
methods:{
}
});
</script>
</body>
</html>
2、自定义私有指令
【知识点】
指令：
directives:{ //私有指令 指令名 处理函数
'fontcolor': {
bind: function (el,binding){
console.log(binding.value);
el.style.color='red';
}
}
}
如果钩子是bind和update可以简写如下：
directives:{ //私有指令 指令名 处理函数
'fontsize':function(el,binding){
el.style.fontSize=parseInt(binding.value)+"px";
}
}
【方案：】
<!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>自定义私有指令</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app" >
id:<input type="text" v-color="'red'" >
name:<input type="text" v-focus>
<a v-fontcolor="'red'" v-fontsize="30">{{ msg }}</a>
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
});
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value;
}
});
var vm = new Vue({
el: "#app",
data:{
msg:'你好，我是私有指令'
},
methods:{
},
directives:{ //私有指令 指令名 处理函数
'fontcolor': {
bind: function (el,binding){
console.log(binding.value);
el.style.color='red';
}
},
'fontsize':function(el,binding){ //如果钩子是bind和update可以简写如下
el.style.fontSize=parseInt(binding.value)+"px";
}
}
});
</script>
</body>
</html>
五、VUE的生命周期
【知识点：】
VUE生命周期分类：
1、创建期间的生命周期函数
beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性
created:实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始编译模板
beforeMount:此时已经完成了模板的便已，但是还没有挂载到页面中
mounted：此时，已经将便已好的模板，挂载到了页面制定的容器中显示
2、运行期间的生命周期函数
beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据
还是旧的，应为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时data中的状态值 和 洁面上显示的数据都已经完成了
更新，洁面已经被重新渲染好了
3、销毁期间的生命周期函数：
beforeDestory:实例销毁之前调用。在这一步，实例仍然完全可用
destroyed:vue实例销毁后调用。调用会后，vue实例指示的所有东西都会解绑，所有的时间监听器
会被移除，所有的子实例也会被销毁
<!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>vue的生命周期</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改MSG" @click="msg='No'">
<p id="h3">{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
msg: 'ok'
},
methods:{
show: function(){
console.log('执行了show方法');
}
},
//1、创建期间的生命周期函数
beforeCreate() {//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
// console.log(this.msg);
// this.show();
//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化，所以都不能够被调用
},
created() {//这是遇到的第二个生命周期函数
// console.log(this.msg);
// this.show();
//注意：在created中data和methods都已经被初始化好了
//如果要调用methods中的方法，或操作data中的数据，最早，只能在created中操作。
},
beforeMount() {//这是遇到的第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
//console.log(document.getElementById("h3").innerText); //结果是 ： {{ msg }}
//注意：在beforeMount被执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted() {//这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
//console.log(document.getElementById("h3").innerText); //结果是 ： ok
//注意： mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例
//已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中
},
//2、运行期间的生命周期函数（点击更新MSG按钮）
beforeUpdate() {//这个时候表示我们的界面还没有被更新，但是数据已经在内存中被更新了
//console.log('界面上的内从:'+document.getElementById("h3").innerText);
//console.log('data中的msg数据：'+this.msg);
//结论：当执行beforeUpdate的时候，界面中的显示数据还是 旧的OK，此时data数据是最新的No
//页面尚未和最新的数据保持同步
},
updated() {
//console.log('界面上的内从:'+document.getElementById("h3").innerText);
//console.log('data中的msg数据：'+this.msg);
//updated事件执行的时候，页面和data数据已经保持同步了
},
//3、销毁期间的生命周期函数：
beforeDestroy() {
//当执行beforeDestroy 生命周期函数的时候，vue实例已经从运行阶段，进入到了销毁阶段。
//当执行beforeDestroy的时候，实例上所有的data和methods，以及过滤器，指令...仍处于可用状态，
//此时还没有真正执行销毁的过程
},
destroyed() {
//当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中所有的 数据 方法 指令 过滤器...
//都已经不可用了
},
});
</script>
</body>
</html>
六、vue-resource
vue-resource是一个第三方包，也可以使用axios等实现数据的请求【官网地址】
【目标：vue-resource实现get、post、jsonp请求】
【常用方法：】
get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])
【案例：】
<!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>vue-resource第三方组件</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get按钮" @click="dataGet">
<input type="button" value="postget按钮" @click="dataPost">
<input type="button" value="jsonp按钮" @click="dataJsonP">
<p id="h3">{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
addr1: 'xxxxxxxxxxxxxxxx',
addr2: 'xxxxxxxxxxxxxxxx',
addr3: 'xxxxxxxxxxxxxxxx'
},
methods: {
dataGet() {
console.info('get')
this.$http.get(this.addr1, {
params: {
name: '1'
},
headers: {
token: 'a'
}
}).then(res => {
console.info(res.data)//返回成功函数
}, error => {
console.info(error)//返回失败函数
})
},
dataPost() {
console.info('post')
this.$http.post(this.addr2, {
name: '1'
}, {
headers: {
token: 'a'
}
}).then(res => {
console.info(res.data)//返回成功函数
}, error => {
console.info(error)//返回失败函数
})
},
dataJsonP() {
console.info('jsonp')
this.$http.jsonp(this.addr3, {
params: {
name: '1'
}
}).then(res => {
console.info(res.data)//返回成功函数
}, error => {
console.info(error)//返回失败函数
})
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
