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

时间：2022-09-20 21:30:00 sub连接器78p

文章目录

快速入门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框架的作用：

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

1.2、第一个Vue程序

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

开发步骤

导入开发版本的Vue.js

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

创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法在页面上渲染数据

1.3、el:挂载点

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

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

<script> var app = new Vue({ 
           el:"app", data:{ 
           message:"Vue.js" } }) script>

Tips：

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

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

其他选择器可以使用吗？

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

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

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

1.4、data:数据对象

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

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

Tips:

data中可以写复杂类型的数据。
渲染复杂数据时，遵守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：

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

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: "点我跳转到百度哟~" } }) script>

Tips：

v-html指令的作用是设置元素的innerHTML。
内容中的html结构会被解析为标签。
v-text指令无论是什么内容都只会解析成文本。
解析文本使用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">
    
    <input type="button" value="点我试试" @click="doIt(666,'老铁')">
    <br>
    <label>
        
        <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：

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

2.4、案例–计数器



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>Documenttitle>
    <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>
    
    <a v-show="age>=18" href="https://www.baidu.com/">点我去百度a>
    
    <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：

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

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：

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

2.6、v-bind

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



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

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    
    
    <img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle+'!'" v-bind:class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc"  
            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

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

文章目录

相关文章