Vue基础

最新推荐文章于 2024-06-05 09:37:42 发布
最新推荐文章于 2024-06-05 09:37:42 发布
阅读量301 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42265394/article/details/112573900
版权

Vue基础

1.1 前端回顾

1.1.1 MVVM模式
  • Model：模型层，在这里表示JavaScript对象
  • View：视图层，在这里表示 DOM (HTML 操作的元素)
  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

1.1.2 MVVM组成部分

在这里插入图片描述

1.2 什么是Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  • Vue遵守Soc（关注点分离原则），只专注于视图层。
  • HTML+CSS+JS：给用户看，刷新后台提供的数据。

Vue只关注视图层，其他功能则交给对应的工具来处理。

网络通信   ---  axios
页面跳转   ---   vue-router
状态管理   ---   vuex
1.2.1 快速入门
视图层  View   页面展示内容
数据层  Model  Vue对象中的data属性。（常用的七个属性之一）
双向绑定  View-Model  在浏览器控制台修改data属性，页面展示的内容同时发送变化。
  • 判断和循环(if-else)
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <!--判断-->
    <h1 v-if ="score==='A'">A</h1>
    <h1 v-else-if ="score==='B'">B</h1>
    <h1 v-else-if ="score==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            score:'A'
        }
    });
</script>
</body>
</html>
  • for循环
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <li v-for="(item,index) in arrays">
    	<!--index表示数组的索引，从0开始-->
        {{item.msg}}--{{index}}
    </li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            //数据中存放一个数组，数组中包含两个对象
            arrays:[
                {msg:"张三"},
                {msg:"李四"}
            ]
        }
    });
</script>
</body>
</html>
1.2.2 Vue绑定元素特征v-bind

通过Vue实现数据和DOM之间建立联系，所有东西都是响应式的，在控制台操作对象属性，页面可以实时更新。

  • 对于一些html标签有一些特定的元素，可以通过v-bind来使标签属性和后端传递过来的数据进行绑定。
  • span标签的title属性和vue对象中的data属性中的message进行绑定。鼠标悬停时显示的是message内容。
  • v-bind:可以省略为:
<body>
<div id="app">
  <span v-bind:title="message">鼠标悬停查看效果</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"鼠标悬停展示的信息"
        }
    });
</script>
</body>
1.2.3 Vue绑定事件v-on
  • 事件肯定有方法，比如鼠标点击事件，双击事件。
  • v-on:可以省略为@。
  • Vue对象中的methods属性，是用来定义方法的，可以有多个，所以必须是复数。
<body>
<div id="app">
 <!--v-on:click后面加事件（鼠标，键盘事件可以简写成@click-->
<button @click="clickme">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"你好，vue"
        },
        methods:{//方法必须定义在vue的methods对象中
            //方法名为clickme
            clickme:function () {
                alert(this.msg)
            }
        }
    });
</script>
</body>

在这里插入图片描述

1.2.4 Vue双向绑定v-model

什么是数据双向绑定

  • Vue.js 是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js 的精髓之处了。

  • 值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的（input输入框等），非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。

输入框输入什么数据，后面展示什么数据。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input v-model="msg">{{msg}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"123"
        }
    });
</script>
</body>
</html>

下拉框选择什么，后面就展示什么内容。

  • ios系统，如果第一个选项是空，那么就没法选择了，所以经常第一个选择是请选择选项，并且禁用。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--下拉框选择-->
    下拉框：
    <select v-model="selected">
        <!--disabled表示禁用该选项-->
        <option value="" disabled>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
    </select>
    value:{{selected}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            selected:""
        }
    });
</script>
</body>
</html>

1.3 Vue组件

Vue组件就是自定义一个标签

组件是可复用的 vue实例，说白了就是一组可以重复使用的模板，跟JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。

  • 组件Vue.component和数据vm.items是同级的，不能直接调用，需要使用标签中间商来进行双向绑定。
  • 标签中的v-for="item in items"和Vue对象中的data进行绑定，v-bind:r="item"将遍历出的item和组件中的r进行绑定。
  • 必须通过props属性来传递遍历后的实际参数。
  • Vue.component(“name”,{ }) ，第一个参数是组件名字，第二个参数是组件对象。
  • v-bind:r="item" r相当于形参，是组件中的值。item相当于实参，是data中的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--遍历传递给组件的值
       相当于形参是r实参是item
       组件相当于调用方法，将实参和形参绑定起来
    -->
    <rm v-for="item in items" v-bind:r="item"></rm>

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个Vue组件,组件名叫rm，该标签的作用和template的值功能相同
    Vue.component("rm",{
        //接收的参数(r相当于形参，实参是item)
        props:["r"],
        //模板，用来取值
        template:'<li>{{r}}</li>'
    })

    var vm=new Vue({
        el:"#app",
        data:{
            items:["Java","C","C艹"]
        }
    });
