【一文学会】vue.js入门到放弃

栏目: JavaScript · 发布时间: 5年前

内容简介：最近正好学习了vue.js就准备将此记录下来，希望能给各位做个参考，当然因为技术有限所以出现很多错误，烦请大佬们能够不吝赐教，此篇博客会一直保持更新，以后关于vue就在本篇博文上填加内容了。Vue.js是一个渐进式框架(主张少：调用多少算多少，没有赠品)

最近正好学习了vue.js就准备将此记录下来，希望能给各位做个参考，当然因为技术有限所以出现很多错误，烦请大佬们能够不吝赐教，此篇博客会一直保持更新，以后关于vue就在本篇博文上填加内容了。

VueJs简单入门

1.1、vuejs概述

Vue.js是一个渐进式框架(主张少：调用多少算多少，没有赠品)

【一文学会】vue.js入门到放弃

1.2 mvvm模式

mvc的改进版，主要目的是分离视图（View）和模型（Model）

【一文学会】vue.js入门到放弃

1.3 vuejs快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs-2.5.16.js"></script>
</head>
<body> 

    <div id="app">
        {{message}}
    </div> 

   <script>
       new Vue({
           el:"#app",//表示当前vue接管div区域
           data:{
               message:'Hello World'//结尾不写分号
           }
       }) 
   </script>

</body>
</html>

主要分为两部分，一部分网页内容使用插值表达式{{}}将要显示的内容变量名圈起来，一部分定义vue，el是不可或缺的，代表需要圈起来给vue管理的区域，另外的内容后面实例中慢慢述说。

2、常用系统指令(加入和普通js的对比)

v-on 简写’@ ‘ 可以用 v-on 指令监听 DOM 事件，例如：v-on:click
v-text 与 v-html 对应js的innerText和innerHTML
v-bind 简写’:’ 属性修饰
v-model 获取对象的属性如：student.name
v-for 循环
v-if 与 v-show v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

2.1.1 v-on:click

js实现代码：

     <div id="app">
        hello
    </div>
    <button onclick="change()">点击改变</button>
    <script>
        function change() {
            document.getElementById("app").innerText="你好"
        }
    </script>

*vue实现代码： *

    <div id="app">
        {{message}}
    </div>
    <button v-on:click="fun1('good')">点击改变</button>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            methods:{
                fun1:function (msg) {
                    this.message=msg;
                }
            }
        })
    </script>

主要做了一个带参的方法，方法内部其实和普通方法一样的，随意定义逻辑就好。

2.1.2 v-on:keydown

*js实现代码： *

        <div id="app">
            <input type="text" onkeydown="showKeyCode()" />
        </div>

    <script>
        //view model
        function showKeyCode() {

            var keyCode=event.keyCode;
            if (keyCode < 48 || keyCode > 57) {
                //不让键盘的按键起作用
                event.preventDefault();
            }
            if (keyCode == 13) {
                alert("你按的是回车")
            }
        }
    </script>

vue实现代码：

        <div id="app">
            <input type="text" v-on:keydown="fun($event)">
        </div>

    <script>
        //view model

        new Vue({
            el:"#app",
            methods:{
                /* $event 是vue中的事件对象，和我们传统js的event对象是一样的 */
                fun:function (event) {
                    if (keyCode < 48 || keyCode > 57) {
                        //不让键盘的按键起作用
                        event.preventDefault();
                    }
                }
            }
        });
        }
    </script>

本实例主要做了输入框内只能输入数字的方法，输入其他键盘自动不起作用。具体event事件后面会有叙述。

2.1.3 v-on:mouseover

js实现代码：

        <div id="app">
            <div onmouseover="divmouseover()" id="div">
                <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
            </div>
        </div>

    <script>
        //view model
        function divmouseover() {
            alert("鼠标移动到div上");
        }
        function textareamouseover() {
            alert("鼠标移动到了text上")
            event.stopPropagation();   //阻止传递事件，即鼠标移动到文本域中，触发文本         域的事件，但是不触发他的父标签的方法。
        }
    </script>

    //css自己添加到合适位置
    <style>
            #div {
                background-color: red;
            }
    </style>

vue实现代码：

        <div id="app">
            <div @mouseover="fun1" id="div">
                <textarea @mouseover="fun2($event)">这是一个文件域</textarea>
            </div>      
        </div>

    <script>
        //view model
        new Vue({
            el:"#app",
            methods:{
                fun1:function () {
                    alert("鼠标停在div上")
                },
                fun2:function (event) {
                    alert("鼠标停在text上");
                    event.stopPropagation();
                }

            }
        });

    </script>

经过三个常用实例，应该可以了解到v-on的使用方法了吧，举一反三，这可是举三岂不是全部精通了。

2.1.4 按键修饰符(常用按键在v-on的别名）

全部的按键别名：

.enter 回车
.tab tab
.delete 删除和退格
.esc esc
.space 空格
.up 方向上
.down 方向下
.left 方向左
.right 方向右
.ctrl ctrl
.alt alt
.shift shift
.meta 很多键盘没有的键

随便举个按键例子吧_回车键

    <div id="app">
        <input type="text" v-on:keyup.enter="fun1">
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fun1:function () {
                    alert("你按了回车键")
                }
            }
        })
    </script>

