vue简介、基础操作及实例

最新推荐文章于 2022-02-20 16:11:40 发布

1270015249-jmy

最新推荐文章于 2022-02-20 16:11:40 发布

阅读量297

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47150940/article/details/108088828

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue是什么

为什么要用vue

vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。

1.易用：
学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦

2.灵活：
如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。

3.高效：
虚拟dom：其数据全部在内存中，只有js引擎参与其中。而真实dom会有浏览器渲染层在其中

浏览器的虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：

虚拟DOM不会进行排版与重绘操作

虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

vue是什么

1.Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

这里渐进式框架也就是上边vue特点中的灵活一项，使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；

2.Vue 只关注视图层，采用自底向上增量开发的设计。

视图层：

那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，让他们看起来更加美观。最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。

把HTML中的DOM可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。

MVVM

是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
在这里插入图片描述

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

控制器负责对模型中的数据进行更新，而视图向模型中请求数据；当有用户的行为触发操作时，会有控制器更新模型，并通知视图进行更新，在这时视图向模型请求新的数据
在这里插入图片描述
3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

响应的数据绑定：

就是vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js测试 -</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
		<hr>
		<p>{{ message }}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>
</body>
</html>

组合的视图组件：

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑）.

组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行（组件化）

组件化优点：

提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发

vue的基础操作

基本格式

el:表示new的实例，要控制页面上的区域
data：   el控制区域需要的数据
methods： el控制区域所调用的方法
components：调用的模板

基础操作

v-text =‘数据’

会覆盖元素原来的内容
v-html

解析带有标签的数据会覆盖元素原来的内容
{{}}

插入数据替换原来的占位符
v-text 和 {{}} 的区别

v-text会重新覆盖文本，{{}}只会重新覆该占位符的内容
v-bind

是vue中提供的用于动态绑定属性的指令可以简写为：
v-on

是vue中提供的用于绑定方法的指令可以简写为 @
v-for

是循环指令,数组对象字符串数字，在循环的时候建议为每一项加一个不重复的key值,用于在页面更新的时候做优化处理
v-show

控制标签的显示或者隐藏, true 显示, false 隐藏
@click=‘事件名’ === v-on:click=‘事件名’
.stop

阻止冒泡
.prevent

阻止默认行为
.capture

捕获触发事件机制
.self

实现点击当前元素，触发当前元素的事件—>阻止当前元素冒泡
.once

只触发一次
v-show 和 v-if 的区别

v-show 只控制标签的显示和隐藏,display
v-if 是直接把标签从dom元素中进行删除和添加

注意：阻止事件冒泡，可以在父元素click后添加,self 或者在子元素后添加.stop。若需要元素只执行一次，则在click后添加.once，则元素之后执行一次点击事件，下一次点击不会执行

实例1：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .sty {
            font-weight: 200;
        }
        
        .active {
            color: palevioletred;
        }
        
        .thin {
            font-weight: 600;
        }
        
        .xi {
            font-weight: 400;
        }
        
        .bor {
            border: 1px solid peru;
        }
    </style>
</head>

<body>
    <div id="app" v-bind:class="[classobj,classobj1]">
        <!-- <div id="app" v-bind:class="['sty','active',flag?'thin':'xi']"> -->
        {{mes}}
        <p v-text="mes"></p>
        <!-- <p v-html="msg"></p> -->
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // flag: "true",
            classobj: {
                sty: "true",
                active: "true",
                thin: "true"
            },
            classobj1: {
                bor: "true"
            },
            mes: "hello vue",
            msg: "<a href='#'>链接</a>"
        }
    })
</script>

</html>

实例2：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <button @click="toggle">点击按钮控制标签</button> -->
        <button @click="flag=!flag">点击按钮控制标签</button>
        <h1 v-show='flag'>这是h1标签</h1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true
                // flag: false
        }
        // methods: {
        //     toggle() {
        //         this.flag = !this.flag
        //     }
        // }
    })
</script>

</html>

实例3：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" @click="father">
        <button @click.stop="son">按钮</button>
        <a href="http://www.baidu.com" @click.prevent.stop="open">超链接</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            father() {
                alert("我是父元素")
            },
            son() {
                alert("我是子元素")
            },
            open() {
                alert("我是超链接")
            }
        }
    })
</script>

</html>

实例4：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <p v-for='(item,index) in arr'>索引值=>{{index}},索引对应的value=>{{item}}</p> -->
        <!-- <p v-for='(item,index) in arr'>索引值=>{{index}},索引对应的value=>{{item.name}}</p> -->
        <p v-for='(val,key,index) in user'>索引值=>{{index}},key值为=>{{key}},value值为=>{{val}}</p>
        <p>{{user.name}}</p>
        <p v-for='content in 10'>这是第{{content}}循环</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // arr: [1, 2, 3, 4, 5, 6, 7]
            // arr: [{
            //     id: 1,
            //     name: "张三"
            // }, {
            //     id: 2,
            //     name: "李四"
            // }]
            user: {
                id: 1,
                name: "张三",
                age: 17
            }
        },
        methods: {}
    })
</script>

</html>

指令

