前端技术栈三(vue+Axios)

最新推荐文章于 2025-04-18 19:41:39 发布

菜菜小林然

最新推荐文章于 2025-04-18 19:41:39 发布

阅读量1.5k

点赞数 14

分类专栏：前端技术栈文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_51580177/article/details/139754091

版权

一、Vue

1 基本介绍

1.1 Vue 是什么?

Vue (读音 /vjuː/，类似于 view) 是一个前端框架, 易于构建用户界面
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合
支持和其它类库结合使用
开发复杂的单页应用非常方便
Vue 是 Vue.js 的简称
官网: https://cn.vuejs.org/
git 地址: https://github.com/vuejs

1.2 MVVM

MVVM 思想

M∶即 Model，模型，包括数据和一些基本操作
V∶即View，视图，页面渲染结果
VM∶即 View-Model，模型与视图间的双向操作(无需开发人员干涉)
在 MVVM之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model渲染到View 中。而后当用户操作视图，我们还需要通过 DOM获取 View 中的数据然后同步到Model 中。
而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心Model 和View 之间是如何互相影响的
只要我们 Model 发生了改变，View上自然就会表现出来
当用户修改了View，Model 中的数据也会跟着改变。。
结果：把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如何操作 Model上, 大大提高开发效率

2 快速入门

2.1 基本使用

官网文档：https://cn.vuejs.org/v2/guide/index.html
下载: https://cn.vuejs.org/v2/guide/installation.html

为了让 IDEA 识别 Vue 代码，需要安装插件 Vue.js

关于解决idea应用市场加载不出来得，可自行百度

2.2 案例

2.2.1 需求

2.2.2 步骤

创建新文件夹 D:\idea_java_projects\vue , 直接拖到 Idea 工具，使用 idea 打开
将下载好的 vue.js 拷贝到 D:\idea_java_projects\vue\vue.js
创建 D:\idea_java_projects\vue\vue_quick_start.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue快速入门</title>
</head>
<body>
    <div id="app">
        <!--
        1.{
  {message}}：插值表达式
        2. message就是从model的data数据池获取
        3.当我们的代码执行时，会到data{}数据池进行匹配数据，如果匹配上就会替换吗，反之就是输出空

        -->
        <h1>欢迎你{
  {message}}--{
  {name}}</h1>
    </div>

    <!--引入vue.js-->
<script src="vue.js"></script>
<script>
    //创建vue对象
    /*
        1.创建Vue对象实例
        2.我们在控制台输出vm对象，看看对象的结构
     */
    let vm = new Vue({
        el:"#app",//创建的vue实例挂载到 id=app的div
        data:{//表示数据池，以k-v形式保存,根据自己的需求设置
            message:"Hello-Vue",
            name:"韩顺平教育"
        }
    })
    console.log("vm=>",vm);
    console.log("message",vm._data.message);
    console.log("name=",vm._data.name);
    console.log("message",vm.message);//等价的，他放了一份在data中，也放了一份在vm的根下
    console.log("name=",vm.name);
</script>
</body>
</html>

2.2.3 注意事项和使用细节

注意代码顺序，要求 div 在前，script 在后，否则无法绑定数据 【从上到下执行，也就是div得在前】

从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统，做到数据和显示分离
Vue 没有繁琐的 DOM 操作，如果使用 jQuery，我们需要先找到 div 节点，获取到 DOM 对象，然后进行节点操作, 显然 Vue 更加简洁

3 数据单向渲染

3.1 基本说明

3.2 需求分析/图解

演示 v-bind 的使用, 可以绑定元素的属性(如图

把准备好的 1.jpg 拷贝到 D:\idea_java_projects\vue\1.jpg

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>单向数据渲染</title>
</head>
<body>
<div id="app">
    <h1>{
  {message}}</h1>
    <!--
    1. 使用插值表达式引用 data 数据池数据是在标签体内
    2. 如果是在标签/元素 的属性上去引用 data 数据池数据时，不能使用插值表达式
    3. 需要使用 v-bind, 因为 v-bind 是 vue 来解析, 默认报红,但是不影响解析
    4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
    -->
    <!--<img src="{
  {img_src}}">-->
    <img v-bind:src="img_src" v-bind:width="img_width">
    <img :src="img_src" :width="img_width">

</div>
<script src="vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            message:"hello 耗子精",
            img_src:"1.jpg",
            img_width:"200px"
        }
    })
</script>
</body>
</html>

3.3 注意事项和使用细节

插值表达式是用在标签体的
如果给标签属性绑定值，则使用 v-bind 指令

4 数据双向绑定

4.1 需求分析

需求在输入框中输入信息，会更新到相应绑定的位置

4.2 代码实现

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>双向数据渲染</title>
</head>
<body>
<div id="app">
    <h1>
        {
  {message}}
    </h1>

    <!--老韩解读
        1. v-bind 是数据单向渲染: data 数据池绑定的数据变化，会影响 view
        2. v-model="hobby.val" 是数据的双向渲染, (1)data 数据池绑定的数据变化，会影响 view 【底层的机制是 Data Bindings】
        (2)view 关联的的元素值变化, 会影响到 data 数据池的数据【底层机制是 Dom
        Listeners】
        -->
    <input type="text" v-model:value="hobby.val"><br/><br/>
    <input type="text" v-bind:value="hobby.val"><br/><br/>
    <p>你输入的爱好是：{
  {hobby.val}}~</p>
</div>

<script src="vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            message:"hi,输入你的爱好",
            hobby:{
                val:"购物"
            }
        }
    })
</script>
</body>
</html>