Vue.js快速入门

JokerDJ

发布于 2023-11-27 14:44:01

5080

文章被收录于专栏：JokerDJJokerDJ

Vue.js快速入门

VueJS介绍

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。Vue 的核心库只关注视图层 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。上手比较容易,

MVVM模式

MVVM是Model-View-ViewModel的简写它本质上就是MVC 的改进版 MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model） Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层它的核心是 MVVM 中的 VM，也就是 ViewModel ViewModel负责连接 View 和 Model，保证视图和数据的一致性

快速入门

1.在页面中引入vue的js文件。

<script src="js/vuejs-2.5.16.js"></script>

2.在页面中定义一个根节点。一般就是div

<div id="root">
    <input type="text" v-model="message">
    {{message}}
</div>

3.在js代码中初始化一个vue对象，基于上面的根节点初始化。

<script>
    //初始化Vue对象
    new Vue({
        //初始化vue对象的根节点
        el:"#root",
        //定义页面使用的模型数据js变量
        data:{
            message:"hello vue!"
        }
    });
</script>

<!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="root">
    <input type="text" v-model="message">
    {{message}}
</div>
</body>
<script>
    //初始化Vue对象
    new Vue({
        //初始化vue对象的根节点
        el:"#root",
        //定义页面使用的模型数据js变量
        data:{
            message:"hello vue!"
        }
    });
</script>
</html>

事件绑定

什么是事件

图形界面的操作系统都是事件驱动。系统中只要是有一个变化就会触发一个事件。 js也是事件驱动的。

单击事件绑定

原生JS

onclick="onClick()"

vuejs绑定

v-on:事件名称=处理方法
简写：@click=处理方法

示例绑定事件

<div id="root">
    <h1>{{message}}</h1>
    <button v-on:click="onClick()">点我</button>
    <button @click="onClick()">点我</button>
</div>

处理事件

<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"hello vue!"
        },
        methods:{
            onClick:function () {
                alert("你点了我");
                this.message = "你已经点击了按钮";
            }
        }
    });
</script>

<!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="root">
    <h1>{{message}}</h1>
    <button v-on:click="onClick()">点我</button>
    <button @click="onClick()">点我</button>
</div>
</body>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"hello vue!"
        },
        methods:{
            onClick:function () {
                alert("你点了我");
                this.message = "你已经点击了按钮";
            }
        }
    });
</script>
</html>

键盘事件

事件名称

keydown 在文本框中敲击回车键，会触发一个keydown。

概述

敲击键盘上任意按键都会触发keydown事件每个按键都有一个唯一的编号keycode 可以判断keycode是多少就可以判断出那个键按下。

示例事件绑定

<div id="root">
    <input type="text" @keydown="onKeydown($event)">
    <br>
    keycode:{{keyCode}}
</div>

处理事件

new Vue({
        el:"#root",
        data:{
            keyCode:0,
        },
        methods:{
            onKeydown:function (event) {
                var keyCode = event.keyCode;
                this.keyCode = keyCode;
                if (keyCode == 13) {
                    alert("你按下了回车键！");
                }
            }
        }
    });

<!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="root">
    <input type="text" @keydown="onKeydown($event)">
    <br>
    keycode:{{keyCode}}
</div>

</body>
<script>
    new Vue({
        el:"#root",
        data:{
            keyCode:0,
        },
        methods:{
            onKeydown:function (event) {
                var keyCode = event.keyCode;
                this.keyCode = keyCode;
                if (keyCode == 13) {
                    alert("你按下了回车键！");
                }
            }
        }
    });
</script>
</html>

按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值 vue 定义了一些按键修饰符, 可以直接使用监听,不需要再判断keycode

常用按钮修饰符

	.enter 
	.tab 
	.delete (捕获 “删除” 和 “退格” 键) 
	.esc 
	.space 
	.up 
	.down 
	.left 
	.right

示例

<div id="root">
    <input type="text" name="keyword" v-on:keydown.enter="enterKeyDown()">
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        methods:{
            enterKeyDown:function () {
                alert("回车时间触发");
            }
        }
    });
</script>

鼠标事件

事件名称

mousemove 当鼠标移动时就会触发事件

示例

<div id="root">
    <div id="testdiv"  @mousemove="onMouseMove($event)">
        X:{{X}},Y:{{Y}}
    </div>
</div>

处理事件

<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            X:0,
            Y:0
        },
        methods:{
            onMouseMove:function (event) {
                //取鼠标位置
                this.X = event.x;
                this.Y = event.y;
            }
        }
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<style>
    #testdiv{
        margin-left: 100px;
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
<div id="root">
    <div id="testdiv"  @mousemove="onMouseMove($event)">
        X:{{X}},Y:{{Y}}
    </div>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            X:0,
            Y:0
        },
        methods:{
            onMouseMove:function (event) {
                //取鼠标位置
                this.X = event.x;
                this.Y = event.y;
            }
        }
    });
</script>
</body>
</html>

事件修饰符

阻止事件默认传统阻止事件默认

事件修饰符

事件冒泡

数据绑定

插值

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

示例

<!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="root">
    {{1+2}}<br>
    {{'aaa'+'123'}}<br>
    {{3>2?true:false}}<br>
    {{user.username}}<br>
    {{user.password}}



</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            num:100,
            user:{username:"joker",password:"123"}
        },
        methods:{

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

v-text&v-html

v-text指令可以将变量的值原封不动的显示到页面的标签内部

示例

<!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="root">
    <div>{{content}}</div>
    <div v-text="content"></div>
    <div v-html="content"></div>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            content:"<h1>abc</h1>"
        },
    });
</script>
</body>
</html>

v-bind

v-bind只能将变量的值绑定到属性上当属性发生变化后，并不能改变变量的值

示例

<div id="root">
    <input type="text" v-bind:value="message">
    {{message}}<br>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"testData"
        }
    });
</script>

双向绑定

修改文本框中的内容，对应的变量的值也随之发生变化值变化时, 文本的内容随着变化

<div id="root">
    <input type="text" v-model="message">
    {{message}}<br>
    <button @click="testClick">点击</button>
</div>
<script>
    //初始化Vue对象
    new Vue({
        el:"#root",
        data:{
            message:"testData"
        },
        methods:{
            testClick:function () {
                this.message = 'clickData'
            }
        }
    });
</script>

集合类型绑定

v-for=“item in list” v-for="(item,index) in list" v-for=" (item,index) in listObj" v-for="(value,key,index) in obj"

节点控制

v-if v-show

生命周期

beforeCreate:function(){}
	创建前状态
created:function(){}
	创建完毕状态
beforeMount:function(){}
	挂载前状态
mounted:function(){}
	挂载完毕状态
beforeUpdate(){}
	更新界面之前
updated:function(){}
	更新界面之后
beforeDestroy:funection(){}
	销毁前状态
destroyed
	销毁之后状态

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-01，如有侵权请联系 cloudcommunity@tencent.com 删除

变量