2.2 v-text与v-html

这边就不对比了，v-text相当于jq的text()，v-html相当于jq的html()，很简单的。一个会解析标签，一个原样输出这就不用说了吧。

     <div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:"<h1>hello</h1>"
            }
        })
    </script>

2.3 v-bind

    <div id="app">
        <font size="5" v-bind:color="ys1">{{message}}</font>
        <font size="5" :color="ys1">{{message2}}</font>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"第一个font",
                message2:"第二个font",
                ys1:"red",
                ys2:"blue",  
            }
        });
    </script>

2.4 v-model 获取对象属性

            <div id="app">
                    姓名：<input type="text" id="username" v-model="user.username">
                    <input type="button" @click="fun" value="获取名字">
            </div>
            <script>
                    new Vue({
                        el:"#app",
                        data:{
                            user:{username:"",password:""}
                        },
                        methods:{
                            fun:function () {
                                this.user.username="alex";
                            }
                        }
                })
            </script>

2.5 v-for

操作array

    <div id="app">
        <ul>
            <li v-for="(item) in arr">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5]
            }
        })
    </script>

操作对象（很奇怪的一点是key不是最先获取到的，value才是，尚未理解）

    <div id="app">
        <ul>
            <li v-for="(key,value) in product">{{key}}=={{value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                product:{id:1,name:"电脑",price:100}
            }
        })
    </script>

操作对象数组

    <div id="app">
        <table border="1">
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>价格</td>
            </tr>
            <tr v-for="p in products">
                <td>
                    {{p.id}}
                </td>
                <td>
                    {{p.name}}
                </td>
                <td>
                    {{p.price}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                products:[
                    {id:1,name:"张三",price:500},
                    {id:2,name:"李四",price:200},
                    {id:3,name:"王五",price:100}
                ]
            }
        })
    </script>

2.6 v-if 与 v-show(真没看出来有什么差别）

v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

    <div id="app">
        <span v-if="flag">百度</span>
        <span v-show="flag">阿里</span>
        <button @click="toggle">切换</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                toggle:function () {
                    this.flag=!this.flag;
                }
            }
        })
    </script>

3 生命周期(了解)

先放上一张官方图片，对应的内容仔细看还是挺简单的，当然如果后期用到，深入理解会很难的，不过我们还是来简单的了解一下就好了。后面放上一张运行时的控制台输出内容，以及运行的代码，代码都是只包含body以及script所以引用js这些请自己进行。

【一文学会】vue.js入门到放弃

我们可以看到在创建前状态只进行了new vue和生命周期初始化和事件初始化，当前元素和数据都没有值，创建完毕状态就可以看出，vue是先有数据然后在寻找挂载点，这就很好解释了为什么要先new vue然后再在界面中使用插值符{{}}，（原先自己都是先插值）然后再new vue,之后就是挂载过程了，介于知识有限，所以以后使用过程中再详细解释，只需要知道几个阶段：创建前->创建后->挂载前->挂在后->[更新数据前后(可选)]->销毁前->销毁后

<body>
<div id="app">
    <h1>{{message}}</h1>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "Vue生命周期"
        },
        beforeCreate: function () {
            console.group('------beforeCreate创建前状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
            console.log("%c%s", "color:red", "message: " + this.message)

        },
        created: function() {
            console.group('------created创建完毕状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function() {
            console.group('------beforeMount挂载前状态------');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function() {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }

    })

</script>
</body>

作者：夕花思影

原文：https://blog.csdn.net/liyunfu233/article/details/91885064

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

码农翻身

刘欣 / 电子工业出版社 / 2018-6-1 / 69.00元

《码农翻身》用故事的方式讲解了软件编程的若干重要领域，侧重于基础性、原理性的知识。《码农翻身》分为6章。第1章讲述计算机的基础知识；第2章侧重讲解Java的基础知识；第3章偏重Web后端编程；第4章讲解代码管理的本质；第5章讲述了JavaScript的历史、Node.js的原理、程序的链接、命令式和声明式编程的区别，以及作者十多年来使用各种编程语言的感受；第6章是作者的经验总结和心得体会，......一起来看看《码农翻身》这本书的介绍吧!

码农工具

【一文学会】vue.js入门到放弃

VueJs简单入门

1.1、vuejs概述

1.2 mvvm模式

1.3 vuejs快速入门

2、常用系统指令(加入和普通js的对比)

2.1.1 v-on:click

2.1.2 v-on:keydown

2.1.3 v-on:mouseover

2.1.4 按键修饰符(常用按键在v-on的别名）

2.2 v-text与v-html

2.3 v-bind

2.4 v-model 获取对象属性

2.5 v-for

2.6 v-if 与 v-show(真没看出来有什么差别）

3 生命周期(了解)

码农翻身

图片转BASE64编码

随机密码生成器

HTML 编码/解码