指令	作用
v-model	多用于表单元素实现双向数据绑定
v-for	格式： v-for=“字段名 in(of) 数组json” 循环数组或json,需要注意从vue2开始取消了$index 要会用:key=‘数据’（数据格式为字符串或者数字）
v-show	显示内容
v-hide	隐藏内容
v-if	显示与隐藏（dom元素的删除添加默认值为false）
v-else-if	必须和v-if连用
v-else	必须和v-if连用不能单独使用否则报错模板编译错误
v-bind	动态绑定作用：及时对页面的数据进行更改
v-on:click	给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text	解析文本
v-html	解析html标签
v-bind:class	三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once	进入页面时只渲染一次不在进行渲染
v-cloak	防止闪烁
v-pre	把标签内部的元素原位输出

拓展：

forEach    some     findIndex  这些都会对数组中的每一项进行遍历，执行相关操作。

关于if elseif else实例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span v-pre>{{msg}}</span>
        <input type="text" v-model="zm">
        <p v-if="inter(zm)=='a'">您输入了a</p>
        <p v-else-if="inter(zm)=='b'">您输入了b</p>
        <p v-else-if="inter(zm)=='c'">您输入了c</p>
        <p v-else>您输入了d</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "啥也不是",
            zm: "a"
        },
        methods: {
            inter(zm) {
                if (zm == "a") {
                    return "a";
                } else if (zm == "b") {
                    return "b";
                } else if (zm == "c") {
                    return "c"
                } else {
                    return false
                }
            }
        }
    })
</script>

</html>

计算器实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="num1">
        <select name="" id="" v-model="code">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2">
        <button @click="sum">=</button>
        <input type="text" v-model="num3">
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            num1: 0,
            code: "+",
            num2: 0,
            num3: 0
        },
        methods: {
            sum() {
                switch (this.code) {
                    case this.code = "+":
                        this.num3 = this.num1 * 1 + this.num2 * 1;
                        break;
                    case this.code = "-":
                        this.num3 = this.num1 * 1 - this.num2 * 1;
                        break;
                    case this.code = "*":
                        this.num3 = (this.num1 * 1) * (this.num2 * 1);
                        break;
                    case this.code = "/":
                        this.num3 = (this.num1 * 1) / (this.num2 * 1);
                        break;
                }
            }
        }
    })
</script>

</html>

运行结果：
在这里插入图片描述

走马灯实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="start">开始</button>
        <button @click="end">结束</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            str: "走马灯~~~~",
            intervalid: null
        },
        methods: {
            start() {
                if (this.intervalid != null) {
                    return;
                }
                this.intervalid = setInterval(() => {
                    var str1 = this.str.substring(0, 1);
                    var str2 = this.str.substring(1);
                    this.str = str2 + str1;
                    console.log(this.str)
                }, 400);
            },
            end() {
                clearInterval(this.intervalid);
                this.intervalid = null
            }
        }
    })
</script>

</html>

运行结果：
在这里插入图片描述

员工管理实例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #app {
            text-align: center;
            background-color: rgb(255, 254, 253);
        }
        
        table {
            border: 1px solid black;
            margin-top: 20px;
        }
        
        th {
            text-align: center;
        }
        
        #contain {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>员工管理系统</h1>
        <div id="contain">
            <input type="text" placeholder="请输入id" v-model="id">
            <input type="text" placeholder="请输入名字" v-model="name">
            <input type="button" value="增加" @click="add" class="btn btn-primary">
            <label for="sear">请输入搜索内容：<input type="text" name="sear" v-model="keyword"></label>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <th>id</th>
                <th>name</th>
                <th>time</th>
                <th>caozuo</th>
            </thead>
            <tbody>
                <tr v-for="item in search(keyword)">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <button @click="del(item.id)" class="btn btn-primary">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
            keyword: "",
            list: [{
                id: "1",
                name: "张三",
                time: new Date()
            }, {
                id: "2",
                name: "李四",
                time: new Date()
            }, {
                id: "3",
                name: "张亮",
                time: new Date()
            }]
        },
        methods: {
            search(keyword) {
                if (keyword == "") {
                    return this.list
                } else {
                    var arr = [];
                    // console.log(111)
                    this.list.forEach((items) => {
                            // console.log(items.name.indexOf(keyword))
                            if (items.name.indexOf(keyword) != "-1") {
                                // console.log(111)
                                arr.push(items);
                            }
                            // console.log(arr)
                        })
                        // console.log(arr)
                    return arr;
                }
            },
            add() {
                var param = {
                    id: this.id,
                    name: this.name,
                    time: new Date()
                };
                this.list.push(param)
            },
            del(id) {
                //foreach循环
                // console.log(id)
                // this.list.forEach((item, index) => {
                //     if (item.id == id) {
                //         this.list.splice(index, 1)
                //     }
                // })

                //some方法
                // this.list.some((item, i) => {
                //     if (item.id == id) {
                //         this.list.splice(i, 1);
                //         return true
                //     }
                // })

                //findindex方法
                var index = this.list.findIndex((item) => {
                    if (item.id == id) {
                        return true
                    }
                })
                this.list.splice(index, 1)
            }
        }
    })
</script>

</html>

运行结果：
在这里插入图片描述

1270015249-jmy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简介、基础操作及实例

vue是什么为什么要用vuevue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。1.易用：学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦2.灵活：如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件
复制链接

扫一扫

专栏目录