Vue

Vue(读音Niu:/，类似于view)是一套用于构建用户界面的渐进式框架。

Vue被设计为可以自底向上逐层应用。Yue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

安装node js

Nodeis是一个让JavaScript运行在服务端的开发平台，它可用于方便地搭建响应速度快、易于扩展的网络应用。 Nodeis可用于Web开发，微服务，前端构建：下载安装好nodeis后，在cmd中，输入node-v查看版本。

Nodejs可以做为前端开发库的存在，需要设置拉取镜像地址。国内的服务器速度较快，通常设置为淘宝镜像。在cmd命令行中，输入： npmconfigsetregistry=https://registry.npm.taobao.org

设置好了以后，在cmd中，再输入npm config list查看设置是否成功。

下载Vue-cli：

npm install -g @vue/cli

下载idea的vue插件：

创建Vue项目

vue create 项目名

选择 vue2

安装依赖库

npm install --save axios vue-router echarts element-plus @element-plus/icons-vue

进入项目目录，输入 npm run serve

打开浏览器，输入http：//localhost：8080出现VUE主界面

在终端，连按两次ctrl+c，可关闭服务器

Vue项目的目录结构

node_modules：插件目录，用于存放第三方is库 public：静态资源 src：源码目录 assets：存放图片、js、css等静态资源 components：存放可重用的全局组件 main.js：入口文件 package-lock.json,packagejson.为npm配置文件 vue.config.js为vue配置文件

vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被@vue/cli-service自动加载。

改变启动端口

module.exports = defineConfig({transpileDependencies: true,lintOnSave:false,//忽略未使用变量或组件报错问题devServer:{port:8086//改变端口}
})

src 目录下的main.js为入口文件，在服务器启动时自动完成加载。访问服务器时，执行该文件。

一个组件大致分为:结构（html)、样式(css)、行为(is)。在一个*.wue,文件中，<template>为模版，书写html结构，<script>书写js,脚本，<style>书写样式。在<template>中必须包含一个根元素。

创建login.vue登录组件，在main .js中导入

import login from './login.vue'
createApp(login).mount('#app')表示以login组件，作为首页文件

vue模型

在<script>中定义模型
<script>
export default {name: "login",data() {return {msg: "欢迎",username: "",pwd: "",}}
}
</script>
在<template显示数据

{{msg}}

双向绑定

可以将数据和界面元素的值进行双向绑定。当模型数据变化时，界面数据发生变化。当界面数据发生变化时，模型数据变化。

 用户名：<input type="text" v-model="username"/> {{username}}<br>

当用户名文本框内容发生变化，会导致userName属性值变化。同样，当userName属性变化时，用户名文本框内容也会发生变化。

Vue事件

