热搜：编程 Python Microsoft 编程语言 C++

首页> 前端开发 > Vue > 正文

vue详解

发布时间：2024-12-09 02:38:32 来源：网络

.

1.VueJS介绍 1.1什么是VueJS Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的

1.VueJS介绍

1.1什么是VueJS

Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

官网:https://cn.vuejs.org/

1.2特点

易用
灵活
高效

1.3MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图UI 和业务逻辑分开. MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷.

2.快速入门

2.1快速入门

【需求】:使用vue，对message赋值，并把值显示到页面中。

【步骤】:

创建工程(war)

引入js

如图，拷贝所示的js文件到工程中

创建demo01.html,引入js,创建vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-vue入门</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--使用插值表达式展示-->
    {{message}}
</div>

<script>
    //创建一个Vue实例(VM)
    new Vue({
        //表示当前vue对象接管了div区域
        el: '#app',

        //定义数据
        data: {
            message: 'hello world'
        }
    });
</script>
</body>
</html>

data ：用于定义数据。

methods：用于定义的函数，可以通过 return 来返回函数值。

2.2插值表达式{{}}

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新.

Vue.js 都提供了完全的 JavaScript 表达式支持。


{{ number + 1 }}
{{flag?'true':'false'}}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。


<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (flag) { return message } }}

第二章-VueJS 常用系统指令

1. @或者v-on

1.1@click

说明: 点击事件(等同于v-on:click)

【需求】：点击按钮事件，改变message的值

demo02.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_v-on:click</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <br/>
        <input type="button" value="点击改变" @click="fun01"/>

    </div>
    <script>
        //创建vue实例
        new Vue({
            //表示当前vue对象接管了div区域
            el:'#app',

            //定义数据
            data:{
                message:'hello world'
            },
            //定义函数
            methods:{
                fun01:function () {
                    this.message = '你好,世界...';
                }
            }
        });

    </script>
</body>
</html>

1.2@keydown

说明: 键盘按下事件(等同于v-on:keydown)

【需求】：对文本输入框做校验，使用键盘按下事件，如果按下0-9的数字，正常显示，其他按键则阻止事件执行。

demo03.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--$event:为时间对象-->
        <input type="text" value="hello.." @keydown="fun01($event)"/>
    </div>

    <script>
        //创建一个Vue实例(VM)
        new Vue({
            el: '#app', //表示当前vue对象接管了div区域
            data:{
            },
            methods:{
                fun01:function (e) {
                    var keyCode=  e.keyCode;
                    if (!(keyCode >= 49 && keyCode<=57)){
                        //阻止事件执行
                        e.preventDefault();
                    }
                }
            }
        });
    </script>
</body>
</html>

1.3@mouseover

说明:鼠标移入区域事件(等同于v-on:mouseover)

【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

【需求2】：在div中添加<textarea>，鼠标移动到<textarea>，再弹出一个窗口

demo04.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <style>
        .box {
            width: 300px;
            height: 400px;
            border: 1px solid red;
        }
        .textarea{
            width: 200px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" @mouseover="fun01">
        div
        <textarea class="textarea" @mouseover="fun02($event)">
            textarea
        </textarea>
    </div>
</div>

<script>
    //创建一个Vue实例
    new Vue({
        el: '#app',
        data: {},
        methods: {
           fun01:function () {
               alert("div");
           },
            fun02:function (e) {
                alert("textarea");
                e.stopPropagation(); //停止冒泡
            }
        }
    });
</script>
</body>
</html>

1.4事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如我们上面使用的：event.preventDefault() 和event.stopPropagation()。

这样写有些麻烦,Vue.js提供了通过由点(.)表示的指令后缀来调用修饰符。


.stop     // 停止触发，阻止冒泡修饰符 
.prevent  // 阻止事件发生，阻止事件默认行为
.capture  // 捕获 
.self     // 只点自己身上才运行
.once     // 只执行一次

【需求】：1.在表单中，点击“提交”按钮，阻止执行（.prevent）；2.在div里面放置超链接，点击url，阻止冒泡（.stop）


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

</head>
<body>
<div id="app">
    <!--1.在表单中，点击“提交”按钮，阻止执行（.prevent）-->
    <form action="http://www.itcast.cn" method="post" @click.prevent>
        <input type="submit"/>
    </form>

    <!--2.在div里面放置超链接，点击url，阻止冒泡（.stop）-->
    <div @click="fun01">
        <a href="http://www.baidu.com" @click.stop>百度</a>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {
            fun01:function () {
                alert('百度');
            }
        }
    });
</script>
</body>
</html>

1.5按键修饰符

我们1.3通过键盘ascii码来阻止执行,这样相对比较麻烦. Vue 为我们提供了允许在监听键盘事件时添加按键修饰符.


