• 二、前端-VUE（2）

    目录 🌻🌻

    一、第一个Vue程序

    Vue官网

    1.1、什么是MVVM

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

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

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

    在这里插入图片描述

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

    1.2、为什么要使用MVVM

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

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

    MVVM的组成部分

    在这里插入图片描述

    （1）View

    View是视图层， 也就是用户界面。前端主要由HTML和CSS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

    （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可以安装Vue的插件!

    注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

    （1）下载地址

    开发版本

    包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
    删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.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
    • 2
    • 3

    （2）代码编写

    Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：

    1、创建一个HTML文件

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    安装成功显示如下：

    在这里插入图片描述

    创建 第一个vue 程序

    在这里插入图片描述
    步骤：

    1. 创建一个HTML文件
    2. 引入Vue.js
    3. 创建一个Vue实例
    4. 将数据绑定到页面元素

    说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果， 是不是和EL表达式非常像?

    1. 创建一个HTML文件
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    1. 引入Vue.js
    <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    • 1
    • 2
    1. 创建一个Vue实例
    <script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 将数据绑定到页面元素
    
<div id="app">
    {{message}}
div>

    • 1
    • 2
    • 3
    • 4

    （3）完整的HTML

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

<div id="app">
    {{message}}

div>

<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 vue"
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    在这里插入图片描述

    说明：

    el: '#vue'：绑定元素的ID

data:{message:'hello vue'}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

    • 1
    • 2
    • 3

    （4）测试

    为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：

    1. 在浏览器上运行第一个Vue应用程序， 进入开发者工具
    2. 在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld

    在这里插入图片描述

    此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。

    二、基础语法指令

    2.1、v-bind

    我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!

    我们还可以使用v-bind来绑定元素特性!

    上面代码显示

    DOCTYPE html >
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'页面加载于'+new Date().toLocaleString(),
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述
    鼠标悬浮上面将会出现“页面加载于xxxx”

    • 你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
    • 如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

    在这里插入图片描述

    2.2、v-if， v-else

    什么是条件判断语句，就不需要多说明了吧，以下两个属性!

    • v-if
    • v-else

    上代码

    DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <h1 v-if="ok">Yesh1>
    <h1 v-else>Noh1>
   
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            ok: true
        }
    });
script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    测试：

    在这里插入图片描述

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

    在这里插入图片描述

    注：使用v-*属性绑定数据是不需要双花括号包裹的

    • v-else-if
    • v-if
    • v-else-if
    • v-else

    注：=== 三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码：

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

<div id="app">

    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else-if="type==='C'">Ch1>
    <h1 v-else>Dh1>

div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({

        el:'#app',

        data:{
            type:'B'
        }

    });
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    2.3、v-for

    • v-for

    格式说明

    <div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    li>

div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    注：items是数组，item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！

    上代码：
    (1)

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<ui id="app">

    <li v-for="item in items">
        {{item.message}}
    li>
ui>


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

<script type="text/javascript">

    var vm = new Vue({

        el:"#app",

        data:{

            items:[

                {message:"Daniel"},
                {message:"Jenny"},

            ],

        },

    });

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    在这里插入图片描述

    (2)

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

<div id="app">

    <li v-for="(item,index) in items">

        {{item.message}}-----------{{index}}
    li>

