Vue 基础

已于 2023-06-01 11:25:48 修改
阅读量907 收藏 3
点赞数 1
文章标签： mvc
于 2022-07-07 20:14:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56265207/article/details/125666106
版权

Vue

文章目录

1、Vue概述

1.1、什么是MVVM

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

MVVM:

在这里插入图片描述

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，AngularJS

1.2、 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可复用：可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：前后端分离，开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

MVVM组成部分

在这里插入图片描述

1、View

View是视图层， 也就是用户界面。前端主要由HTH L和css来构建， 为了更方便地展现数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MVVM框架如Vue.js、Angular JS，等用来构建用户界面的内置模板语言。

2、Model

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

3、ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。

需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
  • 视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。

MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。

View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环

1.3、 Vue

Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合

1、MVVM模式的实现者

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

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

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

Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

2、为什么使用Vue.js

  • 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
  • 移动优先。更适合移动端， 比如移动端的Touch事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

1.4 、第一个Vue程序

开发环境：IDEA（IDEA可以安装Vue的插件 ）

Vue.js：我们通常使用cdn导入

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<!--或-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

1、创建一个空项目，创建一个文件夹，新建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
    {{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            message: "你好"
        }
    });
</script>
</body>
</html>

说明

  • el:“#app” -----> 绑定元素的ID
  • data:{message:“Hello”} ----> 数据对象中有一个名为message的属性，并设置了初始值 Hello
  • {{message}} -----> 实现数据绑定功能

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

为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
  1、在浏览器上运行第一个Vue应用程序， 进入开发者工具
  2、在控制台输入vm.message=‘HelloWorld’， 然后回车， 发现浏览器中显示的内容会直接变成HelloWorld，不需要刷新页面
  此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应

理解View Model：它可以类比成一个观察者，监测到了数据的变化，就立马更新页面与之绑定的值，无需更新页面，也无需操作DOM对象，相当于一个虚拟DOM对象

2、Vue基础语法

2.1、 v-bind

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬停几秒查看信息</span>

</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            message: "Hello"
        }
    });
</script>
</body>
</html>

说明：

  • 看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute
  • 它们会在渲染的 DOM 上应用特殊的响应式行为

在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新

2.2 、v-if、v-else

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
    <h1 v-if="type">true</h1>
    <h1 v-else>false</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   let vm = new Vue({
         el:"#app",
       data: {
            type: true
       }
    });
</script>
</body>
</html>

测试

1.在浏览器上运行，打开控制台
2.在控制台输入vm.type=false然后回车，你会发现浏览器中显示的内容会直接变成false
  注：使用v-*属性绑定数据是不需要双花括号包裹的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else if="type=='B'">B</h1>
    <h1 v-else if="type=='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data: {
            type: 'A'
        }
    });
</script>
</body>
</html>

测试

1.在浏览器上运行，打开控制台
2.在控制台输入vm.type="D"然后回车，你会发现浏览器中显示的内容会直接变成D

2.3 、v-for

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
<li v-for="(item,index) in items">
    {{item.message}}---{{index}}
</li>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data: {
            items:[
                {message:"吉吉国王"},
                {message:"好好"},
            ]
        }
    });
</script>
</body>
</html>

注：items是数组，item是数组元素迭代的别名，index是迭代的序号(数组下标)

测试

  • 打开控制台，在控制台输入vm.items.push({message：'vue hello'})，尝试追加一条数据，会发现页面也添加了数据

2.4 、v-on

  • 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
  • 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称
<!--view 层  模板-->
<div id="app">
    <button v-on:click="hello">点我</button>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        //Model:数据
        data: {
            message: "吉吉"
        },
        methods: {//方法必须定义在Vue的Methods中，v-on:事件
            hello: function () {
                alert(this.message);
            }
        }
    });
</script>

运行：

在这里插入图片描述

3、Vue 表单双绑&组件

3.1、 表单数据双向绑定

数据双向绑定： 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。

注意 : 我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

1、单行文本和文本域

<!--view 层  模板-->
<div id="app">
    <!--单行文本-->
    <br>请输入：<input v-model="message"/> 吉吉喜欢{{message}} <br>
    <!--文本域-->
    <br> <textarea  cols="50" rows="10" v-model="message"> </textarea>
    吉吉喜欢{{message}} <br>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            message: ""
        }
    });
