资讯详情

前端_快速入门Vue.js框架

文章目录

  • 快速入门Vue.js框架
    • 0、前言
    • 1、Vue.js框架
      • 1.1、Vue简介
      • 1.2、第一个Vue程序
      • 1.3、el:挂载点
    • 2、Vue指令
      • 2.2、v-html
      • 2.3、v-on
      • 2.4.案例-计数器
      • 2.5、v-show
      • 2.6、v-bind
      • 2.7、v-for
      • 2.8、v-model
    • 3、axios
      • 3.1、axios和ajax的区别
      • 3.2、ajax的使用
      • 3.3、axios的使用
      • 3.4.案例-获取笑话

快速入门Vue.js框架

0、前言

前后分离是一个非常流行的词，实现前后分离架构的技术栈之一是Spring Boot Vue.js”。

所以花了一个下午的时间学习Vue.js并记录一些笔记。

但是在学习Vue.js在框架需要知识:HTML、CSS、JavaScript、AJAX。

1、Vue.js框架

1.1、Vue简介

Vue.js框架的作用：

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动。

1.2、第一个Vue程序

详见:Vue.js框架官方文档

开发步骤

  1. 导入开发版本的Vue.js

    <!-- 开发环境版，包括有帮助的命令警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  2. 创建Vue实例对象，设置el属性和data属性

  3. 使用简洁的模板语法在页面上渲染数据

1.3、el:挂载点

el是用来设置Vue实例挂载(管理)元素。

<div id="app">     {     
       { message }} <!-- 等价于 Vue.js --> </div> 
<script> var app = new Vue({ 
           el:"app", data:{ 
           message:"Vue.js" } }) </script>

Tips：

  1. Vue实例的作用范围是什么？

    Vue会管理el选项命中的元素及其内部后代元素。

  2. 其他选择器可以使用吗？

    其他选择器可以使用，但建议使用ID选择器。

  3. 其他的可以设置吗？Dom元素？

    其他双标签可以使用，不能使用html和body标签。

1.4、data:数据对象

Vue数据定义中使用的是 data中。 

<script> var app = new Vue({ 
           el: "#app", data: { 
           message: " 你好 小黑! ", array: ["大明", "小明"], obj: { 
          } } }) </script>

Tips:

  1. data中可以写复杂类型的数据。
  2. 渲染复杂数据时，遵守js的语法即可。

1.4、小案例

