1.vue介绍
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网： https://cn.vuejs.org
vue入门;
新建 HTML 页面，引入 Vue.js文件
vue.js下载：
链接：https://pan.baidu.com/s/1at1Qrp852hri6GI-qJ07ug?pwd=x0bp
提取码：x0bp
<script src="js/vue.js"></script>
在JS代码区域，创建Vue核心对象，进行数据绑定
<script>
new Vue({
//1. 指定 vue对象控制哪个范围的标签。
el:"#app" , // 使用id选择器指定vue控制的范围
//定义变量
data(){
return{
username:"张三"
}
}
})
</script>
编写视图
<body>
<div id="app">
<input type="text" v-model="username"><br/>
当前用户名: {{username}}
</div>
</body>
2.vue浏览器插件安装
链接：https://pan.baidu.com/s/1zXuQT4Nk8Ona3rkXuei03A?pwd=twfr
提取码：twfr
@tap
@tap.stop
@tap.prevent
@tap.once
@click
@click.stop
@click.prevent
@click.once
@change
@change.lazy
@change.number
@change.trim
v-model
v-for
v-text
v-html
v-if
v-else-if
v-else
v-pre
v-once
v-bind
scoped
3.常用指令
4.v-bind:
和v-model区别：
v-bind指定的作用：给标签原有的属性绑定数据（下面的例子相当于herf=www.baidu.com）
v-model: 数据双向绑定，一般都是用于input标签，因为input可以输入值
插值表达式： 用于标签体里面，用于显示变量的数据 . 格式：{{ 变量名}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a><br/>
<!--v-bind的简写-->
<a :href="url">百度</a><br/>
<input type="text" v-model="url"/><br/>
变量值：<div>{{url}}</div>
</div>
</body>
<script>
new Vue({
el:"#app" ,
//定义变量
data(){
return{
url:"http://www.baidu.com"
}
}
})
</script>
</html>
然后可以用刚刚安装的插件看变量
5.事件绑定：
v-on指令 ：绑定事件
格式：
完整版格式： v-on:事件名=“函数”
简写版本： @事件名=“函数”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我啊" v-on:click="test1()" /><br/>
<input type="button" value="摸我吧" @mouseover="test2()"/><br/>
</div>
</body>
<script>
new Vue({
el:"#app" ,
data(){
return{
}
},
//定义方法
methods:{
test1(){
alert("哎呀被点了..");
},
test2(){
alert("哎呀，被摸了...");
}
}
})
</script>
</html>
6.if指令
if指令的作用：符合条件才允许指定标签加载。
v-show指令的作用：元素会被加载，但是是通过 display属性控制元素是否要被显示而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else-if="count==3">div3</div>
<div v-else>其他div</div>
<div v-show="number==1">v-show的div</div>
</div>
</body>
<script>
new Vue({
el:"#app" ,
data(){
return{
count:30,
number:1
}
}
})
</script>
</html>
7.for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
最近你去过那里呢？
</h2>
<ul>
<li v-for="add in address">
{{add}}
</li>
</ul>
<hr/>
<ul>
<li v-for="(add,index) in address">
{{index}}- {{add}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app" ,
data(){
return{
address:["白云机场","上海","荔城","花都"]
}
}
})
</script>
</html>
8.生命周期-钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span id="userSpan">{{username}}</span><br/>
<input type="button" value="修改username数据" @click="updateConent()"/><br/>
<input type="button" value="销毁vue对象" @click="kill()"/>
</div>
</body>
<script>
//页面加载完毕之后触发事件
// window.οnlοad=function(){}
let vm = new Vue({
el:"#app" ,
data(){
return{
username: "张三"
}
},
methods:{
updateConent(){
this.username="李四";
},
kill(){
vm.$destroy(); //手动杀死vue对象
}
},
/*
//创建Data数据之前
beforeCreate(){
alert("创建data之前："+this.username);
},
//创建data之后
created(){
//alert("创建data之后："+this.username);
//alert(document.getElementById("userSpan").innerText);
}
beforeMount(){
alert("数据挂载前："+document.getElementById("userSpan").innerText);
},
mounted(){
alert("数据挂载后："+document.getElementById("userSpan").innerText);
}
beforeUpdate(){
alert("更新前..");
},
updated(){
alert("更新后");
}
*/
beforeDestroy(){
alert("vue对象销毁前触发...");
},
destroyed(){
alert("vue对象销毁后");
}
})
</script>
</html>
9.使用axios+vue来获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所有品牌</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<tbody id="bodyContent">
<tr align="center" v-for="brand in brandList">
<td>{{brand.id}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.status==1?"启用":"禁用"}}</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
//定义一个数组保存所有的品牌信息
brandList:[]
}
},
//页面的数据挂载完毕之后，发出异步请求，请求品牌数据
mounted(){
axios.get("/SelectAllServlet").then(resp=>{
//得到品牌列表
this.brandList = resp.data;
})
}
})
</script>
</html>
修改数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<h3>添加品牌</h3>
<div id="app">
<form method="post" id="brandForm">
品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
状态：
<input type="radio" name="status" value="0" v-model="brand.status">禁用
<input type="radio" name="status" value="1" v-model="brand.status">启用<br>
<input id="btn" type="button" value="提交" @click="submitForm()" />
</form>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return {
brand:{
brandName:"",
companyName:"",
ordered:0,
description:"",
status:0
}
}
},
methods:{
submitForm(){
axios.post("/AddServlet",this.brand).then(resp=>{
//得到响应数据
let result = resp.data;
if(result=="success"){
location.href="/brand.html";
}
})
}
}
})
</script>
</html>
10.Element
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页
组件：组成网页的部件，例如 超链接、按钮、图片、表格等等~
自己完成的按钮
需要导入对应的css和js文件
element-ui:
链接：https://pan.baidu.com/s/1g9BcBJQAhbhAC-TaAFblNw?pwd=7wnb
提取码：7wnb
需要导入对应文件及创建vue对象
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<script>
new Vue({
el:"#app"
})
</script>
整体按钮使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button type="primary" circle>按钮</el-button>
<el-button type="success">添加成功</el-button>
<el-button type="info" icon="el-icon-edit">编辑按钮</el-button>
<el-button type="warning" icon="el-icon-delete">删除就没了喔</el-button>
<el-button type="danger">删除</el-button>
<el-button type="success" icon="el-icon-caret-right">播放下一首</el-button>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
</body>
<script>
new Vue({
el:"#app"
})
</script>
</html>
11.Layout布局
Layout布局默认一行24列，
比如下面
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
这一段，el-row代表一行，span=24就相当于指定长度为24列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<!--layout布局方式默认一行24列-->
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#app"
})
</script>
</html>
12.container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>头部</el-header>
<el-container>
<el-aside>菜单栏</el-aside>
<el-container>
<el-main>主页面</el-main>
<el-footer>页脚</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#app"
})
</script>
</html>
13.品牌列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--1. 搜索框-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="shanghai"></el-option>
<el-option label="禁用" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--2. 按钮-->
<el-button type="danger">批量删除</el-button>
<el-button type="primary">新增</el-button>
<!--3. 表格-->
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
width="180">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
width="180">
</el-table-column>
<el-table-column
prop="order"
label="排序">
</el-table-column>
<el-table-column
prop="status"
label="当前状态">
</el-table-column>
<el-table-column
label="操作">
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-table-column>
</el-table>
<!--4. 分页条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</body>
<script>
new Vue({
el:"#app",
methods: {
handleCurrentChange(curPage){
alert("当前页："+curPage);
},
handleSizeChange(pageSize){
alert("当前的页面大小："+pageSize)
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
brand:{
companyName:"",
brandName:"",
status:0
},
tableData: [{
brandName: '荣耀',
companyName: '华为科技股份有限公司',
order: 1,
status:1
}, {
brandName: '荣耀',
companyName: '华为科技股份有限公司',
order: 1,
status:1
}, {
brandName: '荣耀',
companyName: '华为科技股份有限公司',
order: 1,
status:1
}, {
brandName: '荣耀',
companyName: '华为科技股份有限公司',
order: 1,
status:1
}]
}
}
})
</script>
</html>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