</script>
</body>
</html>

1.4 Axios异步通信

什么是Axios

Axios是一个开源的可以用在浏览器端和Node]s的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下:

  • 从浏览器中创建 XMLHttpRequests
  • 从node.js 创建http 请求
  • 支持Promise API[JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)

钩子函数mounted(){}

  • axios.get()， 通过 get方法获取json数据。
  • .then(response=>(this.info=response.data)) 将获取的数据response.data传递给this.info。
  • data{}属性中的info相当于json数据模板，定义null会自动匹配。
<body>
<div id="vue" v-clock>
    name:{{info.name}} <br/>
    linkname: {{info.links.name}}<br/>
    <a v-bind:href="info.url">点我</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el: "#vue",
        //返回值数据类型，和data不同
        data:{
            info: null
        },
        mounted() {//钩子函数，链式编程，ES6新特性
            axios.get('../data.json').then(response => (this.info = response.data))
        }
    });
</script>
</body>
  • 解决网速慢时闪烁问题，加载的时候显示白屏
<style>
    [v-clock]{
        display: none;
    }
</style>
<div id="vue" v-clock>
    {{info.name}} {{info.links.name}}
    <a v-bind:href="info.url">点我</a>
</div>

1.5 计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力（计算是动词)，
这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，
可以想象为缓存!

注意:methods和computed 里的东西尽量不要重名
说明:

  • methods:定义方法，调用方法使用current1()，需要带括号
  • computed:定义计算属性，调用属性使用current2，不需要带括号; this.msg是为了能够让 current2观察到数据变化而变化
  • 如果在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.msg=“234” ,改变下数据的值，再次测试观察效果!

结论:

  • 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <!--调用方法-->
    currentTime1:{{current1()}} </br>
    <!--调用属性-->
    currentTime2:{{current2}}
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        //绑定标签
        el:"#vue",
        data:{
            msg:"张三"
        },
        //方法，每次都需要重新调用方法
        methods: {
            //返回当前时间戳的方法
            current1:function () {
                return Date.now();
            }
        },
        //计算属性，将结果缓存到属性中，数据刷新才会改变
        computed:{
            current2:function () {
                //当msg值改变，会刷新缓存
                this.msg;
                return Date.now();
            }
        }

    })
</script>
</body>
</html>
  • 计算出来的结果被缓存到内存中，只有当方法中的数据改变，才会重新计算

在这里插入图片描述

1.6 插槽slot

内容分发

在Vue.js中我们使用< slot >元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

  • 插槽也是一个组件
  • v-bind:title_x="title_s" title_x相当于形参，是组件中的值。title_s相当于实参，是data中的值。
<body>
<div id="vue">
    <rm>
        <!--绑定数据和组件，组件根据slot进行绑定-->
        <rm-title slot="rm-title" v-bind:title_x="title_s"></rm-title>
        <!--先遍历，遍历出来的数据为item，再和data后端中的数据进行绑定-->
        <rm-context slot="rm-context" v-for="item in Items" v-bind:item="item">
        </rm-context>
    </rm>
</div>

<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    //插槽也是一个组件
    //定义一个Vue组件,组件名叫rm，该标签的作用和template的值功能相同
    Vue.component("rm",{
        //slot插槽用来插数据,根据组件的名称进行绑定
        template:
            '<div>\
                <slot name="rm-title"></slot>\
                <ul>\
                    <slot name="rm-context"></slot>\
                </ul>\
            </div>'
    })
    Vue.component("rm-title",{
        //通过rm-title标签替换template中的内容
        props:['title_x'],
        template: '<p>{{title_x}}</p>'
    })
    Vue.component("rm-context",{
        props:['item'],
        template:'<li>{{item}}</li>'
    })

    var vm=new Vue({
        //绑定标签
        el:"#vue",
        data:{
            title_s:"书籍名称",
            Items:["Java","Python","Linux"]
        }

    })