<input type="button" value="登陆" @click="land()"/> <br>
在export default{}之内，添加methods属性export default {name: "login",data() {return {msg: "欢迎",username: "",pwd: "",}},methods: {land() {//得到用户名和密码属性，注意必须用this访问// alert(this.username + "  " + this.pwd);if (this.username == "java" && this.pwd == "123") {alert("登陆成功");} else {alert("登陆失败");}}}
}
绑定属性对象export default {data() {return {userObj: {},}},
<!--绑定对象的属性值 -->
<template><div>用户名： <input type="text" v-model="userObj.userName"/> <br>密码： <input type="password" v-model="userObj.pwd"/> <br></div>
</template>

当元素书写来自vue对象数据时，使用v-bind表示，或简写为：

<img src="./img/10.jpg" :style="imgCss">
data() {return {imgCss:{width:'300px',height:'300px'},}
}

对于所有的数据绑定，Vue.js 都完全提供了 javascript 表达式支持

data() {return {price: 30,num: 1,age:null,}
},

单价：{{ price }} <br>
数量 <input type="number" v-model="num"> <br>
总价：{{ price * num }}
当文本框数量改变时，总价随之改变。{{age>=18?"成年":"小孩"}}

script表达式支持三目运算符，条件为真，返回第一个值，条件为假返回第二个值。

显示图片

<img :src="imgPath" width="300" height="300">
data() {return {imgPath: require("@/img/10.jpg"),}
}

路径说明：
./表示在当前目录下查找
../表示回到上一级目录
@/表示从src 根目录下查找资源

复选框：

复选框：
<input type="checkbox" v-model="likeArray" value="体育">体育
<input type="checkbox" v-model="likeArray" value="美术">美术
<input type="checkbox" v-model="likeArray" value="音乐">音乐
<input type="checkbox" v-model="likeArray" value="游戏">游戏
<input type="checkbox" v-model="likeArray" value="上网">上网 <br>
{{likeArray}}
data() {return {likeArray: []，}
}

在Vue中，得到dom'对象

在VUE中，将网页元素和数据进行双向绑定，以此获得网页元素的值。所以，一般情况不用操作dom对象。但是有些时候，也需要得到dom对象来进行操作，可以用ref属性得到dom对象

工资：<input type="text" ref="money">
methods：{
showValue(){alert(this.$refs.money.value)this.$refs.money.style.color="red";
}}

条件判断：

利于 v-if 、 v-eles-if 、 v-eles 进行条件判断，当条件满足时，显示对应组件。否则不允许显示

双分支
成绩：{{ grade }}<br>
是否合格：<span v-if="grade>=60">合格</span>
<span v-else>不合格</span> <br>
多分支：
等级：<span v-if="grade>=90">优秀</span><span v-else-if="grade>=80">良好</span><span v-else-if="grade>=60">中等</span><span v-else>差</span>

循环迭代

循环迭代：定义要迭代的数组

emList:[{id:1,name:"王弄墨",money:8000,status:"在职"},{id:2,name:"王嘉尔",money:1200,status:"离职"},{id:3,name:"王德发",money:1800,status:"在职"},{id:4,name:"迪丽热巴",money:1700,status:"离职"},
]

在网页中，使用v-for标签进行迭代

<tr v-for="(em,index) in emList"  :key="em.id"><td>{{index}}</td><td>{{em.id}}</td><td>{{em.name}}</td><td>{{em.money}}</td><td>{{em.status}}</td><td><input type="button" v-if="em.status=='在职'" value="离职"></td>
</tr>

:key="em.id"表示每次迭代的唯一标识，一般用id表示。inde表示序号，从0开始。

vue计算属性

对于任何复杂逻辑，可以利用计算属性，得到结果：

购物车总价：{{totalPrice}}
export default {
data:{....}
methods:{....}
computed:{totalPrice(){var  total=0;this.productList.forEach(n=>{total+=n.price*n.num})return total;}  }  }

vue 组件生命周期

每个Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

每个Vue实例生命周期分为四大类: 创建-----created 挂载，将数据渲染到页面上-----mounted 更新，在数据更改时调用------updated 销毁-------destroyed 每个方法都有一个beforeXXX方法，在执行某个阶段之前执行。

vue路由

1.在 web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router,。Mue-router.通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。

在src目录，新建router目录，新建index.js,文件和 routes.js,文件。

2.在routes.js文件中，导入相关的页面。并指定组件名称，和访问URL路径。有几个组件就导入几个组件

const routes = [{name:"Login",//组件的名称path:"/login",//访问组件的URL路径 component: () => import('@/Login')//导入组件},{name:"Index",path:"/index",component: () => import('@/index')},{name:"Box",path:"/box",component: () => import('@/checkBoxTest')},
];
export default routes

3.index.js

import {createRouter,createWebHistory} from 'vue-router'
import  routes  from "./routes"

const router = createRouter({history:createWebHistory(),routes
});
export default router ;

4.在main.js导入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

5.在App.vue中定义路由视图

<template><router-view/>
</template>

在登陆方法中完成路由跳转

land() {if (this.userObj.userName == "java" && this.userObj.pwd === "123") {//经路由跳转首页this.$router.push("/index")}

在路由跳转时传递参数，

起始页面：

//经路由跳转首页，并传递参数
//name 表示注册路由的名称 ， params 描述传递参数
this.$router.push({name:"Index",params:{id:2,name:"tom"}});

目标页面接收传递参数

created() {this.id = this.$route.params.id;this.name = this.$route.params.name;
}

嵌套路由

嵌套路由，通常由多层嵌套的组件组合而成。同样地实际开发中的应用界面，通常由多层嵌套的组件组合而成.同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件. 在常规程序js.中定义嵌套路由

{name:"Index",path:"/index",component: () => import('@/index'),children:[{name:"Product",path:"/index/product",component: () => import('@/product/Product')},{name:"Order",path:"/index/order",component: () => import('@/order/order')},{name:"User",path:"/index/user",component: () => import('@/user/user')},]
},

在index.vwue组件中，定义路由链接，点击局用组件内容更新<router-view/>路由视图内容

<div style="display: flex"><div style="width: 200px;height: 400px">导航栏<br><router-link to="/index/product">商品管理</router-link><br><router-link to="/index/order">订单管理</router-link><br><router-link to="/index/user">用户管理</router-link><br></div><div style="width: 1000px;height: 400px"><router-view/></div>
</div>

vue 利用 axios 发送请求

跨域问题:

什么是跨域呢?跨域问题来自浏览器安全机制。浏览器安全的基石是"同源政策"。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况:A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的Cookie，会发生什么?

很显然，如果Cookie 包含隐私(比如存款总额)，这些信息就会泄漏。更可怕的是，Cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。

“同源政策”是防止Cookie在不同的服务器之间共享，以确保cookie信息的安全性。

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。 1、Cookie无法读取。

2、 DOM 无法获得。 3、AJAX 请求不能发送

在同源政策中，A网页设置的Cookie，B网页页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同":协议相同、域名相同、端口相同。

axios 解决跨域问题

在axios 中，可以通过配置代理，解决跨域问题。

客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念

可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到代理服务器中。代理服务器再返回数据给客户端，这样就可以实现跨域访问数据。

在vue.config.js中配置代理服务器

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {port: 8086,//改变端口proxy: {"/project": {target: "http://localhost:8088",pathRewrite: {"^/project": "/"}}}}
})

当前端服务器发出/project/开始的请求，就会找到目标服务器

【Vue】Vue浅析相关推荐

vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件会在什么时候下被销毁？
[vue] vue组件会在什么时候下被销毁? 页面关闭.路由跳转.v-if和改变key值个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[vue] vue的is这个特性你有用过吗？主要用在哪些方面？
[vue] vue的is这个特性你有用过吗?主要用在哪些方面? vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题<ul><li is='my-compon ...
[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...
[vue] vue怎么改变插入模板的分隔符？
[vue] vue怎么改变插入模板的分隔符? optionMergeStrategies类型:{ [key: string]: Function }默认值:{}用法:Vue.config.option ...
[vue] vue如何优化首页的加载速度？
[vue] vue如何优化首页的加载速度? 补充下2楼: ssr直出, webpack压缩HTML/CSS/JS, 首屏css单独提取内联, 关键资源Proload, 图片:不缩放,使用webp.小图 ...
[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？
[vue] vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢? 你说的是vue内部的源码对Array数据的中转代理嘛好像对push, shift等通用方法都做了代理吧! 因为它对中转的数 ...

【Vue】Vue浅析

Vue