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

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

内容简介：最近正好学习了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

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

查看所有标签

猜你喜欢:

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

码农书籍

The Algorithmic Beauty of Plants

Przemyslaw Prusinkiewicz、Aristid Lindenmayer / Springer / 1996-4-18 / USD 99.00

Now available in an affordable softcover edition, this classic in Springer's acclaimed Virtual Laboratory series is the first comprehensive account of the computer simulation of plant development. 150......一起来看看《The Algorithmic Beauty of Plants》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HEX CMYK 转换工具

HEX CMYK 互转工具