08-Vue 入门的实现

一、VUE 简介

什么是VUE?

VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。

如何理解框架？
可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。

什么场景使用VUE？

绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博...

VUE 快速入门

官方js文件下载

cn.vuejs.org

业务及代码实现

构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。

第一步：定义HTML页面并引入vue.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/js/vue.js"></script>
</head>
<body>
</body>
</html>

第二步：在html页面中的body内部添加如下元素。

 <div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
 </div>

说明：

1)在界面中要添加vue对象要监控元素,习惯上都用 id="app"
2)找到界面中将来可能发生变化的位置，用{{变量名}}特殊语法标记出来
3)找到界面中可以点击的位置绑定事件处理函数。

第三步：在html页面中的body底端部分构建JS代码实现

在JS中创建一个Vue类型的对象来监视页面中的内容。

<script>
    new Vue({
      el:"#app",
      data:{
        n:0 //起始值为0
      },
      methods:{
        add(){
          this.n++ //访问data中变量必须用this
        },
        minus(){
          if(this.n>0){ this.n-- }
        }
      }
    })
  </script>

其中：
1)el(element缩写)属性:"选择器"，为Vue对象要监视的范围。
2)页面所有变量，都必须保存在data属性中，且以对象属性形式保存。
3)页面所有事件处理函数，都必须保存在methods属性中，且以对象方法形式保存。
02-VUE中的MVVM设计分析

vue.js

发布于 10月8日

MVVM 简介

背景分析

在早期的web前端开发中，我们通常将页面构成分成三部分:

html 用于定义网页结构、呈现网页内容。
css 为页面元素添加相关样式。
JS 为页面添加交互行为。

在这种开发结构中，因为HTML和CSS中不支持变量，不支持分支、循环等程序结构，任何一个地方的修改都需要依赖js来实现。导致js中存在大量重复的步骤和编码！

MVVM设计概述

MVVM是一种设计思想，对早期的web前端开发做了增强，将前端代码按其职责的不同分成了三部分：

界面(View)部分：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
模型部分(Model)：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
视图模型(ViewModel):专门负责自动维护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据可以自动同步到界面上，几乎避免了大量重复的编码！

二、VUE中的MVVM实现

设计分析

MVVM在VUE前端框架中的设计，如图所示：

代码实践分析

基于VUE中MVVM分析，先对代码实现过程进行分析，如图所示：

三、VUE中的插值(interpolation)语法实现

背景分析

在传统的html页面中我们可以定义变量吗？当然不可以，那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义html标签库方式，然后以html作为模板，在服务端解析也可以实现，但这样必须通过服务端进行处理，才可以做到，能不能通过一种技术直接在客户端html页面中实现呢？

VUE中的插值语法

这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码编写。其基本语法为：

<HTML元素>{{变量或js表达式}}</HTML元素>

在{{}}内部可以写:变量、算术计算、三目、访问数组元素、创建对象、调用函数等，总之只要有返回的合法的js变量和表达式都行。但是不可以写程序结构(分支和循环)以及没有返回值的js表达式。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>用户名:{{username}}</h3>
    <h3>性别:{{gender==1?"男":"女"}}</h3>
    <h3>小计:¥{{(price*count).toFixed(2)}}</h3>
    <h3>下单时间: {{new Date(orderTime).toLocaleString()}}</h3>
    <h3>今天星期{{week[new Date().getDay()]}}</h3>
  </div>
  <script> new Vue({
      el:"#app",
      data:{
        uname:"dingding",
        gender:1,
        price:12.5,
        count:5,
        orderTime:1600228004389,
        week:["日","一","二","三","四","五","六"]
      }
    }) </script>
</body>
</html>

三、VUE中常用的指令操作

背景分析

传统的html并不支持表达式、分支语句、循环语句等结构的定义，为了弥补其不足很多前端框架，模板引擎通过在html元素中添加自定义属性，然后底层再借助解析引擎对html自定义属性进行处理，以这样的方式来增强html的功能。

Vue中的常用指令

v-bind

在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：

<元素 v-bind:属性名="变量或js表达式">

也可以采用其简化形式，其基本语法如：

<元素 :属性名="变量或js表达式">

案例分析：

 <div id="app">
        <font :color="color">hello</font>
    </div>
    <script> new Vue({
            el:"#app",
            data:{
                color:"red"
            }
        }); </script>

v-show

v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：

<元素 v-show="bool类型的变量或返回bool类型的js表达式">

当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。

示例关键代码如下：

 <style> .pop{
      width:300px; height:150px;
      background-color:lightGreen;
    }
    .pop>.close{
      float:right;
      padding:5px 10px;
      cursor:pointer;
    } </style>

 <div id="app">
    <button @click="show">show</button>
    <div v-show="display" class="pop">
      <span class="close" @click="hide">×</span>
    </div>
 </div>

 <script> //2. 创建new Vue对象
        new Vue({
          el:"#app",
          data:{
            display:false
          },
          methods:{
            show(){
              this.display=true;
            },
            hide(){
              this.display=false;
            }
          }
        }) </script>

v-if 和 v-else

v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：

<元素1 v-if="boolean类型的变量或js表达式">
<元素2 v-else>

示例关键代码如下：

 <div id="app">
    <!--第一个div是已登录时显示的内容-->
    <div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
    <!--第二个div是未登录时显示的内容-->
    <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        isLogin:false //开局用户默认是未登录的
      },
      methods:{
        login(){
          this.isLogin=true;
        },
        logout(){
          this.isLogin=false;
        }
      }
    }) </script>

