Python vue 挂载点 数据 过滤器 文本指令 事件 属性指令 表单指令

一 Vue导读

1.三大前端开源框架：

　　Angular（脸书）：更新过快开发跟不上脚步，有时候过于笨重。

       React（github）：适合开发移动端

       Vue：个人，结合前两者优点，单页面（针对手机）

2.什么是vue框架：前后端分离的 js渐进式（一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目） 前端框架。

3.vue特点：

1.先进的前端设计模式：MVVM
2.单页面web应用
3.数据驱动
3.数据的双向绑定
4.虚拟DOM
vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用

4.导入使用

"""
1.下载https://cn.vuejs.org/
源码：https://vuejs.org/js/vue.js
2.在要使用vue的html页面通过script标签引入
3.在html中书写挂载点的页面结构，用id表示
4.在自定义的script标签实例化Vue对象，传入一个大字典
5.在字典中通过 el与挂载点页面结构绑定，data为其通过数据
"""

二、Vue实例

1.挂载点：el

"wrap">
    {{ }}
    

    
class="main">
        {{ }}
    
    

    
class="main">
        {{ }}
    

挂载点

注意：

#1..html与body不能作为挂载点

#2.一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识实例与页面挂载点一一对应，一般为id值

#3.一个页面中可以出现多个实例对应多个挂载点，实例只操作挂载点内部内容

js对象(字典)补充

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

2.data:数据(为vue环境提供数据，数据采用字典{}形式)

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

示例：

"zh">

    "UTF-8">
    


    
"app">
        
        
{{ info }}
        
{{ info }}
        
{{ num }}
        
{{ arr }}
        
{{ dic }}
    

data数据

3.filters:过滤器

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

示例：

"zh">

    "UTF-8">
    


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

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

过滤器

4.文本指令: v-text  v-html

// 1) 插值表达式 同 v-text指令，渲染普通文本,一般直接使用插值表达式：v-text="变量名/常量"
// 2) v-html指令可以渲染有html语法的文本，能够解析html语法（别忘加反引号）
// 3) 文本指令中可以渲染 变量 也可以渲染 常量

示例：

"app">
    
{{ info }}

    
    
"info">
    
    
"123">
    
"true">
    
"'abc' + info">
    
"[1, 2, 3]">

    
    
"`好的`">
    
"'好的'">

文本指令：v-text  v-html

反引号补充

5.事件指令：methods

// 1) 语法：v-on:事件名="函数名(参数们)"
// 2) 简写：@事件名="函数名(参数们)"
// 3) 用methods实例成员提供 事件函数 的实现:字典的形式与过滤器相似
mehods:{函数名：function(参数){代码块},
　　　　 函数名(参数){代码块}
}
// 4) 事件传参：函数名  |  函数名()  |  函数名(自定义参数)  |  函数名($event, 自定义参数)
函数名不加括号默认传事件参数；加括号没有值默认不传参；加括号有值传参数但事件需要手动传：$event

示例：

"zh">

    "UTF-8">
    
    


    
"app">
        
        
class="low-num" v-on:click="lowNum">
            点击减一：
            {{ num }}
        

        
"dblAction">双击

        
        
"overAction()">悬浮
        
"overAction(10)">悬浮1
        
"overAction(10, 20)">悬浮2
        
"overAction(10, 20, $event)">悬浮3

        
    

事件

6.属性指令（注意class和style比较特别注意使用）：

// 1) 语法：v-bind:属性名="变量"
// 2) v-bind:属性名="变量" 简写 :属性名="变量"
// 3) 单值属性绑定：  :title="变量"  |  :id="变量"  |  :自定义属性="变量"
// 4) style属性绑定（2种方式）：  
      :style="字典变量"    
      ：style="{css属性1:变量1, ..., css属性n:变量n}"
// 5) class属性绑定（4中方式）：
        单个：  :class="变量"  
        多个： :class="[变量1, ..., 变量n]"  
　　　　 固定：:class="'类名'"
        属性有无作用：:calss="{类名:布尔变量}"

示例：

"zh">

    "UTF-8">
    
    


    
"app">
        
        
"p1" class="p1" style="" title="" index="">属性指令1
        
"p2" v-bind:class="p1" style="" title="" index="">属性指令2

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

        
        
"myStyle">样式绑定1
        
"{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2

        
        
class="myc1">样式绑定3
        
class="[myc2,myc3,myc4,'bbb']">样式绑定4
        
        
class="{xxx:yyy}">样式绑定5


        
        
"clickAction" :class="{ttt:yyy}">点击切换类
    

属性指令

动态修改文本样式案例

"zh">

    "UTF-8">
    
    


    
"app">
        
class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}
    

示例

7.表单指令：v-model（2个作用：#1.数据的双向绑定（例如2个input框数据实时更新）#2.单多选确认框的默认值设定）

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

示例

"zh">

    "UTF-8">
    
    


    
"app">
        
"">
            
            class="inp1" type="text" :value="info">
            class="inp2" type="text" :value="info">
            
class="p1">{{ info }}
            

            
            class="inp1" type="text" v-model="info">
            class="inp2" type="text" v-model="info">
            
class="p1">{{ info }}
            

            
            是否同意："checkbox" name="agree" v-model="isAgree">
            
            
{{ isAgree }}

            
            性取向：
            男 "radio" name="sex" value="male" v-model="mysex">
            女 "radio" name="sex" value="female" v-model="mysex">
            哇塞 "radio" name="sex" value="others" v-model="mysex">
            
{{ mysex }}


            
            兴趣爱好：
            男 "checkbox" name="hobbies" value="male" v-model="myhobbies">
            女 "checkbox" name="hobbies" value="female" v-model="myhobbies">
            哇塞 "checkbox" name="hobbies" value="others" v-model="myhobbies">
            
{{ myhobbies }}


            

            "submit">
        
    

View Code