文章目录
Vue指令
模板语法
声明式地将 DOM 绑定至 底层 Vue 实例的数据，并把 DOM 渲染操作次数减到最少
<!--{{ 数据 }} 插值表达式 获取数据 模板语法-->
<!--{{message}},{{age}}-->
{{message}},
<p>{{age}}</p>
<p>{{age+10}}</p>
<p>{{age+10>20?"成年人":"青年人"}}</p>
<!--{{var a=0}}-->
指令
v-text
文本标签 会显示<b></b>
<span>{{message}}</span>
<span v-text="message"></span>
默认写法会替换全部内容，使用差值表达式可以替换指定内容 内部支持写表达式
<span>{{message}} aaaaaa</span>
<span v-text="message">bbbbb</span>
<span v-text="message+1">bbbbb</span>
<span v-html="message">cccccc</span>
v-html
将标签解析
<span v-html="message"></span>
v-on
为元素绑定事件
<!--<input type="button" value="按钮" v-on:click="test()" />-->
<input type="button" value="按钮1" v-on:click="test(1,2)" />
<!--<input type="button" value="按钮2" @click="test1(1,2)" />-->
<input type="button" value="按钮2" @dblclick="test1(1,2)" />
methods:{ //定义函数
//test(){
// alert("aaaaaa")
//}
test(a,b){
alert("aaaaaa"+a+":"+b)
}, //要有逗号
test1(a,b){
alert("bbbb"+a+":"+b)
}
}
v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联 绑定的数据<---->表单元素的值
双向数据绑定
v-model=“account”
value的值通过 v-model里数据绑定data
data数据赋给v-test 将数据渲染到p标签上
vueDemo/v-model.html
<div id="app">
<!--v-model="account"
value的值通过 v-model里数据绑定data， data数据赋给v-test 将数据渲染到p标签上-->
<!--可以将表单元素的值 与vue数据进行双向绑定-->
<input type="text" value="" v-model="account" />
<input type="text" value="" v-model="password"/>
<p v-text="account"></p>
<p v-text="password"></p>
<!--联动的，下面vue对象里变了 上面都变-->
<input type="button" value="测试" @click="test()" />
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象(VM对象) ViewModel*/ /*Vue会管理el选项命中的元素及其内部的后代元素*/
var app=new Vue({
el:"#app", //数据挂载点
data:{ //数据
account:"",
password:""
},
methods:{
test(){
this.account="123456";
}
}
});
</script>
联动的，下面vue的account对象里变了 上面都变
v-show
作用是根据真假切换元素的显示状态 控制标签是否显示
原理是修改元素css的 display属性，实现显示隐藏 指令后面的内容，最终都会解析为布尔值 display=none
true标签显示 false标签不显示
<div id="app">
<input type="button" value="按钮1显示" v-show="isshow"/>
<input type="button" value="按钮2显示" v-show="num>18" />
</div>
<script type="text/javascript">
/*new Vue() 创建vue对象 ViewModel*/
var app=new Vue({
el:"#app", //数据挂载点
data:{ //数据
isshow:true,
num:20
}
})
v-if
作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换 显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除 频繁的切换 v-show，反之使用 v-if，前者的切换消耗小
<div id="app">
<!--
v-show 控制标签显示隐藏 是通过控制css display属性实现的 不会删除标签的
v-if 控制标签显示隐藏 是直接操作dom 隐藏就直接从dom中删除标签
-->
<input type="button" value="按钮1显示" v-if="isshow" />
<input type="button" value="按钮2显示" v-if="num>18" />
<!--<input type="button" value="按钮4" /> else就无效了-->
<input type="button" value="按钮3显示" v-else />
</div>
<script type="text/javascript">
/*new Vue() 创建vue对象 viewModel*/
var app=new Vue({
el:"#app",
data:{
isshow:true,
num:10
}
})
</script>
v-bind
作用是为元素绑定属性
完整写法是 v-bind：属性名
简写只保留：属性名
<div id="app">
<!--
v-model 把表单标签的“值” 绑定给某个vue数据
v-bind 为标签属性绑定数据
-->
<p v-bind:align="a">qqqqqqq</p>
<p :align="a">qqqqqqq</p>
<input type="button" value="测试" @click="test()" />
</div>
<script type="text/javascript">
/*new view() 创建vue对象 ViewModel*/
var app=new Vue({
el:"#app",
data:{
a:"center"
},
methods:{
test(){
this.a="right"
}
}
})
</script>
v-for
作用是根据数据生成列表结构 数组经常和 v-for 结合
使用语法是（item，index）in 数据 item 和 index
可结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的 为循环绑定一个 key 值 :key=”值” 尽可能唯一
<div id="app">
<table border="1">
<!--<tr v-for="user in users">-->
<tr v-for="(user,index) in users" :key="index">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
/*new Vue() 创建Vue对象*/
var app=new Vue({
el:"#app",
data:{
users:[
{name:'jim1',age:20},
{name:'jim2',age:20},
{name:'jim3',age:20},
{name:'jim4',age:20},
]
}
})
</script>
Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程（需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等）同时 在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会。
页面加载vue对象被创建后，挂载数据向后端自动发送请求
methos:{ //自定义函数
},
//下面是VUE生命周期钩子函数 在每个生命周期截断 会提供一个函数，让我们去执行一些操作
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created") //页面加载vue对象被创建后，向后端自动发送请求
this.users=[ //对上面users赋值
{name:'jim1',age:20},
{name:'jim2',age:20},
{name:'jim3',age:20},
{name:'jim4',age:20},
]
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
}
Vue 组件
是一组可以重复使用的模板,且带有一个名字
可以用独立可复用的小组件来构建大型应用
几乎任意类型的应用的界面都可以抽象为一个组件树
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
两种注册类型：全局注册和局部注册。至此，我们的组件都只是通 过 Vue.component 全局注册的：
定义组件
- 定义组件标签id
<template id="">
放div里或外 - vue中注册组件名，为组件绑定标签（数据函数）
Vue.component - 使用组件名
<mycom></mycom>
<div id="app">
<mycom></mycom>
<mycom></mycom>
<!--自定义组件 以达到重复使用 后面组件可以是一个页面-->
<template id="h1id">
<h1 @click="test()">一级标题，重复使用{{mycom_name}}</h1>
</template>
</div>
<script type="text/javascript">
/*注册全局组件 组件名*/
Vue.component("mycom",
{template:"#h1id", //为组件绑定标签
data:function(){ //组件中的数据定义
return{
mycom_name:"jim"
}
},
methods:{
test(){
alert("组件中的事件");
}
}
},
)
new Vue({
el:"#app",
})
</script>
Vue-cli创建项目
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板
预先定义好的目录结构及基础代码
好比在创建 Maven 项目时可以选择创建一个骨架项目，我们的开发更加的快速
主要功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
环境
类似后端的jdk环境
Node.js
运行在服务端的js
事件驱动 I/O 服务端js环境，基于 Google 的 V8 引擎， V8 引擎执行js的速度快，性能好
npm
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。
也是世界上最大的软件注册表，有超过 60 万个 js代码包
可供下载js开发人员可轻松使用其他开发人员共享的代码。
搭建vue项目
安装node.js
配置系统环境变量 全局PATH D:\Program Files\nodejs
默认有
测试安装成功：
hbuilder创建vue.cli项目
输入npm run serve或点击html根目录运行
复制local地址localhost:8080/到浏览器
即可打开初始页面。
之后再app.vue直接输入修改界面，保存运行，浏览器，就会直接有相应变化
不想访问 终端输入ctrl+C 前端服务器就会终止
没有内置终端：没有更新hb
如果内置终端运行不了：需要以管理员身份运行
打包npm项目
输入npm run build 就会多了一个dist文件夹,是打包后的项目
复制dist文件夹，部署到D:\Program Files\apache-tomcat-9.0.43\webapps\ROOT 里 删除之前上传项目，粘贴,命名为weeb
tomcat里可运行java程序也可以运行静态程序，D:\Program Files\apache-tomcat-9.0.43\bin里startup.bat启动
页面路由
vue router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装
外部命令 npm install vue-router --save-dev
下载好moudel会出现vue.router
1. 配置路由
在view里建立分页.vue
在router里index.js 和main.js里配置
insex.js
import Vue from 'vue';
import router from 'vue-router'; /*导入路由*/
//导入自己定义的组件
import Login from '../view/Login.vue'
import Main from '../view/Main.vue';
Vue.use(router);
//定义路由
var rout =new router({
//mode:'history',
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/main',
name:'main',
component:Main
},
]
})
//导出路由组件
export default rout;
main.js
/* main.js文件 是vue项目的核心全局配置文件*/
//导入vue.js文件
import Vue from 'vue'
//在核心的配置文件中导入一个App组件
import App from './App.vue'
//导入路由组件 ./表示根目录
import router from './router/index.js'
//Vue.use(router);
Vue.config.productionTip = false
//创建vue对象，将App组件挂载到index.html <div id="app"></div>
new Vue({
render: h => h(App),
router,
}).$mount('#app')
2. 使用路由
app.vue
<!--<router-link to="/login">登录</router-link>
<router-link to="/main">成功页面</router-link>-->
<router-view/>
分页.vue
<!-- 在vue 中没有页面的概念，只有组件的概念 Login.vue文件就是一个登录组件
<template> 标签里面必须有一个根标签
-->
<template>
<div>
login
</div>
</template>
<script>
export default{
data:function(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
报错：“export ‘watchEffect‘ was not found in ‘vue‘
是因为router4版本与vue3.0不对
在package.json里返回router版本
测试加# ：http://localhost:8080/#/main
路由导航守卫
为路由对象，添加 beforeBach 导航守卫
to-将要访问的页面地址,
from-从哪个页面访问的,
next-放行函数 rout.beforeEach((to,from,next)=>{
如果用户访问的登录页，直接放行
if(to.path==’/login’){ return next(); }else{
ElementUI
一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库
https://element.eleme.cn/#/zh-CN
安装
终端输入 npm i element-ui -S
main.js写入
//导入ElementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
搭建登录界面
在<template>中导入组件，并在data:function() 中写入数据和方法。
在控制session里可以看到后端接收的输入数据
<!-- 在vue 中没有页面的概念，只有组件的概念 Login.vue文件就是一个登录组件
<template> 标签里面必须有一个根标签
-->
<template>
<div class="login_container">
<!-- 登录盒子-->
<div class="login_box">
<!-- 头像盒子-->
<div class="img_box">
<img src="../assets/logo.png" />
</div>
<div style="margin-top: 100px; padding-right: 30px;">
<!--登录表单-->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="账号">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="login()">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default{
data:function(){
return{
form:{
account:"",
password:""
}
}
},
methods:{
login(){
console.log(this.form)
}
}
}
</script>
<style>
html,body,#app,.login_container{
height: 100%;
margin: 0px;
padding: 0px;
}
.login_container{
background-color: #00a7fa;
}
.login_box{
width: 450px;
height: 350px;
background-color: #fff;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.img_box{
width: 130px;
height: 130px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 50%;
padding: 5px;
border: 1px solid #eee;
}
.img_box img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
</style>
网络请求axios
http://axios-js.com/
axios 是一个 HTTP 的网络请求库.
安装
npm install axios
在 main.js 中配置 axios 导入 axios
（安装失败解决方案：https://blog.csdn.net/weixin_47484523/article/details/123084035
在 main.js 中配置 axios
/*导入axios 是一个http网络请求库 用来发送ajax请求*/
import axios from 'axios';
//配置全局后端访问地址
axios.defaults.baseURL="http://127.0.0.1:9999/api/";
//将请求库地址 挂载到vue对象中，$http的名字是自定义的，使用:this.$http/api/login/login
Vue.prototype.$http=axios;
get/post发送请求
使用 get 或 post 方法即可发送对应的请求 then 方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息
login.vue 的methods方法中写入数据请求方法:
axios 的常用 API
post：增加数据
delete: 删
put: 改
get: 查
基本语法
methods:{
login(){
//console.log(this.form)
//调用后端接口，向后端发送数据
this.$http.post("login/login",this.form)
.then(function(resp){
console.log(resp);
})
}
}
Springboot:
在application.yml中修改端口号
server:
port: 9999
新建LoginController类 修改path地址
model User类接收 定义账号密码 get set toString()方法
前端8080端口 后端9999端口
1957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
