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/开始的请求，就会找到目标服务器
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
