Vue学习入门

最新推荐文章于 2023-09-22 00:22:34 发布
最新推荐文章于 2023-09-22 00:22:34 发布
阅读量121 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42932243/article/details/88403537
版权
Vue是一个MVVM模式的实现者，MVVM核心是ViewModel，ViewModel就是一个观察者。
Vue概括：
核心：数据驱动和组件化。
优点：借鉴了AngulaJS的模块化开发和React虚拟DOM，虚拟DOM就是把DOM操作放到内存执行。

常用的。
常用的自定义属性：
v-if
v-else-if
v-else
v-for
v-on 绑定事件
v-model 数据双向绑定
v-bind 为组件绑定参数

组件化：

组合组件slot插槽
组键内部绑定事件需要用到this.$emit(‘事件名’,参数);
遵循SoC关注度分离原则，Vue是纯粹的视图框架，它并不包含比如AJAX之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信。

自己的特色：

计算属性computed：里面写的还是函数，只是将计算结果相同的方法做静态存储

Vue 实战：
  1. 开发都要基于NodeJS。
  2. 实际开发采用vue-cli脚本架开发。
  3. vue-router 路由。
  4. vuex状态管理。
Vue UI
  1. ElementUI 饿了么出品
  2. iview
  3. ice 飞冰，阿里巴巴出门

各种自定义属性的实践

  1. v-if v-else-if v-else
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>



<div id="app">
    <div v-if="type == 'A'">a</div>				#两个等于三个等于都行，不知道是不是我还有情况没试
    <div v-else-if="type == 'B'">b</div>
    <div v-else>NO</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',		#绑定id为APP的div
        data: {
            type: "b"
        }
    })
</script>



</body>
</html>
判断data中type的值，来改变页面显示哪个div。

在这里插入图片描述
源码中写了三个div，但是判断之后最后只有一个div输出。

  1. v-for
<body>
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}		#取数据需要{{}}两个花括号。
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            items:['zzz','xxx','ccc']
        }
    })
</script>
</body>

擦好看代码可知在data中有个列表items，通过v-for循环将其中的数据打印出来，结果如下：
在这里插入图片描述
由结果可以知道，for循环最终生成了三个li标签，并将数据依次放置在li标签中。

事件

点击弹窗事件

<body>
<div id="app">
    <button v-on:click="sayHi">点我</button>		#绑定点击事件，函数为sayHi
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Message'
        },
        methods: {
            sayHi: function (event) {		sayHi方法
                alert(this.message);		this是代表这整个变量            }
        }
    })
</script>
</body>

结果：
在这里插入图片描述
由结果可知点击会弹出一个弹窗，其中的内容是data中的message内容。

组件

在Vue中万物都是组件，整个页面就是组件的容器，实现就是创建组件的容器，然后再创建适合的组件插入容器中。
在这里插入图片描述

<body>
<div id="app">
    <ul>
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("my-component-li", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    } );
    var vm = new Vue({
        el: '#app',
        data: {
            items: ['zs','ls','ww']
        }
    });
</script>
</body>

首先再div中创建my-component标签，这个标签就是一个容器，，之后在Vue.component创建指定的组件插入进去，内容为[‘item’]，组件模板为’li{{item}}/li’。v-for循环将data中items的值取出来。
v-bind就是为组件绑定参数。
结果：
在这里插入图片描述

表单

什么是双向数据绑定

Vue.js是一个MVVM框架，即数据双向绑定，就是当数据发生改变的时候，视图也就发生变化，当视图发送变化的时候，数据也会跟着同步变化，数据双向绑定一般是对于UI控件来说的，非UI控件不会涉及数据双向绑定。

使用数据双向绑定的优点

在全局性数据流使用表项，方便追踪，局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

用v-model指令在表单<input>,<textarea>,<select>元素上创建双向数据绑定，他会更具控件类型自动选取正确的方法来更新元素。v-model本质上是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked。selected特性的初始值