</script>
</body>

在这里插入图片描述

1.7 自定义事件内容分发

  • 删除插槽中的数据
  • 点击删除，能删除对应的数据
  • 组件只能调用组件中的数据
  • 可以通过前端实现组件和vue的联系组件–前端–Vue
    在这里插入图片描述

组件中的插槽可以调用组件中的方法

  • 点击删除按钮会弹出cccc
    Vue.component("rm-context",{
        props:['item'],
        template:'<li>{{item}}<button @click="remove_c">删除</button></li>',
        methods:{
            remove_c:function () {
                alert("cccc");
            }
        }
    })

需求：组件调用Vue中的方法
修改JavaScript中数组内元素

  • splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该个位置添加若干元素:

var arr = [ 'Microsoft ', 'Apple', 'Yahoo ', 'AoL '， 'Excite'， 'oracle' ];
//从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2，3，'Google', 'Facebook ' ); 
//只删除,不添加:
arr.splice(2，2); 
//只添加,不删除:
arr.splice(2，0, 'Google', 'Facebook ' );

自定义事件

通过以上代码不难发现，数据存在Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?
此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’，参数)，操作过程如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <rm>
        <!--先遍历，遍历出来的数据为item，再和data后端中的数据item_c进行绑定-->
        <!--自定义事件绑定Vue实例中的事件，起桥梁作用-->
        <rm-context slot="rm-context" v-for="(item,index) in Items"
                    :item_c="item" :index_c="index" @remove="remove_v(index)">
        </rm-context>
    </rm>

</div>

<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    //插槽也是一个组件
    //定义一个Vue组件,组件名叫rm，该标签的作用和template的值功能相同
    Vue.component("rm",{
        //slot插槽用来插数据,根据组件的名称进行绑定
        template:
            '<div>\
                <ul>\
                    <slot name="rm-context"></slot>\
                </ul>\
            </div>'
    })
    Vue.component("rm-context",{
        props:['item_c','index_c'],
        template:
        '<li>
          {{index_c}}--{{item_c}}<button @click="remove_c">删除</button>
        </li>',
        methods:{
            remove_c:function (index_c) {
                //使用this.$emit('自定义事件名'，参数)
                this.$emit("remove",index_c)
            }
        }
    })

    var vm=new Vue({
        //绑定标签
        el:"#vue",
        data:{
            title:"书籍名称",
            Items:["Java","Python","Linux"]
        },
        methods:{
            remove_v:function (index) {
                //根据索引，删除对应的元素
                this.Items.splice(index,1);
            }
        }

    })
</script>


</body>
</html>
初夏那片海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
前端开发环境：Vue、Element Plus、Axios
hitmengfanchao的博客
06-05 1892
本文介绍了前端开发环境的搭建，包括：Vue项目创建、在Vue项目中引入Element-Plus和Axios。通过一个简单的登录程序说明如何开发基于Vue的前端项目。
Vue 基础
roydon
10-11 4425
vue2基础
vue基础教程
shiyzhang
07-24 2824
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5852
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 7274
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础入门题库
qq_46556714的博客
09-22 1万+
Vue基础入门作业(含参考答案） 单选题 1、 下列选项中，代表视图部分的是（）。 1分 A、Element B、DOM C、Model D、View 参考答案 : D 答案说明 : MVVM主要包含3个部分，分别是Model、View和ViewMode。 Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。 2、 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。 1分 A、npm.
vue基础入门
weixin_47124112的博客
06-08 4628
vue是什么，以及vue的基本指令
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
【创新未发表】Matlab实现遗传算法GA-RF实现风电预测算法研究.rar
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
蚁群算法（培训）.pdf
08-02
蚁群算法（培训）.pdf
【中科院1区】Matlab实现花朵授粉优化算法FPA-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Vue基础教程：轻松掌握核心指令与特性
一、Vue基础语法 1. HelloWorld Vue的HelloWorld示例展示了如何创建一个简单的Vue实例。首先引入vue.js库，然后在HTML中选择一个具有ID的DOM元素，通过Vue实例将数据绑定到该元素。Vue实例的数据可以通过双大括号{{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值