.enter  // 表示键盘的enter键
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

【需求】：在输入框中，如果输入回车键，就执行弹出窗口事件（可用于网页登录）。


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

</head>
<body>
<div id="app">
    <input type="text" @keydown.enter="fun01"/>
</div>

<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {
            fun01:function () {
                alert('点击了enter');
            }
        }
    });
</script>
</body>
</html>

2.v-text与v-html

v-text：输出文本内容，不会解析html元素

v-html：输出文本内容，会解析html元素

【需求】：使用message属性赋值 <h1>hello world<h1> ，查看页面输出内容。


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

</head>
<body>
<div id="app">
    <div v-html="message"></div>
    <div v-text="message"></div>
    <div></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message:"<h1>hello world</h1>"
        },
        methods: {

        }
    });
</script>
</body>
</html>

3.v-bind

插值语法不能作用在HTML 属性上，遇到这种情况应该使用 v-bind指令

【需求】：使用vue定义变量ys，对页面中的字体标签color属性赋值。

使用vue定义变量info，对页面中的超链接href属性赋值。


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

</head>
<body>
<div id="app">
    <font v-bind:color="ys">hello world</font>
    <a :href="info">百度</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ys:'red',
            info:'http://www.baidu.com'
        },
        methods: {

        }
    });
</script>
</body>
</html>

4.v-model

用于数据的绑定,数据的读取

【需求】：使用vue赋值json数据，并显示到页面的输入框中（表单回显）. 点击按钮，改变json数据，验证同时输入框的内容也发生改变。


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

</head>
<body>
<div id="app">
    用户名:<input type="text" v-model="user.username"><br>
    密码:<input type="text" v-model="user.password"><br>
    <input type="button" @click="fun01" value="按钮">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                username: 'zs',
                password: '123456'
            }
        },
        methods: {
            fun01: function () {
                this.user = {
                    username: 'ls',
                    password: '666666'
                }
            }
        }
    });
</script>
</body>
</html>

5. v-for

用于操作array/集合，遍历

【需求】：使用vue赋值list集合，分别存放数组和集合，并把数据遍历到页面上的<li>标签中。


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

</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in array">
            {{index}}---{{item}}
        </li>
        <hr/>
        <li v-for="(stu,index) in students">
            {{index}}---{{stu.name}}---{{stu.age}}
        </li>


    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            array: ['aaa', 'bbb', 'ccc'],
            students: [
                {
                    name: 'zs',
                    age: '18'
                },
                {
                    name: 'ls',
                    age: '19'
                }
            ]
        },
        methods: {}
    });
</script>
</body>
</html>

6.v-if与v-show

v-if是根据表达式的值来决定是否渲染元素(标签都没有了)

v-show是根据表达式的值来切换元素的display css属性(标签还在)

【需求】：使用vue赋值flag变量（boolean类型），用来判断<div>元素中的内容是否显示。


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

</head>
<body>
<div id="app">
    <span v-if="flag">hello</span>
    <span v-show="flag">你好</span>
    <input type="button" value="开关" @click="fun01"/>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            fun01: function () {
                this.flag = !this.flag;
            }
        }
    });
</script>
</body>
</html>

第三章-VueJS生命周期

1.什么是VueJS生命周期

就是vue实例从创建到销毁的过程.

每个 Vue 实例在被创建到销毁都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的

el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据与view的绑定，即数据驱动

2.vuejs生命周期的演示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_vue入门</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>

<script>
    /**
     * - beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
     - created ：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）
     - beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
     el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创
     建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
     - mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们
     就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并
     进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
     - beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还
     没有发生改变
     - updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到
     dom上面，完成更新
     - beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据
     与view的绑定，即数据驱动
     */
   var vue =  new Vue({
        //表示当前vue对象接管了div区域
        el: '#app',
        //定义数据
        data: {
            message: 'hello word',
        },
        //beforeCreate: 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
        beforeCreate: function () {
            showMsg('---beforeCreate---', this);
        },
        //created ：数据已经绑定到了对象实例，但是还没有挂载对象
        created: function () {
            showMsg('---created---', this);
        },
        //beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
        beforeMount: function () {
            showMsg('---beforeMount---', this);
        },
        //mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
        mounted: function () {
            showMsg('---mounted---', this);
        },

        //beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据与view的绑定，即数据驱动
        beforeDestroy: function () {
            showMsg('---beforeDestroy---', this);
        }
    });



    function showMsg(msg, obj) {
        console.log(msg);
        console.log("data:" + obj.message);
        console.log("el元素:" + obj.$el);
        console.log("元素的内容:" + document.getElementById("app").innerHTML);
    }

    //vue的销毁
    vue.$destroy();

</script>
</body>
</html>