div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({

       el:'#app',
        data:{

           items:[

               {message:"Daniel"},
               {message:'Jenny'},
               {message:"hollow"}
           ]
        }

    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    在这里插入图片描述

    测试：在控制台输入vm.items.push({message:'大家都在学习吗？'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 大家都在学习吗？-----------3.

    在这里插入图片描述

    2.4、v-on

    v-on 监听事件

    emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!

    上代码：

    DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <button v-on:click="sayHi">点我button>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({

        el:'#app',

        data:{

            message: "Hello World",
        },

        methods:{

            sayHi:function (event) {
                //'this'在方法里面指向当前Vue实例
                alert(this.message)

            }
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述点击测试

    Vue还有一些基本的使用方式， 大家有需要的可以再跟着官方文档看看， 因为这些基本的指令几乎我们都见过了，一通百通!掌握学习的方式!

    三、表单双绑、组件

    3.1、什么是双向数据绑定

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

    值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

    （1）为什么要实现数据的双向绑定

    在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

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

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

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

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

<div id="app">

     输入的文本：<input type="text" v-model="message" value="hollow">{{message}}


div>

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

    var vm = new Vue({

        el:'#app',

        data:{

            message:'',
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    （2）多行文本

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">

    <textarea v-model="message">textarea>{{message}}

div>


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

<script type="text/javascript">

    var vm = new Vue({

        el:"#app",

        data:{
            message:"Daniel",
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    （3）单复选框

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

<div id="app">

    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}label>

div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({

        el:'#app',
        data:{

            checked:false,
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    （4）多复选框

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

<div id="app">

    多复选框：

    <input type="checkbox" id="daniel" value="Daniel" v-model="checkedNames">
    <label for="daniel">Daniellabel>

    <input type="checkbox" id="hollow" value="Hollow" v-model="checkedNames">
    <label for="hollow">Hollowlabel>

    <input type="checkbox" id="jenny" value="Jenny" v-model="checkedNames">
    <label for="jenny">Jennylabel>

    <span>被选中的值:{{checkedNames}}span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script type="text/javascript">

    var vm = new Vue({

        el:"#app",

        data:{

            checkedNames:[]
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    （6）单选按钮

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

<div id="app">

    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">Onelabel>

    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Twolabel>

    <span>选中的值：{{picked}}span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({

        el:'#app',

        data:{

            picked: 'Two'
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    在这里插入图片描述

    （7）下拉框

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

    <div id="app">

        <input type="radio" name="sex" value="男" v-model="pan">男
        <input type="radio" name="sex" value="女" v-model="pan">女

        <span>选中：{{pan}}span>br>

        <select v-model="pan">
            <option>Aoption>
            <option>Boption>
            <option>Coption>
            <option>Doption>
        select>

        <span>选中：{{pan}}span>br>
    div>


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

<script type="text/javascript">

    var vm = new Vue({

        el:"#app",

        data:{

            pan:"C"
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    在这里插入图片描述

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

    3.3、什么是组件

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

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

    （1）第一个Vue组件

    注意：在实际开发中，并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

    使用Vue.component()方法注册组件，格式如下：
    (1)

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

<div id="app">
    <pan>pan>
div>


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

<script>
    /*先注册组件*/
    Vue.component("pan",{

        template:"
  • Hollo World
    • "    

    });
    /*再实例化Vue*/
    var vm = new Vue({
        el:"#app",
    });
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    说明：

    Vue.component()：注册组件

    pan/ tx：自定义组件的名字

    template：组件的模板

    （2）使用props属性传递参数

    像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

    注意：默认规则下props属性里的值不能为大写；

    (2)

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

<div id="app">
    
    <pan v-for="item in items" v-bind:panh="item">pan>

div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script type="text/javascript">
    //定义组件
    Vue.component("pan",{

        props: ['panh'],

        template: '
  • {{panh}}
    • '    ,
    });

    var vm = new Vue({

        el:"#app",

        data:{

            items:["Java","Python","Linux"]
        }
    });
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述
    说明：

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

    四、Axios异步通信

    4.1、什么是Axios

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

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

    GitHub

    中文文档

    4.2、为什么要使用Axios

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

    4.3、第一个Axios应用程序

    咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下

    {
  "name": "爪哇知识库",
  "url": "https://mp.weixin.qq.com/s/i-VHagM1abEDecTF6Wb0NQ",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "泰然科技园",
    "city": "广东深圳市",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/535181459?spm_id_from=333.788.0.0"
    },
    {
      "name": "爪哇知识库",
      "url": "https://blog.csdn.net/weixin_42171159?spm=1010.2135.3001.5343"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    测试代码

    DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        [v-cloak]{
            display: none;
        }
    style>
head>
<body>
<div id="vue">
    <div>个人公众号：{{info.name}}div>
    <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}div>
    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}a> div>
div>


<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 type="text/javascript">
    var vm = new Vue({
        el:"#vue",
        //data：属性：vm
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在这里插入图片描述
    在这里插入图片描述

    说明：

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

    4.4、Vue的生命周期

    官方文档

    Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一>更新一>渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

    在这里插入图片描述

    在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

    文章所有源码 vue-first

  • 相关阅读:
    Time Series Data Augmentation for Deep Learning: A Survey
    【目标】给2022下半年的自己定几个计划
    35、数据表介绍
    python操作windows桌面实现鼠标、键盘操作，python之pyautogui库文档详解
    react跨域如何解决？
    Qt：多语言支持，构建全面应用程序“
    技术解密Java Chassis 3超实用的可观测性
    keepalived的vip实现nginx节点的主备
    Python中如何使用ThreadPoolExecutor一次开启多个线程
    BSP Day50
  • 原文地址：https://blog.csdn.net/weixin_42171159/article/details/126594320