</script>

在这里插入图片描述

注意 ：在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替

2、单选框和多选框

<!--view 层  模板-->
<div id="app">
    <div>性别：
        <input type="radio" name="sex" value="男" v-model="hh"> 男
        <input type="radio" name="sex" value="女" v-model="hh"> 女
        <p>
            选中了：{{hh}}
        </p>
    </div>
    <div>
        爱好：
        <input type="checkbox" name="hobby" value="摄影" v-model="jj"> 摄影
        <input type="checkbox" name="hobby" value="跑步" v-model="jj"> 跑步
        <p>
            选中了：{{jj}}
        </p>
    </div>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model:数据
        data: {
            hh: '',
            jj: ''
        }
    });
</script>

在这里插入图片描述

在这里插入图片描述

3、下拉框

<!--view 层  模板-->
<div id="app">
    下拉框
    <select v-model="selected">
        <option>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>
        选中了：{{selected}}
    </span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model:数据
        data: {
            selected: ''
        }
    });
</script>

测试：

在这里插入图片描述

如果 v-model 表达式的初始值未能匹配任何选项，`` 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

3.2 、组件

组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

<!--view 层  模板-->
<div id="app">
    <!--组件:传递给组件中的值：props-->
    <haohao v-for="item in items" v-bind:hao="item"></haohao>

</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //定义一个Vue组件component
    Vue.component("haohao", {
        props: ['hao'],
        template: '<li>{{hao}}</li>'
    })
    var vm = new Vue({
        el: "#app",
        //Model:数据
        data: {
            items: ['java', '前端', 'Linux']
        }
    });
</script>
  • Vue.component()：注册组件
  • haohao：自定义组件的名字
  • template：组件的模板
  • 使用props属性传递参数

说明：

  • v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:hao=“item”：将遍历的item项绑定到组件中props定义名为hao属性上；= 号左边的hao为props定义的属性名，右边的为item in items 中遍历的item项的值

4、Axios异步通信

4.1、 Axios简介

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

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

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。由于jQuery操作Dom太频繁，所以少用。

4.2 、测试Axios

  • 先准备伪数据
{
  "name": "haohao",
  "url": "https://blog.csdn.net/qq_56265207?type=lately",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://bilibili.com"
    },
    {
      "name": "King ",
      "url": "https://blog.csdn.net/qq_56265207?type=lately"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}
  • 测试代码
