vue基础一：

路飞项目：
1，vue知识
    1，vue导读：
    2，vue基础知识：
    3，实例成员-数据（data）
    4，实例成员—过滤器 filters,
    指令相关：
    5，文本指令
    6.事件指令：
    7，属性指令
    8.动态修改文本样式案列
    9，表单指令（数据的双向指定）
    
    
1,vue框架
    前台html+css+js框架。是不同于js与 jq的数据驱动框架
    指令| 实例成员| vue项目
2，drf框架
    Django的插件，完成前后端分离项目后台接口编写的框架
    序列化组件 | 三大认证组件| 分页，筛选，过滤，排序| 请求，解析，响应
3，路飞项目
    前端有vue完成，后台你有drf完成前后端分离项目
    Git| 短信认证  | celery异步任务


    1，vue导读：
        vue是什么：
            vue是前台框架，其中前端框架还有：Angular、React、Vue
            # vue是js渐进式框架
            # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目
        vue的优点：
            是结合了其他两个框架的优点，轻量级的，中文版本，数据驱动，双向绑定，MVVM设计模式、组件化开发、单页面应用
       vue的使用：
           vue环境：本地导入与cdn导入
           1，本地导入（下载vue）
               
           2，cdn导入
                

    2，vue基础知识：
        1，实例成员—挂载点（通过挂载点与HTML页面建立关联）
            1，vue渐进式框架：控制页面及项目的范围
            2、vue的环境导入：本地、cdn
            3、vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
            4、vue如何与html页面结构建立关联：挂载点     ****

            ps：挂载点注意两点
                1，html与body标签不能作为挂载点
                2，一个vue对象挂载点之后的只能匹配第一个结果，所以挂载点一般用id标识

            案列：
                

                    {{ }}
                    

                    

                        {{ }}
                    
                    

                    

                        {{ }}
                    
                
                
                


        js对象(字典)补充：
            let b = 20;
            let dic = {
                a: 10,  // 字典本身就是对象，key都是字符串形式可以省略引号
                b  // 值为变量时，且与key同名，可以简写  等价于b:b  第一个b为字典的key，第二个b为变量
            };
            console.log(dic)

    3，实例成员-数据（data）
        1，用实例成员data为vue环境提供数据，数据采用字典的形式{}
        2，在插值表达式{{}}中，直接书写数据key来访问数据
        3，在外部通过接受实际的app，访问实例成员(实例成员都用$开头），简介访问到数据
               app.$data.info
        4，在外部也可以通过实际变量APP直接访问数据
            app.info
        5,在vue实例内部的方法methods中，使用变量，this.info(this其实就等价于info）

        案列：
        

            
            
{{ info }}
            
{{ info }}
            
{{ num }}
            
{{ arr }}
            
{{ dic }}
        
        
        
        

    4，实例成员—过滤器 filters,
        1，过滤器本身就是数据处理函数，可有将插值表达式中的参数进行处理，得到函数返回值就是处理后结果
        2，过滤器使用语法{{...变量| 过滤器(...变量）}}
        3，过滤器在实例中用filters成员提供  （可以是数组或者字典）

        案列：
        

            
            
{{ num + 3.5 }}
            
{{ msg.split('')[4] }}

            
{{ num | f1 }}
            
{{ 10, 20, 30, 40 | f2 }}
            
{{ 10, 20 | f2(50, 80) }}
            
{{ 120 | f2 }}
        
        
        

    5，文本指令
        1，插值表达式 同v-text指令，渲染普通文本
        2，v-html指令可以喧染有html语法的文本，能够解析html语法
        3，文本指令可以喧染 变量 也可以喧染 常量

        

            
{{ info }}

            
            

            
            

            

            

            


            
            

            

        
        
        

        反引号补充
            // 1) js多行字符串 反引号 ``
            // 2) 反引号字符串中可以直接填充变量，语法为 `${变量名}`
            let s1 = `第一行
            第二行
            结束行`;
            console.log(s1);

            let name = 'Owen';
            let age = 17.5;
            let s2 = `
            name: ${name}
            age: ${age}
            `;
            console.log(s2);


    6.事件指令：
        语法：v-on:事件名='函数名(参数们)’
        简写：@事件名='函数名(参数们)'
        用methods实例成员提供 事件函数 的实现
        事件传参:函数名 | 函数名() | 函数名(自定义参数)

        
        
        
            
            
            
        
        
            

                
                

                    点击减一：
                    {{ num }}
                

                
双击

                
                
悬浮
  // 只要悬浮就触发，一旦加括号，就表示不在要事件对象，就不会主动传递参数
                
悬浮1
   //传自定义参数
                
悬浮2
                
悬浮3
   //在自定义参数下，还有要传事件，就用$event

                
            
        
        
        

        
        第一种：
悬浮
            就是直接在双引号中以变量的形式访问
        第二种：就是在外部，实例化对象来访问
        第三种：在方法内部通过this.变量来访问
        第四种：直接在参数内部，
    7，属性指令
        // 1) 语法：v-bind:属性名="变量"
        // 2) v-bind:属性名="变量" 简写 :属性名="变量"
        // 3) 单值属性绑定：  :title="变量"  |  :id="变量"  |  :自定义属性="变量"
        // 4) style属性绑定：  :style="字典变量"  |  ：style="{css属性1:变量1, ..., css属性n:变量n}"
        // 5) class属性绑定：  :class="变量"  |  :class="[变量1, ..., 变量n]"  |  :calss="{类名:布尔变量}"

        
        
        
            
            
            
        
        
            

                
                
属性指令1
                
属性指令2

                
自定义属性也可以被vue绑定1
                
                
自定义属性也可以被vue绑定2
                
悬浮文本提示

                
                
样式绑定1
                
样式绑定2

                
                
样式绑定3
                
样式绑定4
                
                
样式绑定5


                
                
点击切换类
            
        
        
        
        

    8.动态修改文本样式案列：
        
        
        
            
            
            
        
        
            

                
{{ msg }}
            
        
        
        
        
    9，表单指令（数据的双向指定）
        // 1) 语法：v-model="控制vaule值的变量"
        // 2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
        // 3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)
        // 4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量
        // 5) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁)
        // 6) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
        
        
        
        
            
            
            
        
        
            

                

                    
                    
                    
                    
{{ info }}
                    

                    
                    
                    
                    
{{ info }}
                    

                    
                    是否同意：
                    
                    
{{ isAgree }}
        
                    
                    性取向：
                    男 
                    女 
                    哇塞 
                    
{{ mysex }}
        
        
                    
                    兴趣爱好：
                    男 
                    女 
                    哇塞 
                    
{{ myhobbies }}