老板来碗小面加蛋~
老板来碗小面加蛋~

vue 学习 01 —— 基本语法

系列文章

vue 学习 01 —— 基本语法
vue 学习 02 —— vue-cli项目、Webpack、vue-router
vue 学习 03 —— ElementUI

文章目录

  • 系列文章
  • 一、概述
  • 二、第一个Vue程序
  • 三、Vue基本语法
    • 1、v-bind
    • 2、v-if和v-else
    • 3、v-for
    • 4、v-on
    • 5、v-model
    • 6、Vue.component
    • 7、Axios异步通信
      • 1、什么是Axios
      • 2、为什么要用Axios
      • 3、使用方法
    • 8、计算属性
    • 9、slot
    • 10、自定义事件

一、概述

Vue

Vue（读音 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同，Vue被设计为自底向上逐层应用。Vue的核心库只关注视图层（HTML、CSS、JS），不仅易于上手，还便于与第三方库（如vue-router：跳转、vue-resource：通信、vuex：管理）或既有项目整合。

  • 轻量级、体积小：Vue.js压缩后只有20kb，而Angular有56kb，React有44kb。
  • 移动优先，更适合移动端，比如移动端的Touch事件。
  • 易上手，学习曲线平稳，文档齐全。
  • 吸取了Angular（模块化优点）和React（虚拟Dom优点）的长处，并拥有自己独特的功能，例如计算属性。
  • 开源，社区活跃度高…

官网：https://cn.vuejs.org/v2/guide/

MVVM模式的实现者

  1. Model：模型层，【在第一个Vue程序中表示着JavaScript对象】
  2. View：视图层，用于展示ViewModel或Model的数据【在第一个Vue程序中表示着表示Dom（HTML操作的元素）】
  3. ViewModel：连接视图和数据的中间件，前端开发者在这一层对从后端获取的Model数据进行转换处理，将其封装为符合View层的视图数据模型。Vue.js就是MVVM中的ViewModel层的框架。

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

ViewModel能观察到数据的变化，并对视图对应的内容进行更新，同时它还能监听到视图的变化，能通知数据发送改变。简单点说，就是当数据变化后，界面上就会及时改变。

二、第一个Vue程序

1、新建一个文件夹vue/vue-first

vue 学习 01 —— 基本语法_第1张图片

2、用IDEA打开这个文件

vue 学习 01 —— 基本语法_第2张图片

3、新建文件 chapter-1/demo1.html

vue 学习 01 —— 基本语法_第3张图片

4、编写代码


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


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


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
    let vm = new Vue({
        el:"#app",
        //model层 数据，JS中{}表示一个对象，[]表示数组
        data:{
            message:"hello,vue"
        }
    })
script>
body>
html>

5、打开页面，可直接修改内容。

image-20210408173126393

vue 学习 01 —— 基本语法_第4张图片 vue 学习 01 —— 基本语法_第5张图片

说明：在没有刷新页面的情况下，我们完成了页面数据的修改。以前如果想要修改一般是通过DOM来操作标签的内容，现在Vue利用ViewModel将数据和视图双向绑定，当数据被修改时，视图也会即时改变。

三、Vue基本语法

1、v-bind

前面我们已经创建了第一个Vue应用，看起来和Thymeleaf 模板引擎很像，数据和DOM已经建立了关联，所有东西都是响应式的，界面可以实时更新。

我们还能使用v-bind来绑定元素


<html lang="en" 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/[email protected]/dist/vue.min.js">script>
<script>
    let vm = new Vue({
        el:"#app",
        //model层 数据
        data:{
            message:"hello,vue"
        }
    })
script>
body>
html>

这种v-bind带有前缀v-的指令，都属于Vue提供的。该指令是将这个元素节点（span）的title和Vue的实例message绑定。

我们可以再去浏览器的JavaScript控制台，输入app.message=“新内容”，将title的值改变。

效果：

vue 学习 01 —— 基本语法_第6张图片

2、v-if和v-else

就是判断语句，效果直接看代码。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue判断语句title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app">
    
    <h1 v-if="ok">YESh1>
    <h1 v-else>NOh1>
div>
<script type="text/javascript">
    // 创建好一个对象Vue，绑定至元素app（#app是ID选择器）
    let vm = new Vue({
        el:'#app',
        data:{
            ok: true
        }
    });
script>
body>
html>

效果：

vue 学习 01 —— 基本语法_第7张图片

下面演示下v-else-if


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue判断语句title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app">
    
    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else="type==='C'">Ch1>
div>
<script type="text/javascript">
    // 创建好一个对象Vue，绑定至元素app（#app是ID选择器）
    let vm = new Vue({
        el:'#app',
        data:{
            type: 'A'
        }
    });
script>
body>
html>

效果：

vue 学习 01 —— 基本语法_第8张图片

3、v-for

遍历指令：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue循环语句title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>
<div id="app">
    
	  
    <li v-for="item in items">
        
        {{item.message}}
    li>
div>

<script type="text/javascript">
    let vm = new Vue({
        // 绑定至元素app（#app是ID选择器）
        el:'#app',
        //数据是一个对象（花括号表示一个对象{}）
        data: {
            //对象中有一个数组（方括号表示数组[]）
            items: [
                //数组有三个元素，每个元素都是对象。对象内容是字符串
                {message: 'Java'},
                {message: '前端'},
                {message: '运维'}
            ]
        }
    });
script>
body>
html>

效果：

vue 学习 01 —— 基本语法_第9张图片

4、v-on

v-on可将元素绑定到事件上。


<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>绑定事件title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>

<div id="app">
    
    <button v-on:click="method1">按钮button>
div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
          message: '这是一条消息'
        },
        //所有的方法要写在methods对象中
        methods: {
            //方法名为method1的效果是 弹出一个对话框，对话框内容来自message
            method1: function () {
                alert(this.message);
            }
        }
    });
script>
body>
html>

效果：

vue 学习 01 —— 基本语法_第10张图片

5、v-model

Vue.js是一个MVVM框架，能双向绑定，即当数据变化时视图也会相应变化。

我们可以使用v-model对、