v-else-if

v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：

<元素1 v-if="条件1">

<元素2 v-else-if="条件2">

<元素3 v-else-if="条件3">

... ...
<元素n v-else>

注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。

示例关键代码如下：

<div id="app">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80">良好</span>
    <span v-else-if="score>=70">及格</span>
    <span v-else>及格</span>
 </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        score:95
      }
    })
    //在控制台中: vm.socre=85 </script>

v-for

v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：

<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">

示例关键代码如下：

<div id="app">
    <!--需求: 根据tasks数组中的任务列表反复生成多个li-->
    <ul>
      <li v-for="(t,i) of tasks" :key="i">
      {{i+1}} - {{t}}
      </li>
    </ul>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        //用一个数组保存待办事项列表
        tasks:["吃饭", "睡觉"]
      }
    }) </script>

v-for还可以遍历对象属性，例如：

<div id="app">
    <!--需求: 遍历lilei对象，在页面显示李磊对象的详细信息-->
    <ul>
      <li v-for="(value,key) of lilei" :key="key">
        {{key}} : {{value}}
      </li>
    </ul>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        lilei:{
          name:"Li Lei",
          age:11
        }
      }
    }) </script>

v-for 还可以进行计数，例如：

 <div id="app">
    <ul>
      <li v-for="i of pageCount" :key="i">{{i}}</li>
    </ul>
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        pageCount:5 //共5页
      }
    }) </script>

v-on

v-on 是一个专门绑定事件处理函数的指令，其基本语法为：

<元素 v-on:事件名="事件处理函数名()">

v-on 也可以使用@符号代替，其基本语法结构为：

 <元素 @事件名="事件处理函数名()

如果事件处理函数不需要传入实参值，则()也可省略,例如：

<元素 @事件名="事件处理函数名">

凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。

示例关键代码如下：

<div id="app">
<!--点哪个div，哪个div就可以喊自己疼！-->
<div id="d1" @click="say('html')">d1</div>
<div id="d2" @click="say('css')">d2</div>
</div>

 <script>
    new Vue({
      el:"#app",
      methods:{
        say(name){
          console.log(`hello ${name}!`)
        }
      }
    })
  <script>

v-html

如果{{}}绑定的是一段HTML片段时，是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的,假如希望html可被解析可以使用v-html代替{{}}。其基本语法结构为：

<元素 v-html="变量"> 这个位置显示变量内容 </元素>

示例关键代码如下：

 <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        msg:`来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息`
      }
    }) </script>

v-text

v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：

<元素 v-text="变量或js表达式"> </元素>

示例关键代码如下：

 <div id="app">
            <!--js的天下         -->
    <h3 v-text=`用户名:${uname}`></h3>
            <!--js的天下         -->
    <h3 v-text=`积分:${score}`></h3>
  </div>

 <script> setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000) </script>

v-model

v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：

<表单元素 v-model:value="变量">

示例关键代码如下：

 <div id="app">
    <!--单向绑定: (Model->View 不能View->Model)-->
    <!-- <input :value="keyword"> -->
    <!--双向绑定: (Model->View 又能View->Model)-->
    <input v-model:value="keyword">
    <button @click="doUpdate">更新</button>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        keyword:"ABC" //开局用户没有输入任何关键词
      },
      methods:{
        doUpdate(){
          console.log(`查找 ${this.keyword} 相关的内容...`)
        }
      }
    })
  <script>

单选操作的双向绑定：

单选操作的value因为是写死的固定的备选值！用户在不同radio之前切换选中状态时，其实改变的是radio的checked属性值。所以，想用双向绑定获得当前选中的radio的值，应该绑定checked属性:

<input type="radio" value="固定值" v-model:checked="变量">

示例代码如下：

<div id="app">
    性别:
    <label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
    <label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
    <h3>您选的性别是:{{sex==1?"男":"女"}}</h3>
 </div>

 <script> new Vue({
      el:"#app",
      data:{
        sex:1
      }
    }) </script>

select元素的双向绑定

一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：

<select v-model:value="变量">
 <option value="值1">xxx</option>

 ... ...

 ... ...
</select>

示例代码如下：

 <div id="app">
    <select v-model:value="src">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="hangzhou">杭州</option>
    </select><br/>
    <img :src="src">
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        src:"beijing"
      }
    }) </script>

总结(Summary)

本节就是对vue简单的一个介绍及实现

08-Vue 入门的实现

一、VUE 简介

什么是VUE?

什么场景使用VUE？

VUE 快速入门

官方js文件下载

业务及代码实现

02-VUE中的MVVM设计分析

MVVM 简介

背景分析

MVVM设计概述

二、VUE中的MVVM实现

设计分析

代码实践分析

三、VUE中的插值(interpolation)语法实现

背景分析

VUE中的插值语法

三、VUE中常用的指令操作

背景分析

Vue中的常用指令

v-bind

v-show

v-if 和 v-else

v-else-if

v-for

v-on

v-html

v-text

v-model

总结(Summary)

小韩

引用和评论

SpringCloud10-Springboot 整合RabbitMQ

开发插件集合

Vue.js-方法与事件

Vue 项目推荐使用这个图标库 vue-icons-plus

Vue使用mixins

IDEA 2024.1永久破解激活教程

这个前端神器，竟让滴滴、美团都爱不释手？！