5.Vue基础学习

已于 2023-04-08 22:39:16 修改
阅读量384 收藏
点赞数
分类专栏： 项目1：金融借钱还钱 文章标签： vue.js 学习 javascript
于 2023-04-08 12:37:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44724899/article/details/130026938
版权

五.Vue基础学习

1.什么是Vue

2.如何开始Vue

3.Vue的使用

4.Vue关键字的使用

5.Vue实例

6.Element-UI的简介

7.Element-UI的使用

8.Vue-Router的简介

9.Vue-Router的使用

五.Vue基础学习

1.什么是Vue

  • vue是javascript的框架
  • 能够动态构建用户界面

2.如何开始Vue

  • ①引入Vue.js
  • ②新建Vue对象（绑定数据节点，渲染页面）
  • ③定义数据节点（dom对象）

3.Vue的使用

①文本位置使用数据模型

  • 在文本位置
    插值表达式{{}}
  • 具体使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--单页应用：整个引用程序只有一个主页面，其他的所有页面嵌套在该页面中-->
    <div id="app">
      <!--插值表达式，声明式渲染-->
      {{title}}
      <p>欢迎{{user.username}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app', //css3选择器语法，element的简写
        data: {
          title: '第一个vue程序',
          user: {
            username: 'hellen',
            age: 18,
          },
        },
      })
    </script>
  </body>
</html>

②属性位置使用数据模型（单向绑定）

  • 单向绑定（更改数据模型 dom对象变，更改dom对象数据模型不变）
    v-bind
  • 练习
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="site">{{company}}</a>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          company: '尚硅谷',
          site: 'http://www.atguigu.com',
        },
      })
    </script>
  </body>
</html>

③属性位置使用数据模型（双向绑定）

  • 双向绑定（属性变，数据模型变。数据模型变，属性也变）
    v-model:（注意，只用在与用户交互的dom对象中）
    可以简略写为:

  • MVVM
    通过dom对象监听器和数据绑定器实现双向绑定
    view（html）和model（Vue对象）
    在这里插入图片描述

  • 练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" :value="company" />
      <input type="text" v-model:value="company" />
      <a v-bind:href="site">{{company}}</a>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          company: '尚硅谷',
          site: 'http://www.atguigu.com',
        },
      })
    </script>
  </body>
</html>

④属性位置的事件监听调用模型方法

  • 事件调用方法
    v-on:click
    简洁方法@click
  • 练习
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="hello">点击事件</button>
      <button @click="hello">点击事件</button>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          hello() {
            alert('hello')
          },
        },
      })
    </script>
  </body>
</html>

⑤Vue对象的计算属性和方法属性

  • 计算属性和方法属性
    methods:{}
    computed:{}
    第一个每次调用都会重新执行，第二个每次调用都会缓存一次结果，之后调用不会再次执行
  • 练习
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{message}}</p>
      <!--缺点：大量业务逻辑写在视图中，页面代码不简洁-->
      <p>翻转字符串：{{ message.split('').reverse().join('')}}</p>
      <!--计算属性-->
      计算属性：{{reverseMessage}}
      <!--方法,缺点：调用一次执行一次，没有缓存，效率较低-->
      方法：{{reversed()}} {{reversed()}} {{reversed()}}
      <!--计算属性,优点，调用多次执行一次，有缓存，效率高-->
      方法：{{reverseMessage()}}
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello',
        },
        methods: {
          reversed() {
            console.log('方法被调用')
            return this.message.split('').reverse().join('')
          },
        },
        //属性方式（只会调用一次）
        computed: {
          reverseMessage() {
            return this.message.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>
</html>

⑥计算属性如何实现双向绑定

  • 引言
    计算属性可以结果可以直接写在input对象的v-model属性里面，此时更改计算属性引用的Vue对象模型相应的会更改计算属性结果，但是更改计算属性结果，如何更改相应的Vue对象模型
  • 使用
    计算属性每个方法都有get，set方法
    get是获取值时调用的
    set是值改变时调用的
  • 例子
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      姓: <input placeholder="First Name" v-model="firstName" /><br />
      名: <input placeholder="Last Name" v-model="lastName" /><br />
      全名：{{fullName1}}
      姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
      姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          firstName: 'Helen',
          lastName: 'Yao',
        },
        computed: {
          fullName1() {
            console.log('计算fullName1')
            return this.firstName + ' ' + this.lastName
          },
          fullName2: {
            get() {
                console.log('计算fullName2')
                return this.firstName + ' ' + this.lastName
            },
            //当给fullName2指定新值时自动调用：实现双向绑定
            set(value) {
                console.log('fullName2 的 setter')
                const names = value.split(' ')
                this.firstName = names[0]
                this.lastName = names[1]
            },
        },
        },
      })
    </script>
  </body>
