复习

# 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:属性名=属性值
# :属性名=属性值

    
    
    
    
    



    
属性指令

    

    
    点我去百度

2 style和class

style和class都能绑定字符串，数组，对象
class  用的数组居多

style 用的对象居多

    
    
    
    






    点我字体变大2
    

        
我是div
    

    
    
    





    

        
我是div
    

3 条件渲染

v-if	    相当于： if
v-else	    相当于：else
v-else-if	相当于：else if

    
    
    
    
    





    
你的成绩是{{score}}
    
你的评级为优秀
    
你的评级为良好
    
你的评级为及格
    
你的评级为不及格
    
请输入正确的分数

4 列表渲染

v-for
遍历数组(列表)： # book是循环到的对象，index是数组的索引
对象(字典)：
{{key}}是：{{value}}
# value是字典的value值，可以是字典的key值，注意是跟正常的相反，如果只取一个值，就是value值
数字：
循环到第{{i}}次了
  # 从1开始到5

字符串：
{{i}}


# key值的解释

# 数组的检测与更新
	-有的时候，数组（对象）变了，但是页面没变，作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
    -解决：Vue.set(vm.arrayList, 0, 'Darker')

    
    
    
    
    





    点我刷新奥特曼排名
    

        

            
姓名
            
击杀怪兽数量
            
出生地
        
        

            
{{item.name}}
            
{{item.kill}}
            
{{item.addr}}
        
    

5 事件处理

5.1 针对于input框

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说明，子字符串在字符串中

    
    
    




    
    
{{data}}

5.3 事件修饰符

.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）写在子控件里
.self	只处理自己的事件，子控件冒泡的事件不处理 写在父控件里
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）xxxxxxxxxx 

    
    
    





    

        
li1,加了stop后，阻止了事件冒泡，事件不往上传递了
        
li2
    


    

    点我看美女
    

    点我秒杀

5.4 按键修饰符

6 数据双向绑定

input 框，使用 v-model="username" 绑定上变量，以后，只要变量变化，页面变化，页面变化，变量变化

    
    
    





    用户名：
    密码：
    

    
您输入的用户名为：{{username}}
    
您输入的密码为：{{password}}

7总结

1.文本指令
	v-html:把标签字符串显示成标签
    v-text：等同于插值
    v-show：显示不显示，不是真正删除
    v-if：显示不显示，是真正的删除
2.属性指令
	# v-bind:属性名=属性值
    # :属性名=属性值 简写
     
     
3.事件指令
	@click='' # @click='函数名'
4.style
	
 #绑定对象
        styleStr:{'background-color':'yellow','font-size': '80px'}
5.class
	
 #绑定数组
         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