VUE基本介绍
构建界面的渐进式框架，替代jstl,el表达式等
案例
<div id="app">
<!--{{}}插值表达式 -->
{{messgae}}
</div>
<!--引入文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',//绑定vue的作用范围
data:{//
message:'Hello'
}
})
</script>
基本语法
基本数据与渲染指令
<div id="app">
<!--v-bind指令 -->
<h1 v-bind:title="message">
{{content}}
</h1>
<!--简写方式-->
<h1 :title="message">
{{content}}
</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
conten:'标题'，
message:'时间'+new Data().toLocalString()
}
})
</script>
双向数据绑定
<div id="app">
<!--单向绑定-->
<input type='text' v-bind:value='searchMap.keyWord'/>
<!--双向绑定，修改后原数据也会变化s-->
<input type='text' v-model='searchMap.keyWord'/>
<p>{{searchMap.keyWord}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
searchMap:{
keyWord:'Dean'
}
}
})
</script>
事件绑定
<div id="app">
<!--vue绑定事件-->
<button v-on:click='search()'>查询</button>
<!--简写，可不加括号-->
<button @click='search()'>查询</button>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{//定义方法
search(){alert('search...')}。
f1(){alert('f1')}
}
})
</script>
修饰符
<div id="app">
<form action="save" v-on:submit.prevent='onSubmit'>
<input type="text" id="name" v-model='user.name'/>
<button type="submit">
保存
</button>
<!--点击后不提交，而是执行方法-->
</form>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{}
}，
methods:{
soSubmit(){
if(this.user.name){
}else{
}
}
}
})
</script>
条件渲染
<div id="app">
<input type="checkbox" v-model='ok'/> 是否同意
<h1 v-if='ok'>ok</h1>
<h1 v-else>not ok</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
ok:false
}
})
</script>
循环
<ul>
<li v-for="n in 10">{{n}}</li>
</ul>
<ul>
<!--index索引值从0开始，必须在n后边-->
<li v-for="(n,index) in 10">{{n}}-{{index}}</li>
</ul>
<div id="app">
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</div>
<script>
new Vue({
el:'#app',
data:{
users:[
{id:1,name:'Dean'},
{id:1,name:'Dean'},
]
}
})
</script>
组件
<div id="app">
</div>
<script>
new Vue({
el:'#app',
data:{},
components:{
// 组件名字
'Navbar':{
// 组件内容
template:'<ul><li>首页</li></ul>'
}
}
})
</script>
<Navbar></Navbar>
<!--定义全局组件-->
<script>
Vue。component('Navbar',{
template:'xxx'
})
</script>
生命周期
渲染之前created，之后mounted
<script>
new Vue({
el:'#app',
data:{
}
created(){},
mounted(){}
})
</script>
路由
<div id="app">
<h1>Hello</h1>
<p>
<router-link to="/a">xx</router-link>
<router-link to="/b">xx</router-link>
</p>
<router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue.router.min.js"></script>
<script>
const routes=[
{path:'/a',component:定义的template}，
]
const router = new VueRouter({routes})
const app = new Vue({
el:'#app',
router
})
</script>
Axios
-
独立于Vue的项目，与Vue一起使用实现ajax请求
-
应用场景
-
使用
- 引入vue.js,axios.min.js
- 编写axios代码
<script> new Vue({ data:{//定义变量初始值 //定义变量 userlist:[] }, created(){//调用定义方法 this.getUserList() }, methods:{//编写具体方法 getUserList(){ axios.get("http://xxxx") .then(//请求成功执行 response=>{ //箭头函数 //response 就是返回的数据 this.userList= response.data } ) .catch(同上)//请求失败 } } }) </script>
element-ui
饿了么提供的组件库，各种效果,
node.js
- java需要jdk，javascript需要nodejs
- 可模拟服务器如tomcat
const http=require('http');
http.createServer(function(request,response){
response.writeHead(200,{'Content-Type':'text/plain'});;
response.end('Hello Server')
}).listen(8888);
npm
类似于java中的maven，
详细见：https://www.cnblogs.com/Dean0731/p/12956891.html
babel
转码器,将es6转化为es5
# 第一步
npm install --g babel-cli
babel --version
# 第二步，创建js
# 第三部，创建'.babelrc'文件,名字固定
{
"presets":["es2015"],
"plugins":[]
}
# 第四部，安装转码器
npm install --s babel-preset-es2015
# 第五步, 文件夹转码
babel src --out-dir dist2
babel src -d dist
# 文件转码
babel xxx.js -o| --out-file yy.js
模块化
-
是什么？
- 后端：controller，service，mapper，类与类之间调用叫做模块化
- 前端：js与js之间的调用
-
es6模块化
不能再nodejs运行，需要babel转化为es5
方法一
// 01.js export function getList(){} // 02.js import {getList} from './01.js' getList() //调用方法二
// 01.js export default{ getList(){}, update(){} } // 02.js import m from './01.js' m.getList() -
es5模块化
// 01.js
const sum = function(a,b){
return parseInt(a)+parseInt(b)
}
const subtract = function(a,b){
return parseInt(a)-parseInt(b)
}
// 简写
module.exports={
sum,subtract
}
module.exports={
sum:sum,
sub:subtract
}
// 02.js
const m = require('01.js')
m.sum(a,b)
webpack
静态资源打包工具，将静态资源打包为一个
例：1.js 2.js 3.css ---->webpack ---->folder.js ,减少页面请求次数
npm install -g webpack webpack-cli
js打包
//01.js
xxxx
//02.js
xxxx
// main.js
const x = require('01.js')
const y = require('02.js')
x.zzz
y.zzzz
// webpack.config.js 固定名字
const path=require('path') // Nodejs内置模块
module.exports={
entry:'main.js',//配置入口文件
output:{
path:path.resolve(__dirname,'dist'), // 输出路径
filename:'bundle.js' //文件名
}
}
webpack # 有黄色警告 一行显示
webpack --mode=production
webpack --mode=none
webpack --mode=development # 没有警告,多行显示
css打包
// 01.css
xxxx
// main.js中
require('01.css')
// 安装css加载器
npm install -s style-loader css-loader
// 修改webpack配置文件
const path=require('path') // Nodejs内置模块
module.exports={
entry:'main.js',//配置入口文件
output:{
path:path.resolve(__dirname,'dist'), // 输出路径
filename:'bundle.js' //文件名
}，
module:{
rules:[
{
test:/.css$/,//打包规则应用到css结尾的文件
use:['style-loader','css-loader']
}
]
}
}
# 重新打包即可
后台模板vue-admin-template
- 下载，解压到工作区，https://github.com/PanJiaChen/vue-element-admin
- 进入目录 npm install 安装依赖
- 启动 npm run dev
注：后台=接口(java)+管理员界面(nodejs)，前台：用户界面(nodejs)