vue

vue导读

"""
vue框架
    vue是前台框架：Angular、React、Vue
    vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
    vue环境：本地导入与cdn导入
"""

# vue是js渐进式框架
# 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目

实例成员 - 挂载点

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

# 1) html与body不能作为挂载点
# 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识

    {{ }}
    

    

        {{ }}
    
    

    

        {{ }}
    

js对象(字典)补充

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

实例成员 - 数据

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

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

实例成员 - 过滤器

// 1) 过滤器本身就是数据处理函数，可以将插值表达式中的数据作为参数进行处理，得到的函数返回值就是处理后的结果
// 2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }}
// 3) 过滤器在实例中用filters成员提供

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

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

文本指令

// 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);

事件指令

// 1) 语法：v-on:事件名="函数名(参数们)"
// 2) 简写：@事件名="函数名(参数们)"
// 3) 用methods实例成员提供 事件函数 的实现
// 4) 事件传参：函数名  |  函数名()  |  函数名(自定义参数)  |  函数名($event, 自定义参数)

    
    
    


    

        
        

            点击减一：
            {{ num }}
        

        
双击

        
        
悬浮
        
悬浮1
        
悬浮2
        
悬浮3

        
    

属性指令

// 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


        
        
点击切换类
    

动态修改文本样式案例

    
    
    


    

        
{{ msg }}
    

表单指令

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

    
    
    


    

        

            
            
            
            
{{ info }}
            

            
            
            
            
{{ info }}
            

            
            是否同意：
            
            
{{ isAgree }}

            
            性取向：
            男 
            女 
            哇塞 
            
{{ mysex }}


            
            兴趣爱好：
            男 
            女 
            哇塞 
            
{{ myhobbies }}