zoukankan      html  css  js  c++  java
  • 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

    <div id="wrap">
        {{ }}
        <hr>
        <div class="main">
            {{ }}
        </div>
        <hr>
        <div class="main">
            {{ }}
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    
    <script>
        new Vue({
            el: '#wrap'  // el表示挂载点,‘css选择器’
        })
    </script>
    挂载点

    注意:

    #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)

    示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>数据</title>
    </head>
    <body>
        <div id="app">
            <!-- {{}}是插值表达式,中间出现的info是vue变量 -->
            <p>{{ info }}</p>
            <p>{{ info }}</p>
            <p>{{ num }}</p>
            <p>{{ arr }}</p>
            <p>{{ dic }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 1) 用实例成员data为vue环境提供数据,数据采用字典{}形式
        // 2) 在插值表达式{{}}中,直接书写数据的key来访问数据
        // 3) 在外部通过接受实例的变量app,访问实例成员(实例成员都用$开头),间接访问到数据
        //      app.$data.info
        // 4) 在外部也可以通过实例变量app直接访问数据
        //      app.info
        let app = new Vue({
            el: '#app',
            data: {
                info: 'message',
                num: 100,
                result: true,
                arr: [1, 2, 3, 4, 5],
                dic: {
                    name: 'Owen',
                    age: 17.5
                }
            }
        })
    </script>
    <script>
        console.log(app);
        console.log(app.$data.info);
        console.log(app.info);
    </script>
    </html>
    data数据

    3.filters:过滤器

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

    示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--1)插值表达式可以直接做简单运算-->
            <p>{{ num + 3.5 }}</p>
            <p>{{ msg.split('')[4] }}</p>
    
            <p>{{ num | f1 }}</p>
            <p>{{ 10, 20, 30, 40 | f2 }}</p>
            <p>{{ 10, 20 | f2(50, 80) }}</p>
            <p>{{ 120 | f2 }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 100,
                msg: 'message'
            },
            filters: {
                f1: function (num) {
                    return num * 2
                },
                // 总结:{{ a,b,c,d | f2 }}  {{ a,b,c | f2(d) }}  { a,b| f2(c,d) }}  { a| f2(b,c,d) }}
                f2: function (a, b, c, d) {
                    console.log(a, b, c, d);
                    return a + b + c + d
                }
            }
        })
    </script>
    </html>
    过滤器

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

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

    示例:

    <div id="app">
        <p>{{ info }}</p>
    
        <!--1)v-指令名="变量",变量是需要data提供数据值的  -->
        <p v-text="info"></p>
        <!--2)v-指令名="常量",常量采用常量基本的语法,数字与布尔类型等可以直接书写的直接书写,字符串等需要特殊符号的需要添加符号-->
        <p v-text="123"></p>
        <p v-text="true"></p>
        <p v-text="'abc' + info"></p>
        <p v-text="[1, 2, 3]"></p>
    
        <!--3)v-html可以解析html语法-->
        <p v-html="`<b style='color:red'>好的</b>`"></p>
        <p v-text="'<b>好的</b>'"></p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                info: 'data提供的数据',
            }
        })
    </script>
    文本指令:v-text  v-html
    反引号补充
    <script>
        // 1) js多行字符串 反引号 ``
        // 2) 反引号字符串中可以直接填充变量,语法为 `${变量名}`
        let s1 = `第一行
    第二行
    结束行`;
        console.log(s1);
    
        let name = 'Owen';
        let age = 17.5;
        let s2 = `
    name: ${name}
    age: ${age}
    `;
    console.log(s2);
    </script>

    5.事件指令:methods

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

    示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                /*页面文本不允许选择*/
                user-select: none;
            }
            .low-num {
                cursor: pointer;
            }
            .low-num:hover {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 事件指令:v-on:事件名="事件函数名"   -->
            <p class="low-num" v-on:click="lowNum">
                <span>点击减一:</span>
                <span>{{ num }}</span>
            </p>
    
            <p v-on:dblclick="dblAction">双击</p>
    
            <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数"  -->
            <p @mouseover="overAction()">悬浮</p>
            <p @mouseover="overAction(10)">悬浮1</p>
            <p @mouseover="overAction(10, 20)">悬浮2</p>
            <p @mouseover="overAction(10, 20, $event)">悬浮3</p>
    
            <!-- 事件传参:
             @事件='方法'  默认传入事件对象 $event
             @事件='方法()'  不传递任何参数
             @事件='方法(参数...)'  只传递自定义参数
             @事件='方法($event, 参数...)'  自定义传参时传递事件对象
             -->
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                num: 99
            },
            methods: {
                lowNum: function () {
                    // 在vue实例内部的方法中,使用变量
                    // alert(this.num)
                    this.num -= 1;
                },
                dblAction (ev) {
                    // alert('双击事件');
                    console.log(ev)
                },
                overAction(a, b, c) {
                    console.log(a, b, c)
                }
            }
        })
    </script>
    
    </html>
    事件

    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="{类名:布尔变量}"

    示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>属性指令</title>
        <style>
            [index] {
                color: orange;
            }
    
            .ccc {
                background-color: yellowgreen;
                color: greenyellow;
                border-radius: 50%;
            }
            .ccc1 {
                background-color: yellowgreen;
            }
            .ccc2 {
                color: greenyellow;
            }
            .ccc3 {
                border-radius: 50%;
            }
    
            .ttt {
                background-color: gold;
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--1) 语法:v-bind:属性名="变量" -->
            <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
            <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
    
            <p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
            <!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
            <p :index="p1">自定义属性也可以被vue绑定2</p>
            <p :title="'文本提示'">悬浮文本提示</p>
    
            <!--3) style样式属性绑定 -->
            <p :style="myStyle">样式绑定1</p>
            <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>
    
            <!--4) class类属性绑定 -->
            <p :class="myc1">样式绑定3</p>
            <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
            <!--xxx是类名,是否起作用有布尔类型变量yyy值决定 -->
            <p :class="{xxx:yyy}">样式绑定5</p>
    
    
            <!--案例:点击切换类名是否起作用-->
            <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                p1: 'q1',
                myStyle: {
                    backgroundColor: 'pink',
                    color: 'deeppink',
                    'border-radius': '50%'
                },
                c1: 'cyan',
                c2: 'tan',
                myc1: 'ccc ddd eee',
                myc2: 'ccc1',
                myc3: 'ccc2',
                myc4: 'ccc3',
                yyy: true,  // false
            },
            methods: {
                clickAction() {
                    this.yyy = !this.yyy;
                }
            }
        })
    </script>
    </html>
    属性指令

    动态修改文本样式案例

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                 200px;
                height: 200px;
                background-color: orange;
            }
            .center {
                text-align: center;
                line-height: 200px;
            }
            .rcenter {
                text-align: right;
                line-height: 200px;
            }
            .right {
                text-align: right;
            }
            .top {
                line-height: 21px;
            }
            .bottom {
                line-height: calc(400px - 21px);
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}</div>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                a1(){
                    this.msg = '被悬浮';
                    // 正中
                    this.c1 = 'center';
                    this.r = 0;
                    this.t = 0;
                    this.b = 0;
                },
                a2(){
                    this.msg = '被按下';
                    // 右上
                    this.r = 1;
                    this.t = 1;
                    this.b = 0;
                },
                a3(){
                    this.msg = '被抬起';
                    // 右中
                    this.c1 = 'rcenter';
                    this.r = 0;
                    this.t = 0;
                    this.b = 0;
                },
                a4(){
                    this.msg = '被移开';
                    // 右下
                    this.r = 1;
                    this.t = 0;
                    this.b = 1;
                },
            },
            data: {
                msg: '',
                c1: '',
                r:0,
                t:0,
                b:0,
            }
        })
    </script>
    </html>
    示例

    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绑定的变量值是某一个选项的值(值是哪个选项的值,那个选项就被选中)

    示例

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .p1 {
                 500px;
                height: 21px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <form action="">
                <!--1) 对表单标签value进行绑定操作变量,不能时时检测绑定的变量-->
                <input class="inp1" type="text" :value="info">
                <input class="inp2" type="text" :value="info">
                <p class="p1">{{ info }}</p>
                <hr>
                <!--2) 表单标签的值有 v-model="变量" 来绑定控制,操作的还是value,但是拥有时时变量值的检测 -->
                <input class="inp1" type="text" v-model="info">
                <input class="inp2" type="text" v-model="info">
                <p class="p1">{{ info }}</p>
                <hr>
                <!-- 2) v-model操作单独复选框 - 确认框 -->
                是否同意:<input type="checkbox" name="agree" v-model="isAgree">
                <!--是否同意:<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree">-->
                <p>{{ isAgree }}</p>
    
                <!-- 3) 单选框-->
                性取向:
                男 <input type="radio" name="sex" value="male" v-model="mysex"><input type="radio" name="sex" value="female" v-model="mysex">
                哇塞 <input type="radio" name="sex" value="others" v-model="mysex">
                <p>{{ mysex }}</p>
    
    
                <!-- 4) 复选框-->
                兴趣爱好:
                男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"><input type="checkbox" name="hobbies" value="female" v-model="myhobbies">
                哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies">
                <p>{{ myhobbies }}</p>
    
    
                <hr>
                <input type="submit">
            </form>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                info: '123',
                isAgree: 0,
                // isAgree: 'no',
                mysex: 'others',
                myhobbies: ['male', 'female']
            }
        })
    </script>
    </html>
    View Code
  • 相关阅读:
    27. Remove Element
    列表变成字典
    1. Two Sum
    CVPR2019:What and How Well You Performed? A Multitask Learning Approach to Action Quality Assessment
    959. Regions Cut By Slashes
    118. Pascal's Triangle
    loj3117 IOI2017 接线 wiring 题解
    题解 NOI2019 序列
    题解 省选联考2020 组合数问题
    题解 Educational Codeforces Round 90 (Rated for Div. 2) (CF1373)
  • 原文地址:https://www.cnblogs.com/tfzz/p/11637538.html
Copyright © 2011-2022 走看看