下拉框、输入框例子
<body>
    <div id="app">
        <input type="text" v-model="message" value="hello">&nbsp;&nbsp; Input内容：{{message}}  <!--实现双向绑定-->
        <br><br><br>
        <div>
            下拉框：
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option >A</option>
            <option >B</option>
            <option >C</option>
        </select>
        <span>选中的值：{{selected}}</span>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            message: 'hello vue',
            selected:'',
        }
    })
</script>
</body>

代码中写了一个输入框和下拉框，实现的是在输入框内的数据和后面的数据相匹配。
在输入框中的value属性是无效的，v-model会忽略其中的值
结果
在这里插入图片描述

计算属性

什么是计算属性：
首先计算属于属性，属性是名词，但是计算属于动词，它的意思是将行为转化为静态的属性。

用一个获取时间的方法观察区别。

<body>
<div id="app">
    <div>获取时间：{{getCurrentTime()}}</div>
    <div>获取属性：{{getCurrentTime1}}</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            getCurrentTime: function () {
                return Date.now();
            }
        },
        computed: {
            getCurrentTime1: function () {
                return Date.now();
            }
        }
    })
</script>

在这里插入图片描述
由上段代码可知{{getCurrent Time()}}和{{getCurrentTIme}}分别是函数和方法，方法每次获取的时候都会运行，属性则为定值。

结果
在这里插入图片描述
由上可知，函数每次运行 时间都会变化，因为函数一直在运行，每获取一次都会运行，而下面的属性则为开始运行一次，之后一直保存为属性，每次调用都是提取数据。

内容分发与自定义事件
<body>
    <!--创建插槽-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    // 创建一个名为todo的事件组件
    Vue.component("todo", {
        template: "<div>\
                    <slot name='todo-title'></slot>\
                        <ul>\
                            <slot name='todo-items'></slot>\
                        </ul>\
                    </div>\
                    "
    });
    //创建组件中的标题组件
    Vue.component("todo-title", {
        props: ['title'],
        template: "<div>{{title}}</div>"
    });
    //创建组件中的内容组件
    Vue.component("todo-items", {
        props: ['item'],
        template: "<li>{{item}}</li>"
    });
    //实例化Vue并初始化数据
    var vm = new Vue({
        el: '#app',
        data: {
            title: '姓名',
            todoItems: ['zs','ls','ww'],
        }
    })
</script>

</body>

结果如图：
在这里插入图片描述
上面就完成了创建一个插槽，并创建一个大组件，里面包含了两个小组件。
自定义事件
目标是在上面代码的基础上增加一个删除键，能够将数据删除，这样就需要一个参数对数据执行标记。

<body>
    <!--创建插槽-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index);"></todo-items>
            <!--for循环将数据标上号，给出index，v-bind对index进行绑定，v-on将数据传入vm变量中 -->
    </todo>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    // 创建一个名为todo的事件组件
    Vue.component("todo", {
        template: "<div>\
                    <slot name='todo-title'></slot>\
                        <ul>\
                            <slot name='todo-items'></slot>\
                        </ul>\
                    </div>\
                    "
    });
    //创建组件中的标题组件
    Vue.component("todo-title", {
        props: ['title'],
        template: "<div>{{title}}</div>"
    });
    //创建组件中的内容组件
    Vue.component("todo-items", {
        props: ['item'],
        template: "<li>{{index}} -{{item}} <button @click='remove(index);'>删</button></li>",//在该组件中定义的函数方法只能调用当前的，调其他的需要转接，点击的时候获取index
        methods: {
            remove: function (index) {
                this.$emit('remove',index)           //指向<div>中绑定的removeItem方法并将index传入。
            }
        }
    });


    //实例化Vue并初始化数据
    var vm = new Vue({
        el: '#app',
        data: {
            title: '姓名',
            todoItems: ['zs','ls','ww'],
        },
        methods:  {
            removeItem: function(index) {		//index时v-on传入的数据
                this.todoItems.splice(index, 1);	//切片，将数据按照index为起点，后面数字为个数进行切片
            }
        }
    });
</script>

</body>

