灯塔：Vue笔记

最新推荐文章于 2024-11-12 16:34:34 发布

J.Y.765

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量806

点赞数 11

文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/2302_79978879/article/details/142354751

版权

Vue是一套前端框架，免于原生JavaScript中DOM操作，简化书写。

基于MVVM（Model-View-View-ViewModel思想，实现数据的双向绑定，将编程的关注点放在数据上。

官网：https://v2.cn.vuejs.org

框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el:"#app", //id选择器
        data:{
            message:"Hello Vue!"
        }
})
</script>

编写视图

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>

插值表达式：

形式：{{表达式}}

内容可以是：变量三元运算符函数调用算术运算

常用指令
指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同的含义。例如：v-if、v-for

常用指令：

v-bind

<a v-bind:herf="url">传智教育</a>
<a :href="url">传智教育</a>

<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://www.itcast.cn"
        }
})
</script>

v-model

<input type="text" v-model="url">

例子：

<!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="../../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model:herf="url">
    </div>
   
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://wwww.baidu.com"
        }
    })
</script>
</html>

展示结果：

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

v-on

<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el:"#app",
        data:{
            //...
        },
        methods:{
            handle:function(){
                alert("你点了我一下");
            }
        }
    })
</script>

v-if ：符合条件就渲染，否则不显示

年龄{{age}},经判定为：
<span v-if= " age < = 35 ">年轻人</span>
<spanv-else-if= "age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

v-show ：通过切换display的值来改变出现

年龄{{age}},经判定为：
<span v-show="age <= 35 ">年轻人</span>

v-for

<div v-for="addr in addrs">{{addr}}</div>

<div v-for="(addr,index) in addrs">{{index +1}}:{{addr}}</div>

data:{
    ...
    addrs:['北京','上海','广州','深圳','成都','杭州']
},

Vue的生命周期

生命周期：是指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每一个生命周期事件，会自动执行一个生命周期方法（钩子）。

<script> 
    new Vue({
        el:"#app",
        data:{    
    
        },
        mounted(){
            console.log("Vue挂载完毕，发送请求获取数据");
        },    
        methods:{
        },
})
</script>

mounted：挂载完成，Vue初始化完成，HTML页面渲染成功。（发送请求到服务器，加载数据）

Ajax

概念：Asynchronous JavaScript And XML,异步的JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据。

异步交换：可以在不重启加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

原生Ajax

1.准备数据地址：

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

引入Axios的js文件

<script src="js/axios-0.18.0js"></script>

2.使用Axios发送请求，并获取响应结果

请求方式别名

axios.get(url[,config])

axios.dalete(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mork/169327/emp/list").then(result)=>{
    console.log(result.data);
});

发送POST请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result)=>{
    console.log(result.data);
});

前后端分离开发：

Vue 项目-目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

Vue项目-配置端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    devServer:{
      port:7000
    }
})

Vue项目开发流程

Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>

Element

Element ：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

快速入门：

安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chaalk/index.css';

Vue.use(ElementUI);

访问官网，复制组件代码，调整

常见组件-表格

Table 表格：用于展示多条结构类似的数据，可以对数据进行排序，筛选，对比或其他自定义操作。

Pagination 分页：当数据量过多时，使用分页分解数据。

Dialog对话框：在保留当前页面的状态的情况下，告知用户并承载相关的操作。

Form 表单：由输入框、选择器、单选框、多选框等空间组成，用以收集、校验、提交数据。

Vue路由

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

<router-link>:请求连接组件，浏览器会解析成<a>

<router-view>:动态视图组件，用来渲染展示路径相对应的组件

安装（创建Vue项目时已选择）

npm install vue-router@3.5.1

部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。

启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号，如果端口号被占用，可以在ngnix.conf中修改端口号。（netstat -ano | findStr 80）