Vue
vue也是看狂神的讲的一般但是时长短,很多都没讲,vue重点是vue-cli脚手架的使用。建议b站找黑马程序员或者尚硅谷,讲的比较全。
MVVM模式
vue重要性:完全解耦了View层和Model层,这个解耦是至关重要的,是前后端分离的重要一环。
1.第一个Vue程序
IDEA插件:vue,下载不了的要去官网下载到本地,然后导入zip,注意选择对应版本
https://plugins.jetbrains.com/plugin/9442-vue-js/versions/stable/108320
导包:下载文件官网
或者:在线cdn
完整版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--view层模板-->
<div id="app">
{{message}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
}
})
</script>
</body>
</html>
2.基本语法
2.1、判断-循环
v-开头的属于指令
v-bind绑定信息
<span v-bind:title="message">
鼠标悬停几秒查看动态绑定的信息
</span>
v-if,v-else
<body>
<!--view层模板-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>no</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
</body>
v-for
<div id="app">
<ul>
<li v-for="item in items">
{{item.message}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//数组[],{}表示对象
items:[
{message:'狂神说java'},
{message: '狂神说前端'}
]
}
})
</script>
2.2、事件绑定
<body>
<!--view层模板-->
<div id="app">
<button v-on:click="sayhello">
点我
</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"sjk"
},
//方法必须定义在Vue的methods中
methods:{
sayhello: function (){
alert(this.message+"hello")
}
}
})
</script>
</body>
3.双向绑定
<!--view层模板-->
<div id="app">
<p>
输入的文本:<input type="text" v-model="message">{{message}}
</p>
下拉框:
<select v-model="selected">
<option value="" disabled >--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>选中了:{{selected}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"",
selected:" "
}
})
</script>
4.vue组件
自定义标签
<div id="app">
<sjk v-for="item in items" v-bind:ss="item"></sjk>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//组件必须放到vue对象那个标签里
//第一个是标签名,第二是属性
Vue.component("sjk",{
//使用props参数传递
props:['ss'],
template:'<li>{{item}}</li>'
});
var vm=new Vue({
el:"#app",
data:{
message:"",
data: {
items:["java","c","C++"]
}
}
})
</script>
5.网络通信
Axios是一个开源的可以在浏览器端和Nodejs的异步通信框架,主要作用是实现AJAx异步通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios异步通信</title>
</head>
<body>
<div id="vue">
<div>
{{info.name}}
</div>
<div>
{{info.address.city}}
</div>
<a v-bind:href="info.url">点我</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script >
var vm=new Vue({
el:"#vue",
//data属性
//data方法,数据格式是什么样的就是这么写
data(){
return{
info:{
name:null,
address:{
street:null,
city:null,
country:null
}
},
url:null,
}
},
//钩子函数,链式编程,ES6特性
mounted(){//返回数据
axios.get('data.json').then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": 1,
"isNonProfit":true,
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
6.计算属性(特色)
讲计算出的结果保存在属性中,,可以想象是一个缓存
<div id="app">
<!-- 函数调用-->
<p> currentime1:{{currentime()}}</p>
<!--属性调用,-->
<!-- 不常计算的值,可以放在计算属性中,类似于缓存,省了每次都调用-->
<p> currentime1:{{currentime2}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data: {
message: "hello",
},
methods:{
currentime:function (){
return Date.now();//返回一个时间戳
}
},
computed:{
currentime2:function (){
return Date.now();//返回一个时间戳
}
}
})
</script>
7.插槽slot(难点)
布局控制
类似于父子组件模板套模板。预留占位标签。
8.自定义事件与内容分发
从其他组件,操作vue对象中的属性
前端通过v-bind 绑定组件方法,然后通过v-on用Vue实例中的方法
基础语法
条件判断
网络通信:axios
组件界面布局
9.第一个 vue-cli项目
vue-cli是vue的官方脚手架,快速生成vue项目模板
对脚手架的理解 https://www.cnblogs.com/webXiaoAYang/p/10621223.html
(2条消息) Vue学习之路3-浅析Vue-cli搭建项目后的目录结构_小子pk了的博客-CSDN博客_vue-cli3目录结构
-
App.vue是一个组件,index.html是项目的页面,main.js是项目的入口文件,我们可以理解成index.html通过main.js将App.vue组件中的内容替换掉了index.html中的内容,看图说话;
-
main.js中引入了App.vue,并且new Vue()了一次,我们可以把main.js理解成是index.html页面中的js文件,此时new Vue()中的el绑定的则是index.html中的#app,所以这个new Vue()是对index.html页面的实例,接着在实例中注册了App.vue组件,通过template挂载到了index.html中的#app里,完全覆盖掉了index.html中的内容,大家可以改变App.vue中的#app试试,运行页面后看到的就是App.vue中的id;
9.1、功能:
统一目录结构
本地调试
热部署
单元测试
集成打包环境
9.2、环境配置
Node.js
检验安装是否成功
安装之后自带npm,npm就是一个软件管理工具
npm需要加速:选择淘宝的cnpm
安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue-cli
cnpm install vue-cli -g
C:\WINDOWS\system32>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
初始化:
新建一个文件夹,进入文件夹目录cmd命令初始化vue-cli
C:\Users\86137\Desktop\JAVA\vue\student>vue init webpack student
? Project name student
? Project description A Vue.js project
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "student".
To get started:
cd student
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
npm install 安装依赖环境
然后再进入此文件,cmd命令行下 npm install 安装依赖环境
npm run dev
npm run dev 打包,启动项目
vue-cli的框架结构:
index.html
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
src文件下再写一个App.vue
其他组件import到App.vue
通过标签 rount-link 绑定路由,实现界面跳转
package.json,打包参数设置
9.3、 webpack学习使用
cnpm install webpack -g
cnpm install webpack-cli -g
检验:
C:\WINDOWS\system32>webpack -v
webpack 5.47.1
webpack-cli 4.7.2
package.json里可以看webpack版本
写很多的js文件,和方法,最后打包成一个js
//导出一个方法
exports.sayHello= function (){
document.write("<h1>孙晋开</h1>")
}
//导入方法
var hello = require("./hello");
hello.sayHello();
module.exports={
mode: 'production',
entry:'./modules/main.js',//打包main.js
output:{
filename:"./js/bound.js"//打包到bound.js
}
};
上面是webpack.config.js的配置,前端所以js文件可以打包在一起,然后主页面只需要
<script src="dist/js/bound.js"></script>
前端模块化开发
9.4、vue-router
功能:控制页面跳转的
安装 :npm install vue-router --save -dev
在route文件夹下:写路由配置的js
import Vue from 'vue'
import router from 'vue-router'
import content from "../components/content";
import main from "../components/main";
//安装路由
Vue.use(router);
export default new router({
routes:[{
// 路由路径
path:'/content',
// 跳转的组件
component:content
},
{
// 路由路径
path:'/main',
// 跳转的组件
component:main
}
]
});
主页面这样使用:
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!-- 页面展示-->
<router-view></router-view>
</div>
两个vue组件是这样写的:
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "content"
}
</script>
<!--scope作用域-->
<style scoped>
</style>
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "main"
}
</script>
<style scoped>
</style>
9.5 、vue+element
安装
npm i element-ui -S
1.创建工程:
vue init webpack xxxx
2.进入工程:
cd xxx
3.安装vue-route:
npm install vue-router --save-dev
4.安装 element-ui
npm i element-ui -s
5.安装依赖:
npm install
6.安装 sass加速器
cnpm install sass-loader node-sass --save-dev
7.启动测试
npm run dev
坑:webpack版本不要用4,用3
"sass-loader": "^7.3.1",
//webpack降版本
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
//sass降版本
"sass-loader": "^7.0.3",
"node-sass": "^4.7.2",
10.vue和ssm整合
java SSM和vue整合_facePlus的博客-CSDN博客_vue与ssm框架结合
SSM项目怎么与vue结合_ssdssa的博客-CSDN博客
整合ssm使用Vue实现前后端数据交互(详细版)_xiaojiejie01的博客-CSDN博客
ssm vue架构图_ssm+vue前后端分离框架整合实现(附源码)_非著名程序员m~~的博客-CSDN博客
10.1跨域问题
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
10.2 npm run build打包配置
npm run build 打包项目,图片等资源使用相对路径会出现路径错误的问题
在build下的utils.js中,3使用 ‘vue-style-loader’ 依赖的地方添加 publicPath: ‘…/…/’ , 如图:
此时直接打包部署后会出现静态文件找不到的404错误,需要在config目录下的index.js文件里面将打包的assetsPublicPath改成’./'当前目录,如果UI框架的资源也加载不出来,也是这样做