</html>

⑦监听事件实现双向绑定

  • 监听事件
    一个数据模型的属性对应一个监听事件的方法，名称都相同。
    当数据模型的属性改变时调用监听方法。
  • 监听事件
    能够实现双向绑定。
    watch:
  • 例子
<body>
    <div id="app">
        姓: <input placeholder="First Name" v-model="firstName" /><br />
        名: <input placeholder="Last Name" v-model="lastName" /><br />
        姓名: <input placeholder="Full Name" v-model="fullName" /><br />
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'Helen',
                lastName: 'Yao',
                // fullName: 'Helen Yao',
            },

            watch: {
                //当firstName改变时自动调用
                firstName(value) {
                    console.log('watch firstName')
                    this.fullName = value + ' ' + this.lastName
                    console.log(this.fullName)
                },

                //当lastName改变时自动调用
                lastName(value) {
                    console.log('watch lastName')
                    this.fullName = this.firstName + ' ' + value
                }
            },
        })
    </script>
</body>

⑧条件渲染）

  • 前言
    根据属性值来确定dom对象的展示与否
  • 使用
    v-if v-else
    v-show v-show
  • 两者区别
    前者是通过删除创建dom对象来完成逻辑的，后者是通过隐藏节点（设置disabled）完成逻辑的。
    不切换内容多时使用v-if，切换内容少时使用v-show
  • 例子
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" v-model="ok" />是否同意许可协议<br />
      <button v-if="ok">下一步</button>
      <button v-else disabled>下一步</button>
      <button v-show="ok">yes下一步</button>
      <button v-show="!ok">no上一步</button>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          ok: 'false', //是否同意许可协议
        },
      })
    </script>
  </body>
</html>

⑨列表渲染

  • 批量渲染
    v-for
  • 使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- item：当前元素，index：当前元素的索引 -->
        <li v-for="(item, index) in userList">
          {{index}} {{item.username}} {{item.age}}
        </li>
      </ul>
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          userList: [
            { username: 'helen', age: 18 },
            { username: 'peter', age: 28 },
          ],
        },
      })
    </script>
  </body>
</html>

⑩实例的生命周期

  • 生命周期
    created 在创建完成Vue对象后执行。
    mounted 在渲染Dom对象后执行。
  • 对比
    先创建，再渲染。
    两者都能够获取Vue对象中的属性和方法。
    created操作dom对象是未渲染的，mounted操作对象是渲染后的。
  • 例子
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3 id="h3">{{ message }}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: '床前明月光',
        },
        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
          console.log('created')
          //可以操作 data 中的数据
          console.log(this.message)
          //可以调用methods中的方法
          this.show()
          //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
          console.log(document.getElementById('h3').innerText)
        },

        // 数据已经被渲染到页面中
        mounted() {
          // 第四个被执行的钩子方法
          console.log('mounted')
          //可以取出dom节点取数据，说明用户已经在浏览器中看见内容
          console.log(document.getElementById('h3').innerText)
        },
        methods: {
          show() {
            console.log('show方法被调用')
          },
        },
      })
    </script>
  </body>
</html>

4.Vue关键字的使用

①在dom对象的文本块中

  • 用{{}}调用Vue对象的方法或者属性

②在dom对象的属性中

  • 绑定属性，方法
    v-bind: 单向绑定
    v-model:（：） 双向绑定
  • 绑定事件监听
    v-on:（@）
  • 渲染dom对象执行
    v-if: v-else:
    v-show
  • 批量渲染
    v-for:

③vue对象的初始化

  • el:
    绑定vue作用的范围，用id选择器选中div
  • data:
    绑定vue作用的数据模型
  • methods:
    绑定vue作用的方法（执行多次）
  • computed:
    绑定vue作用的方法（执行一次缓存）
    注意有set get方法（调用和改变时候）
  • watch:
    绑定Vue作用的方法（直接绑定到数据模型中的每一个数据上，数据改变，调用方法）
  • created:
    创建完成vue对象后调用的方法
  • mounted:
    渲染完成vue对象后调用的方法

5.Vue实例

①后端接口

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

package com.atguigu.mybatisplus.controller;


