VUE入门笔记,第二节

原创
2019/12/12 22:21
阅读数 66

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>
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部