vue基础小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
<div id="app">
    {
    
       { message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> var app = new Vue({ 
           el: "#app", data: { 
           message: " 你好 小黑! " } }) </script>
</body>
</html>

在这里插入图片描述

2、Vue指令

通过vue实现常见的网页效果，Vue指令指的是以v-开头的一组特殊的语法。

###　2.1、v-text

设置标签的文本值(textContext)。

<div id="app">
    <!-- 拼接一个"?"-->
    <h3 v-text="message+'？'">嗯哼</h3>
    <h2 v-text="info+'？'">嗯哼</h2>
    <h1>{
    
       { message +'？'}}嗯哼</h1>
</div>

<script> var app = new Vue({ 
           el: "#app", data: { 
           message: "我是大明！！！", info: "我的兄弟是小明！！" } }) </script>

Tips：

  1. v-text指令的作用是设置标签的内容(textContext)。
  2. 默认写法会替换全部内容，使用差值表达式“{ {}}”可以替换指定内容。
  3. 内部支持写表达式。

2.2、v-html

设置标签的innerHTML。

<div id="app">
    <h3 v-html="content"></h3>
    <h3 v-text="content"></h3>
    <h3 v-html="linkToBaidu"></h3>
    <h3 v-text="linkToBaidu"></h3>
</div>

<script> var app = new Vue({ 
           el: "#app", data: { 
           content: "百度一下", linkToBaidu: "<a href='https://www.baidu.com/'>点我跳转到百度哟~</a>" } }) </script>

Tips：

  1. v-html指令的作用是设置元素的innerHTML。
  2. 内容中的html结构会被解析为标签。
  3. v-text指令无论是什么内容都只会解析成文本。
  4. 解析文本使用v-text，需要解析html结构就使用v-html。

2.3、v-on

为元素绑定事件。

<!--语法-->
<div id="app">
    <input type="类型" value="值" v-on:click="函数名称">
</div>

<script> var app = new Vue({ 
           el:"#app", methods:{ 
           函数名称:function(){ 
           // 逻辑 } } }) </script>

小案例

<div id="app">
    <!--点击这个按钮，就会出发doIt事件，这个事件有两个自定义的参数-->
    <input type="button" value="点我试试" @click="doIt(666,'老铁')">
    <br>
    <label>
        <!--通过".修饰符"对事件进行限制，".enter"可以限制触发的按键为回车，即键盘按下回车后触发事件-->
        <input type="text" @keyup.enter="sayHello">
    </label>
</div>

<script> var app = new Vue({ 
           el: "#app", methods: { 
           // 两个参数 doIt: function (p1, p2) { 
           console.log("淦！"); console.log(p1); console.log(p2); }, sayHello: function () { 
           alert("你好啊，吃了没？"); } } }) </script>

Tips：

  1. v-on指令的作用是为元素绑定事件。
  2. 事件名不需要写on，例如onclick只需写成v-on:click。
  3. 指令可以简写为@。
  4. 绑定的方法定义在methods属性中。
  5. 方法内部通过this关键字可以访问定义在data中的数据。
  6. 事件绑定的方法写成函数调用的形式，可以传入自定义参数。
  7. 事件后面跟上".修饰符"可以对事件进行限制，例如，".enter"可以限制触发的按键为回车。
  8. 事件的修饰符有很多种，详见《Vue.js官方文档》。

2.4、案例–计数器

<!-- 案例分析： 1. 在data中定义num属性，类型是数字，渲染到2个按钮中间； 2. 减号绑定点击事件，对应的方法名叫sub，大于0之前递减，到0之后再次点击时弹出提示框； 3. 加号绑定点击事件，对应的方法名叫add，小于0之前累加，到10之后再次点击时弹出提示框。 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
    <style> #app { 
           width: 480px; height: 100px; margin: 200px auto; } .input-num { 
           margin-top: 20px; height: 100%; display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0 0 4px black; } .input-num button { 
           width: 150px; height: 100%; font-size: 40px; color: gray; cursor: pointer; border: none; outline: none; } .input-num span { 
           height: 100%; font-size: 40px; flex: 1; text-align: center; line-height: 100px; } </style>
</head>
<body>
<div id="app">
    <!-- 计数器 -->
    <div class="input-num">
        <button @click="sub"> -</button>
        <span>{
    
       { num }}</span>
        <button @click="add"> +</button>
    </div>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script> // 创建Vue实例 var app = new Vue({ 
           el: "#app", data: { 
           num: 1 // 修改的数字 }, methods: { 
           // 减 sub: function () { 
           // 递减 if (this.num > 0) { 
           this.num--; } else { 
           alert("别点啦,太小啦!"); } }, // 加 add: function () { 
           // 累加 if (this.num < 10) { 
           this.num++; } else { 
           alert("别点啦,太大啦!"); } } } }); </script>

2.5、v-show

根据表达式值的真或假(true或者false)，切换元素的显示和隐藏。

<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <img v-show="isShow" src="./img/monkey.gif" alt="">
    <br>
    <!-- 表达式为false-->
    <a v-show="age>=18" href="https://www.baidu.com/">点我去百度</a>
    <!-- 表达式为true-->
    <a v-show="age<18" href="https://www.bilibili.com/">点我去B站</a>
</div>

<script> var app = new Vue({ 
           el: "#app", data: { 
           isShow: false, age: 17 }, methods: { 
           changeIsShow: function () { 
           //isShow变量值取反 this.isShow = !this.isShow; } } }) </script>

Tips：

  1. v-show指令的作用是根据真假(true或者false)切换元素的显示状态。
  2. 原理是修改元素的display，实现显示和隐藏。
  3. 指令后面的内容，最终会解析为布尔值(true或者false)，若为true元素显示；若为false元素隐藏。
  4. 数据改变之后，对应元素的显示状态会同步更新。

2.6、v-if

根据表达式值的真或假(true或者false)，切换元素的显示和隐藏(操纵DOM元素)。

<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">大明</p>
    <p v-show="isShow">大明 - v-show修饰</p>
</div>

<script> var app = new Vue({ 
           el: "#app", data: { 
           isShow: false }, methods: { 
           toggleIsShow: function () { 
           this.isShow = !this.isShow; } }, }) </script>

Tips：

  1. v-if指令的作用是根据表达式值的真或假(true或者false)，切换元素的显示和隐藏(操纵DOM元素)。
  2. 本质是通过操纵DOM元素来切换显示状态。
  3. 表达式的值为true则元素存在于DOM树中，反之，从DOM树中移除。
  4. v-show的资源消耗更小，所以频繁的切换使用v-show，反之使用v-if。

2.6、v-bind

设置元素的属性，例如src、title、class……。

<!-- v-bind:属性名=表达式 -->

<style> .active { 
           border: 1px solid red; } </style>

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <!-- 点击图片触发事件，给设置img元素的class属性 -->
    <!-- v-bind:class="表达式(true or false)" -->
    <img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle+'!'" v-bind:class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc"  

        标签： sub连接器78p
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台