import com.atguigu.mybatisplus.entity.User;
import com.atguigu.mybatisplus.service.UserService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {

    @Resource
    private UserService userService;
    @GetMapping("/list")
    public List<User> list(){
    //运用mybatisplus
        return userService.list();
    }
}

②前端

  • 用axios库来发送请求
  • 用vue框架来渲染页面
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <table>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>email</td>
        </tr>
        <tr v-for="(item,index) in userList">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.email}}</td>
        </tr>
      </table>
    </div>

    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          userList: [],
        },
        //对象创建完立马发送ajax请求
        created() {
          this.showUserList()
        },
        methods: {
          showUserList() {
            //通过axios访问远程接口
            const request = axios.create({
              baseURL: 'http://localhost:8080',
            })
            request({
              method: 'get',
              url: '/user/list',
            })
              .then((response) => {
                console.log('获取数据成功', response)
                this.userList = response.data
              })
              .catch((error) => {
                console.log('获取数据失败', error)
              })
          },
        },
      })
    </script>
  </body>
</html>

6.Element-UI的简介

  • elementUI是饿了么发布的前端组件库（PC端）
  • mintUI是饿了么发布的前端组件库（移动端）
  • 能够提供基本的UI组件（基于Vue的）
    表格，列表，按钮，css文件等
  • 理解CDN服务器
    CDN：内容分发网络。
    即比如说中国北京访问美国纽约的服务器，很慢，那么可以在中国设置CDN，其内容可以被同步，然后中国北京直接访问中国的CDN即可。
  • 一般脚本都放在CDN上，故我们使用库也在CDN上引

7.Element-UI的使用

①引入Element-UI

  • head上
<!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  • body中引入脚本（基于vue的，引在vue后面）
 <script src="vue.js"></script>
    <script src="axios.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

②看文档开发

  • 确定版本
    f12+看对应文档版本
  • 表格数据
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <div>
        <el-button>默认按钮</el-button>
        <el-table :data="userList" stripe border style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            type="index"
            width="55"
            label="序号"
          ></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="email" label="email"></el-table-column>
        </el-table>
      </div>
    </div>

    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          userList: [],
        },
        //对象创建完立马发送ajax请求
        created() {
          this.showUserList()
        },
        methods: {
          showUserList() {
            //通过axios访问远程接口
            const request = axios.create({
              baseURL: 'http://localhost:8080',
            })
            request({
              method: 'get',
              url: '/user/list',
            })
              .then((response) => {
                console.log('获取数据成功', response)
                this.userList = response.data
              })
              .catch((error) => {
                console.log('获取数据失败', error)
              })
          },
        },
      })
    </script>
  </body>
</html>
  • 按钮数据
    看文档开发即可。

8.Vue-Router的简介

  • 锚点是什么？
    锚点即点击跳转到指定的位置
  • 路由是什么?
    路由即点击跳转到指定的位置
  • 两者区别
    锚点是内容写在页面内动态跳转。
    路由是内容不在页面内动态加载。

9.Vue-Router的使用

①Vue-Router的使用

  • ①引入Vue-Router
  • ②定义路由标签（dom对象）
    导航
  • ③定义路由出口（dom对象）
    跳转数据的位置
  • ④定义组件模板（脚本中）
    数据具体的内容
  • ⑤定义路由（脚本中）
    路由和组件绑定
  • ⑥创建路由对象（脚本中）
    初始化一个路由对象，用上面的路由
  • ⑦挂载路由对象（脚本中的Vue初始化）
    将路由对象挂载到vue对象的router属性中

②实例以及结果

  • 脚本
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>人物介绍-贾玲</h1>
      <p>
        <router-link to="/jbxx">基本信息</router-link>
        <router-link to="/zyzp">主要作品</router-link>
      </p>

      <!--路由出口-->
      <router-view></router-view>
    </div>

    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      //1.定义组件模板
      const jbxx = { template: '<div> 贾晓玲 30 女 </div>' }
      const zyzp = { template: '<div> 你好李焕英 </div>' }
      //2.定义路由列表
      const routes = [
        { path: '/jbxx', component: jbxx },
        { path: '/zyzp', component: zyzp },
      ]
      //3.创建路由对象
      const router = new VueRouter({
        routes,
      })
      //4.挂载路由对象
      new Vue({
        el: '#app',
        router,
      })
    </script>
  </body>
</html>
  • 结果
    在这里插入图片描述
    在这里插入图片描述

未更新

未更新

未更新

未更新

未更新

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值