复习
# 1 rbac:基于角色的访问控制，后台管理（公司内部系统）
# 2 django的admin就是基于这个，使用了6张表
-用户表 auth_user
-角色（组表） auth_group
-权限表 auth_permission
-用户和角色多对多 auth_user_groups
-角色和权限多对多 auth_group_permissions
-用户和权限的多对多 auth_user_user_permissions
# 3 django 的演示
# 4 后期公司例，极少数会基于django的admin做二次开发，大多数公司都是前端端分离，后端使用django+drf+vue，自己写权限（rbac）
# django-vue-admin：
# gin-vue-admin
# 若依
# 5 vue 主流是前后端分离多
-React，vue（国人）
-uni-app：使用vue的语法写，打包成移动端，微信小程序（原生）
-版本：2.x 3.x
-渐进式的js框架
-MVVM架构： m（js的变量，数据层） - vm（js对象） - v（view，页面html，css），实现数据的双向绑定
-单页面开发，组件化开发（某块可以复用的东西，制作成一个组件）
# 6 快速使用
-cdn引入
-直接导入
# 7 插值语法 {{ }}，数字，字符串，数组，对象
# 8 指令系统之文本指令---》都放在标签的属性上
-v-html：把字符串形式标签渲染成真正的标签
-v-text：把文本内容显示在标签中
-v-show：标签是否显示，放布尔值 （隐藏）
-v-if：标签是否显示，放布尔值 （真正删除）
# 9 事件指令---》标签的点击事件
v-on:click='事件名' ，当点击控件，就会触发函数的执行
@click='事件名' 简略写法
今日内容
1 属性指令
#只要是标签的属性，都可以使用属性指令动态绑定
# v-bind:属性名=属性值
# :属性名=属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<!-- 前面是属性名后面是属性值-->
<span id="id_span" v-bind:name="name"></span>
<!-- 简写一般都这样写-->
<span :name="age"></span>
<a :href="url">点我去百度</a>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'zhang',
age: 18,
url:'http://www.baidu.com'
}
})
</script>
</html>
2 style和class
style和class都能绑定字符串，数组，对象
class 用的数组居多
style 用的对象居多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.size{
font-size: 60px;
}
</style>
</head>
<body>
<div class="app">
<!-- <button @click="handleClick">点我变色</button>-->
<!-- <button @click="handleClick2">点我字体变大</button>-->
<button @click="handleClick3">点我字体变大2</button>
<div :class="divClass">
<p>我是div</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
// class 属性，绑定字符串
// divClass:'red'
//class 属性，绑定数组----这个用的多
// divClass:['red',]
// class属性，绑定对象
divClass:{'red':true,'size':false}
},
methods: {
// handleClick() {
// this.divClass='green'
// },
// handleClick2(){
// this.divClass.push('size')
// }
handleClick3(){
this.divClass['size']=true
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<div :style="styleStr">
<p>我是div</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
//style绑定字符串
// styleStr:'background-color: red;font-size: 40px'
// style绑定数组 麻烦
// styleStr:[{'background-color':'green'},{'font-size': '40px'}]
// style绑定对象 简单
// styleStr:{'background-color':'yellow','font-size': '80px'}
//这种方法需要使用驼峰写法
styleStr:{backgroundColor:'yellow',fontSize: '80px'} // 驼峰会自动转换
},
methods: {}
})
</script>
</html>
3 条件渲染
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>你的成绩是{{score}}</h1>
<h2 v-if="score>=90&&score<=100">你的评级为优秀</h2>
<h2 v-else-if="score>=70&&score<90">你的评级为良好</h2>
<h2 v-else-if="score>=60&&score<70">你的评级为及格</h2>
<h2 v-else-if="score>=0&&score<60">你的评级为不及格</h2>
<h2 v-else>请输入正确的分数</h2>
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
score:99
}
})
</script>
</html>
4 列表渲染
v-for
遍历数组(列表)：<tr v-for="(book,index) in book_list"> # book是循环到的对象，index是数组的索引
对象(字典)：<p v-for="(value,key) in person">{{key}}是：{{value}}</p># value是字典的value值，可以是字典的key值，注意是跟正常的相反，如果只取一个值，就是value值
数字：<p v-for="i in 5">循环到第{{i}}次了</p> # 从1开始到5
字符串：<p v-for="i in 'asfdasdsdaf'">{{i}}</p>
# key值的解释
# 数组的检测与更新
-有的时候，数组（对象）变了，但是页面没变，作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
-解决：Vue.set(vm.arrayList, 0, 'Darker')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handlerClick">点我刷新奥特曼排名</button>
<table border="2px">
<tr>
<td>姓名</td>
<td>击杀怪兽数量</td>
<td>出生地</td>
</tr>
<tr v-for="item in atm_list">
<td>{{item.name}}</td>
<td>{{item.kill}}</td>
<td>{{item.addr}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
atm_list:[]
},
methods:{
handlerClick(){
this.atm_list=[
{'name':'迪迦','kill':100,'addr':'m78星云'},
{'name':'泰罗','kill':150,'addr':'m68星云'},
{'name':'艾斯','kill':500,'addr':'m88星云'},
]
}
}
})
</script>
</html>
5 事件处理
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件（用的少）
blur 当输入框失去焦点的时候 触发的事件
5.2 过滤案例
# 数组如何过滤
数组.filter(function (item){
return true/false # 如果return了true当前item保留，否则不保留
})
# es6的箭头函数，处理this指向的问题
数组.filter(item=>{
return true/false # 如果return了true当前item保留，否则不保留
})
# indexOf:字符串的方法
字符串.indexOf(子字符串)，如果子字符串在字符串中，返回索引（在字符串里面的位置），如果不在返回 -1，如果大于-1说明，子字符串在字符串中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText" @input="handledInput">
<p v-for="data in newDataList">{{data}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
// handledInput() {
// var _this=this
//
// this.newDataList = this.dataList.filter(function (item) {
// console.log(item)
// console.log(_this.myText)
// return item.indexOf(_this.myText)>-1
//
// })
//
// }
// es6 箭头函数，处理this指向的问题
handledInput() {
this.newDataList = this.dataList.filter(item=>{
return item.indexOf(this.myText) > -1
})
}
}
})
// 数组的过滤
// var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// dataList=dataList.filter(function (item) {
// // return是true或false，如果是true，该元素会保留，否则不保留
// return item.length>4
// })
// console.log(dataList)
// indexOf的使用:判断子字符串在该字符串的那个位置,不在返回 -1
// 过滤数组中以at开头的所有字符串
// var myText='at'
// var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// dataList=dataList.filter(function (item) {
// return item.indexOf(myText)>=0
// // return item.length>4
// })
// console.log(dataList)
// var res='lqz'.indexOf('f')
// console.log(res)
// 箭头函数,箭头函数内部的this，就是外层的this
// var f= function (a) {
// console.log(a)
// }
var f= a =>{
console.log(a)
}
f(4) // 函数才执行
</script>
</html>
5.3 事件修饰符
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）写在子控件里
.self 只处理自己的事件，子控件冒泡的事件不处理 写在父控件里
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!-- 只处理自己的事件，冒泡上来的事件不处理-->
<ul @click.self="handleUl">
<li @click.stop="handleLi1">li1,加了stop后，阻止了事件冒泡，事件不往上传递了</li>
<li @click="handleLi2">li2</li>
</ul>
<hr>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<hr>
<button @click.once="buttonClick">点我秒杀</button>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi1() {
console.log('li1被点击了')
},
handleLi2() {
console.log('li2被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA(){
console.log('a被点击了')
window.location='http://www.jd.com' // 手动跳转
},
buttonClick(){
console.log('button被点击了')
}
}
})
</script>
</html>
5.4 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!-- <input type="text" @keyup="handleKeyUp($event)">-->
<input type="text" @keyup.enter="handleKeyUp">
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
// handleKeyUp(e){
// console.log(e)
// console.log('点了')
// }
handleKeyUp() { // 只要enter建弹起，就触发
console.log('enter点了')
}
}
})
</script>
</html>
6 数据双向绑定
input 框，使用 v-model="username" 绑定上变量，以后，只要变量变化，页面变化，页面变化，变量变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password">
<hr>
<p>您输入的用户名为：{{username}}</p>
<p>您输入的密码为：{{password}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
},
})
</script>
</html>
7总结
1.文本指令
v-html:把标签字符串显示成标签
v-text：等同于插值
v-show：显示不显示，不是真正删除
v-if：显示不显示，是真正的删除
2.属性指令
# v-bind:属性名=属性值
# :属性名=属性值 简写
<span id="id_span" v-bind:name="name"></span>
<span id="id_span" :name="name"></span>
3.事件指令
@click='' # @click='函数名'
4.style
<div :style="styleStr"> #绑定对象
styleStr:{'background-color':'yellow','font-size': '80px'}
5.class
<div :class="divClass"> #绑定数组
divClass:['red',]
6.条件渲染 if判断
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
7.列表渲染 for循环
自定义变量1： value ， 自定义变量2 ：key
v-for= （自定义变量1，自定义变量2） in 一个字典或列表
8.事件处理 针对input框
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件（用的少）
blur 当输入框失去焦点的时候 触发的事件
#事件修饰符
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）写在子控件里
.self 只处理自己的事件，子控件冒泡的事件不处理 写在父控件里
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）xxxxxxxxxx
#按键修饰符
@keyup.enter
9.双向绑定
v-model