<!--view 层  模板-->
<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <a v-bind:href="info.url">点我</a>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        //data:属性：vm  这里是data()函数
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                info:{
                    name:null,
                    address:{
                       street:null,
                       city:null,
                       country:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数，链式编程
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>

说明：

  1. 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
  2. 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
  3. 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配

Vue生命周期图

在这里插入图片描述

5、Vue 计算属性、内容分发、自定义事件

5.1 计算属性

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

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层  模板-->
<div id="app">
    <p>currentTime1{{currentTime1()}}</p>
    <p>currentTime1{{currentTime2}}</p>

</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model:数据
        data: {
            message: "Hello"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {//计算属性：methods,computed 方法名不能重名
            currentTime2: function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

注意：

  • methods和computed里的东西不能重名,重名之后，只会调用methods的方法

说明：

  • methods：定义方法， 调用方法使用currentTime1()， 需要带括号
  • computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化

总结

调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

5.2 、内容分发(插槽)

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

需求：需要把下面的内容，让标题和内容通过插槽插入内容

<p>吉吉学习java</p>
<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
  • 定义一个代办事情的组件
 Vue.component('todo',{
        template:'<div>\
                	<div>代办事项</div>\
               	 	<ul>\
                    	<li>吉吉学习java</li>\
               		</ul>\
            	  </div>'
    });
  • 将上面的代码留出一个插槽，即slot
 Vue.component('todo',{
        template:'<div>\
                	<slot"></slot>\
                	<ul>\
                    	<slot"></slot>\
               		</ul>\
            	  </div>'
    });
  • 定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件
Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
   
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{{index+1}},{{item}}</li>"
    });
  • slot通过name和组件绑定
//slot:插槽
Vue.component('todo', {
    template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
});
  • 实例化Vue并初始化数据
var vm = new Vue({
    el: "#vue",
    data: {
        title: "吉吉学习java",
        todoItems: ['test1', 'test2', 'test3']
    }
});
  • 将数据通过插槽插入预留出来的位置
<!--view层，模板-->
<div id="vue">
    <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"></todo-items>-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

说明：

slot：是绑定组件用的

:title --> 是v-bind:title的缩写

  • 完整代码
<!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="vue">
    <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"></todo-items>-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    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>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items", {
        props: ["item"],
        template: "<li>{{item}}</li>"
    });
    var vm = new Vue({
        el: "#vue",
        data: {
            title: "吉吉学习java",
            todoItems: ['test1', 'test2', 'test3']
        }
    });
</script>
</body>
</html>

在这里插入图片描述

5.3 、自定义事件

我们可以发现一个问题，如果删除操作要在组件中完成，那么组件如何删除Vue实例中的数据？

删除按钮是在组件中的，点击删除按钮删除对应的数据。此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 组件中使用this.$emit(‘自定义事件名’， 参数) ，而在视图层通过自定义事件绑定Vue中的删除操作的方法

步骤：

  • 在Vue实例中定义一个删除操作的方法removeItems()
methods: {
        removeItems: function (index) {
        this.todoItems.splice(index, 1);
    }
}

说明: splice(index,n)方法是操作index下标开始的n个元素

  • 在视图层中自定义事件并绑定Vue实例中的方法
<!--view层，模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>

        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

自定义事件为remove，通过v-on绑定removeItems方法

  • 在相应的组件中绑定自定义事件
Vue.component("todo-items", {
    props: ["item","index"],
    template: "<li>{{item}}--->{{index}}<button @click='remove'>删除</button></li>",
    methods:{
        remove: function(index){
            this.$emit('remove', index);
        }
    }
});

完整代码：

<!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="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>

        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    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>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items", {
        props: ["item","index"],
        template: "<li>{{item}}--->{{index}}<button @click='remove'>删除</button></li>",
        methods:{
            remove: function(index){
                this.$emit('remove', index);
            }
        }
    });
    var vm = new Vue({
        el: "#vue",
        data: {
            title: "吉吉学习java",
            todoItems: ['test1', 'test2', 'test3']
        },
        methods: {
                removeItems: function (index) {
                this.todoItems.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>

逻辑理解：
在这里插入图片描述

5.4、 Vue入门小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on绑定事件，简写@
  • v-model数据双向绑定
  • v-bind给组件绑定参数，简写：

组件化：

  • 组合组件slot插槽
  • 组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
  • 计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

6、第一个Vue-cli项目

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板，预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速

项目的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

6.2、 环境配置

Node.js

下载地址： http://nodejs.cn/download/

确认是否安装成功：

  • 在cmd中运行node -v命令，查看是否能够输出版本号

  • 在cmd中运行npm -v命令，查看是否能够输出版本

在这里插入图片描述

安装node.js淘宝镜像加速器（cnpm）

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题，但是每次install都需要
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

cnpm install vue-cli -g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

在这里插入图片描述

6.3、 第一个vue-cli应用程序

  • 找到一个项目路径(空文件夹)，或者在D盘新建一个目录
  • 创建一个基于webpack模板的vue应用程序
#1、首先需要进入到对应的目录 cd D:\JAVA\IDEA\Project\vue、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

创建过程需要的操作

一路选no

  • Project name：项目名称，默认回车即可
  • Project description：项目描述，默认回车即可
  • Author：项目作者，默认回车即可
  • Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
  • Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
  • Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果

当出现问题时，它会给出提示我们按照提示来就行

在这里插入图片描述

  • 初始化并运行myvue项目
（CMD 命令）
# 进入文件夹
cd myvue
# 安装环境(这一步很重要哦)
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c

7、 Webpack

7.1、 什么是Webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
 Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
 伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

7.2、为什么要使用webpack

如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;

类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

scss，less等CSS预处理器

……
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

7.3、 安装 Webpack

WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。

安装命令

（CMD 命令）
npm install webpack -g --registry=https://registry.npm.taobao.org
npm install webpack-cli -g --registry=https://registry.npm.taobao.org

测试是否安装成功

webpack -v
webpack-cli -v

7.4、配置

创建 webpack.config.js 配置文件

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
  • output：输出， 指定WebPack把处理完成的文件放置到指定路径
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

直接运行 webpack 命令打包

7.5、使用webpack

1、创建项目 ： webpack-study（直接新建一个文件夹）

2、创建一个名为modules的目录，用于放置JS模块等资源文件

3、在modules下创建模块文件 ：hello.js

用于编写JS模块相关代码

// 暴露一个方法
exports.sayHi = function(){
    document.write("<h1>Hello World</h1>");
}

4、在 modules 下创建一个名为 main.js 的入口文件，用于打包时设置entry属性

// 引入 hello.js
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();

5、在 webpack-study 目录下创建 webpack.config.js 配置文件，使用webpack命令打包

// 把 module 导出
module.exports = {
    // 目标文件
    entry: './modules/main.js',
    // 输出地址
    output: {
        filename: "./js/bundle.js"
    }
}

6、把刚刚编写的文件打包

webpack ./modules/main.js -o dist/js/bundle.js --mode development

在这里插入图片描述

7、在 HTML 页面中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../dist/js/bundle.js/main.js"></script>
</body>
</html>

8、vue-router

8.1、 说明

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5历史模式或hash模式，在IE9中自动降级
  • 自定义的滚动条行为

8.2、安装

基于第一个vue-cli进行测试学习;

先查看node_modules中是否存在 vue-router
vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入项目目录，输入下面命令。

cmd 进入 myvue 目录，并执行

cnpm install vue-router --save-dev

安装完之后去node_modules路径看看是否有vue-router信息 有的话则表明安装成功

8.3、使用

1、清理代码

删除 src 目录下的图片、components 目录下的组件

修改 App.vue

<template>
  <div id="app">
  </div>
</template>
<script>
export default {
  name: "App"
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js:

import Vue from 'vue'
import App from './App'
import router from 'router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

启动项目

# 启动项目
npm run dev
报错时修复代码：
cnpm install --save router

修改 App.vue

<template>
  <div id="app">
    <h1>好好</h1>
  </div>
</template>

发现项目自动 Bulid ，页面自动刷新,这就是 Vue 的热部署

  1. 在 components 中新建一个 Vue 组件 ：Content.vue
<template>
  <h1>Content</h1>
</template>
<script>
export default {
  name: "Content"
}
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>
  1. 在 components 中新建一个 Vue 组件 ：Main.vue
<template>
  <h1>首页</h1>
</template>
<script>
export default {
  name: "main"
}
</script>
<style scoped>
</style>
  1. 在 src 下新建一个包（router），在该包中新建一个文件：index.js
// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
  routes: [
    {
      // 类似于 @RequestMapping 接收一个请求，返回一个页面
      // 路由的路径
      path: '/content',
      // 配置名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
      // 路由的路径
      path: '/main',
      // 配置名称
      name: 'Main',
      // 跳转的组件
      component: Main
    }
  ]
});
  1. 修改 main.js
import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件
// 注意！！ 这里必须写 router ，写错前端页面就报错
import router from "./router/index";

Vue.config.productionTip = false
new Vue({
  el: '#app',
  // 配置路由,上面的组件名
  router,
  components: { App },
  template: '<App/>'
})
  1. 修改 App.vue 中的 template 部分
<template>
  <div id="app">
    <h1>呵呵</h1>
    <!--跳转链接，点击链接显示对应内容-->
    <!--类似于原来的 <a></a> ;
        to 类似于原来的 href,后面的值就是配置的路由-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图，理解为用于展示上面两个链接对应内容的区域-->
    <router-view></router-view>
  </div>
</template>
King Gigi.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
一、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-else、v-else-if10.v-for四、Vue常用特性1. 表单操作基于vue的表单操作表单域修饰符2.自定义指令Vue.directive 注册全局自定义指令自定义指令局部指令3. 计算属性4. 侦听器5. 过滤器6. 生命周期 Vue是一套用于构建用户界面的渐进式框架
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 5160
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 3948
Vue的基础知识，持续整理中。。。
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础入门
我的的博客哦
05-17 8423
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue基础入门
weixin_58470558的博客
05-13 4438
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 3358
Vue 入门基础篇
vue 基础知识总结
qq_40046544的博客
09-14 3051
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
Vue基础1
01-07
第一个小实验 基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的内容 v-text：同样解决网速慢引起的标签显示问题，覆盖元素中的原本内容 v-html: 覆盖元素中的所有内容。显示msg占位符中的内容。 v-bind:用于绑定属性的指令。**简写为“ ： ”**在其绑定的属性中可以添加合法的JS表达式。 参考图 作者：萧兮猿
vue基础知识-菜鸟入门
01-03
vue基础
Vue入门介绍与基本语法操作(图文详细，循序渐进)
m0_56369204的博客
06-27 444
想要学习Vue.js并掌握其基本语法和操作吗？本篇技术博客将带你进入Vue.js的世界，通过图文详细的解释和示例，让你轻松入门Vue.js。通过本博客的学习，你将对Vue.js的基础语法和操作有一个清晰的了解，无论你是初学者还是有一定经验的开发者，本篇技术博客都将为你提供有价值的内容，帮助你快速入门Vue.js，并掌握其基本语法和操作。 不要错过这个机会，立即开始你的Vue.js之旅！
vue基础详解（全）
梁婉玲krysliang的博客
02-14 7596
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
Vue的快速入门通俗易懂(学习笔记)
吉屋安的博客
05-22 1332
本文是观看“【狂神说Java】Vue最新快速上手教程通俗易懂 ”所记录的笔记，读者结合视频阅读更佳，文章包含了个人对相关知识点的粗略理解，借此进行分享，文中代码结构理解有误的地方，还请大家指出。本文章将不断更新，直至视频学完 目录一、Vue的基本语法二、Vue的绑定事件三、Vue的双向绑定四、Vue的组件讲解五、Vue的Axios异步通信六、Vue的计算属性七、Vue的插槽slot八、Vue的自定义事件的分发九、Vue的webpack十、Vue的路由十一、Vue的element-UI十二、Vue的路由嵌.
vue基础知识汇总
yuandawang的博客
01-06 5802
vue基础知识汇总
Vue入门基础
XMY021016的博客
02-17 1276
Vue快速入门 1、Vue概述 (1) 什么是Vue vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手。 （2）Vue和其他框架 使用vue可以实现视图页面上的组件重复使用，提高了开发和维护的效率！同时优化了页面的加载和 渲染的效率，提高了用户体验。 --React： 重量级框架，一般中大型项目、大厂会直接使用React技术开发项目 封装较为彻底，定制化功能较差，需要有一定的技术门槛 运行时性能得到
Vue基础知识汇总
m0_69631269的博客
05-17 1320
自定义指令总结：一、定义语法：(1).局部指令：new Vue({new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数})})(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。(2).inserted：指令所在元素被插入页面时调用。(3).update：指令所在模板结构被重新解析时调用。
Toxi / Oxy Pro 便携式气体检测仪参考手册 使用说明书
最新发布
04-28
Toxi Oxy Pro 便携式气体检测仪参考手册 使用说明书
Vue基础、vue实战
05-17
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。它非常易于学习和使用，并且有许多强大的功能，使其成为Web开发人员的首选框架之一。 以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和事件。 4. 生命周期钩子函数：Vue提供了许多生命周期钩子函数，使开发人员能够在组件的不同阶段执行自定义逻辑。 Vue实战包括以下内容： 1. 创建一个Vue应用程序 2. 使用Vue组件化开发 3. 使用Vue指令操作DOM元素 4. 使用Vue路由实现单页应用程序 5. 使用Vue和Axios实现数据请求和响应 6. 使用Vue和Vuex实现状态管理 7. 使用Vue和Webpack实现项目构建和打包 8. 使用Vue和ElementUI实现UI组件的开发 总之，Vue是一个非常强大且易于使用的JavaScript框架，可以帮助开发人员快速构建交互式Web应用程序。Vue实战是一个非常好的学习Vue的方式，可以帮助开发人员了解如何实现实际项目中的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King Gigi.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值