首先在v-for时增加一个index索引，将每个数据标号。
然后依次将数据传入，最后根据编号删除数据。

结果

开始
在这里插入图片描述
删除后：
在这里插入图片描述

刘芳桐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】入门学习
Viga的博客
08-20 394
Vue介绍 Vue.js是一套用于构建用户界面的渐进式框架。 渐进式：用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。 单页应用 是指整个前端应用只有一个web页面，根据路由可以切换到不同的显示页面，在切换的过程中不需要重新加载资源，这样的一个好处就是减少了内存消耗。并且和后台的交互是通过axios或者ajax完成的，不会出现白屏的现象，用户体验更加友好。 数据驱动 无需操作DOM，重点更改数据即可。 支持双向绑定，依赖ES5中一个重要的API，
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
Vue入门---电商项目
juntech.top
09-12 1606
学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 0.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端...
Vue学习--入门篇
star_zhang_jx的博客
12-16 583
这篇文章的内容可以作为学习Vue之前的前置知识点了解，Vue包含的知识面远不及于此，想要搞前端的小伙伴还是去B站上面看时长长的视频，不要看狂神的，本篇文章就是基于狂神的视频总结的一些知识点，搞后端的小伙伴可以猫一眼，我们了解一下就行，专业的事情还是交给前端来做吧。
Vue入门学习（一）
我要，我要，我还要
06-30 392
Vue实现 Vue实现字符串轮回（类似跑马灯效果）。 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="vue.js" type="text/javascript" charset="utf-...
【Vue】系统学习——入门
陶洲川的博客
05-28 368
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 使用Vue开发已经有2个多月了，应该后端的逻辑越来越“平庸”，作为一个全栈程序员，前段开发的效率低，极大阻碍了我的开发效率，所以是时候系统地学习Vue这套JavaScript框架了； Vue是什么？ Vue是JavaScript框架，能够简化Dom操作，加快开发速度；而且是响应式数据驱动； 接下来，因为是非纯前段，我参考的是B站
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且...通过深入理解并熟练掌握Vue的基础知识和高级特性，开发者可以构建出高性能、可维护的前端项目。
vue学习快速入门
01-08
史上最强大视频 让你快速入门成为大牛课程详细 有代码
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue学习（一）基础篇大全
qq_42031483的博客
05-27 448
是什么 一个前端的框架，基于组件思想设计。利用属性和元素块进行动态绑定，实现热更新。 怎么用 新概念 数据插入： 可以有mustache方法，直接在文本中插值； <span v-once>This will never change: {{ msg }}</span> 也有v-bind方法，在html的属性中插值。 <div v-bind:id="d...
Vue学习从入门到精通（六）
08-26 1497
  今天我们来一块学习一下Vue中的过滤器。查看官网发现，Vue之前封装的一些过滤器现在已经是失效，后期大家在开发过程中用到过滤器的时候都需要自己进行定义哦，这样也好，可以避免自定义的过滤器和Vue之前封装的过滤器冲突，造成一些不必要的麻烦。 什么是过滤器   什么是过滤器呢，本质上都是函数，其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js过滤器使用时，用管道符(|)...
Vue入门教程
Zz1366的博客
05-08 6066
Vue快速入门
vue的基础知识大全，一篇文章就够了！
最新发布
qq_65010070的博客
09-22 5414
Vue的基础知识，持续整理中。。。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
史上最详细vue的入门基础
楠黎倾风的博客
09-20 1万+
vue的入门基础
2020 零基础 Vue快速入门 Vue基础篇 【详细】
超逸の学习技术博客
01-13 7353
文章目录1、引言2、Vue简介3、什么是Dom? 1、引言 2、Vue简介 ① JavaScript框架 ② 简化Dom操作 ③ 响应式数据驱动 3、什么是Dom? document文档 object 对象 model模型，Dom翻译中文：文档对象模型 DOM是一种用于HTML和XML文档的编程接口。很多时候我们会用javascript作用于网页上从而达到一定功能效果。而javas...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值