12.16 vue

日考

1、http与https
http vs tcp：应用层，传输层，http协议是传输层采用的tcp的应用层
http特点：无状态，无连接，（基于请求响应）先客户端发出请求，服务器端一定做出响应
https：在http协议之上增加ssl安全认证

2、前端布局
流式布局
响应式布局
盒模型布局
浮动布局
定位布局

课程安排

Vue：
    基础：指令、实例成员、组件(组件间传参)
    项目：基于组件开发、插件（vue-router、vuex、axios、vue-cookies、jq+bs、element-ui）

DRF：
    全称：django-restframework：完成前后台 分离式 django项目
    知识点：
        请求、响应、渲染、解析、异常
        序列化组件、三大认证、视图家族(CBV)
        分页、筛选、搜索、排序

Luffy：
    目的：了解前后台分离项目，了解公司开发项目的模式
    知识点：git、多方式登录、第三方短信认证、支付宝、上线

Vue

前端框架：angular、react、vue
    vue：有前两大框架优点，摈弃缺点；没有前两个框架健全 
    vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)

知识总结

1、vue框架的优势
2、vue如何在页面中引入
    1）通过script标签引入vue.js环境
    2）创建vue实例
      总结：
      挂载点：Vue实例与页面标签建立关联
      挂载点采用的是css3选择器语法 但是只能匹配第一次检索到的结果
      通常挂载点都采用id选择器，因为它有唯一性
      html与body标签不能作为挂载点
      一般一个页面出现一个挂载点
    3）通过el进行挂载
    4）声明的实例是否用一个变量接收
     在实例内部不需要，用this就代表当前Vue实例本身
     在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
     模板：
     
    
    
        
        
    
    
        

         {{ msg}}
        
    
    
    
    
     
3、插值表达式
    {{ 变量以及变量的简单运算 }}



    
    


    

     
{{ msg}}
     
{{ num * 10}}
     
{{ msg + num}}
     
{{ msg[1] }}
     
{{ msg.split('') }}
    




4、文本指令
    {{ }} | v-text | v-html | v-once



    
    


    

        
     
{{ msg.split('') }}
     
123456
        

        


        

        
{{ msg + info}}
        
{{ msg }}
    




5、方法指令
    v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"



    
    
    


    

     
        
{{ msg }}
        
{{ msg }}
        

        
{{ action }}
        


        
        

        
{{ info }}
        
{{ info }}

    




6、属性指令
    v-bind:属性="变量"  |  :属性="变量"
    
    :title="t1"
    :class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
    :style="s1"  |  :style="{color: c1, fontSize: f1}"
        s1是字典变量，c1和f1变量分别控制字体颜色和大小




    
    
    


    

     
        
红色字体

        
简单使用
    




7、js补充
    let\const定义的变量不能重复定义，且具备块级作用域，出了{}就不能再用了
    function可以作为类，内部会有this
    箭头函数内部没有this
    {}里面出现的函数称之为方法： 方法名(){}




    
    


    
js面向对象








    
    


    
函数补充