zoukankan      html  css  js  c++  java
  • vue笔记之vue指令学习

    初识vue指令

    什么是Vue.js

    Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

    框架和库的区别

    框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

    node 中的 express;

    库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

    1.从Jquery 切换到 Zepto

    2.从 EJS 切换到 art-template

    Node中的 MVC 与 前端中的 MVVM 之间的区别

    MVC 是后端的分层开发概念;
    MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
    为什么有了MVC还要有MVVM

    vue指令介绍

    vue基本代码结构和插值表达式,v-cloak

    <div id="app">
        <div>{{ msg }}</div>
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
        <div v-cloak>{{ msg }}</div>
        <div v-cloak>++++++++ {{ msg }} ----------</div>
    </div>
    html部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "沉迷学习,日渐消瘦",
            }
        })
    </script>
    js代码

    vue指令之v-text,v-html

    <div id="app">
        <div>{{ msg }}</div>
        <div v-cloak>{{ msg }}</div>
        <div v-cloak>++++++++ {{ msg }} ----------</div>
        <!-- 默认 v-text 是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容,但是插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空 -->
        <div v-text="msg2">123456789</div>
        <!--v-html会覆盖元素中原本的内容,可以显示标签-->
        <div v-html="msg2">123456789</div>
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "沉迷学习,日渐消瘦",
                msg2: "<h1>我太难了</h1>",
            },
            methods: {
                },
        })
    </script>
    js代码

    vue指令之v-bind

    直接使用指令 v-bind
    使用简化指令 :
    在绑定的时候,拼接绑定内容::title="btnTitle + ', 这是追加的内容'"
    <div id="app">
        <!-- v-bind: 是 Vue中,提供的用于绑定属性的指令 -->
        <input type="button" value="v-bind演示" v-bind:title="mytitle">
        <hr>
        <input type="button" value="v-bind简写演示" :title="mytitle">
        <hr>
        <input type="button" value="v-bind拼接演示" :title="mytitle + '要努力啊'">
        <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 -->
        <!-- v-bind 中,可以写合法的JS表达式 -->
        <hr>
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                mytitle: "昨天,今天,明天,一天又一天,"
            },
            methods: {
                },
        })
    </script>
    js代码

    vue指令之v-on和跑马灯案例

    vue指令演示案例

    <div id="app">
        <!-- Vue 中提供了 v-on: 事件绑定机制 -->
        <input type="button" value="v-on演示" v-on:click="show">
        <hr>
        <input type="button" value="v-on简写演示" @click="show">
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                // 这个 methods属性中定义了当前Vue实例所有可用的方法
                show() {
                    alert(" 你好,朋友")
                }
            }
        })
    </script>
    js代码

    跑马灯案例

    <div id="app">
        <input type="button" value="浪起来" @click="start">
        <input type="button" value="低调" @click="stop">
        <h1 v-cloak>{{ msg }}</h1>
    </div>
    HTML部分代码
    <script>
        // 注意:在 VM实例中,如果想要获取 data 上的数据,
        // 或者 想要调用 methods 中的 方法,必须通过 this.数据属性名
        // 或  this.方法名 来进行访问,这里的this,就表示 我们 new 出来的  VM 实例对象
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "猥琐发育,别浪~~!",
                intervalId:null //在data上定义id
            },
            methods: {
                start() {
                    // console.log(this.msg)
                    //获取第一个字符
                    if(this.intervalId != null)return;
                    this.intervalId=setInterval( ()=> {
                        var get_start = this.msg.substring(0, 1);
                        //获取第二个字符以后的所有字符
                        var get_end = this.msg.substring(1);
                        // 重新拼接字符串
                        this.msg = get_end + get_start
                        // 注意: VM实例,会监听自己身上 data 中所有数据的改变,
                        // 只要数据一发生变化,就会自动把 最新的数据,从data 上同步到页面中去;
                        // 【好处:程序员只需要关心数据,不需要考虑如何重新渲染DOM页面】
    
                    }, 400)
    
                },
                stop(){
                    // 每当清除了定时器之后,需要重新把 intervalId 置为 null
                    clearInterval(this.intervalId);
                    this.intervalId = null
                }
            }
        })
        // 分析:
        // 1. 给 【浪起来】 按钮,绑定一个点击事件   v-on   @
        // 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;
        // 3. 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;
    </script>
    js代码

    Vue指令之v-on的缩写和时间修饰符

    事件修饰符

    .stop 阻止冒泡
    .prevent 阻止默认事件
    .capture 添加事件侦听器时使用事件捕获模式
    .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
    .once 事件只触发一次

    事件修饰符演示案例

    <style>
            .inner {
                height: 150px;
                background-color: blue;
            }
    
            .outer {
                padding: 40px;
                background-color: red;
            }
        </style>
    
    <div id="app">
        <!-- 使用  .stop  阻止冒泡,阻止了冒泡行为,即外层的执行 -->
        <div class="inner" @click="div1Handler">
            <input type="button" @click.stop="btnHandler" value="按钮">
        </div>
    
        <!-- 使用 .prevent 阻止默认行为,阻止了a标签的行为 -->
        <a href="https://www.baidu.com" @click.prevent="linkHandler">百度一下</a>
    
        <!-- 使用  .capture 实现捕获触发事件的机制 ,从外层到里层-->
        <div class="inner" @click.capture="div1Handler">
            <input type="button" @click="btnHandler" value="按钮">
        </div>
    
        <hr>
        <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
        <div class="inner" @click.self="div1Handler">
            <input type="button" @click="btnHandler" value="按钮">
        </div>
    
        <!-- 使用 .once 只触发一次事件处理函数 -->
        <a href="https://www.baidu.com" @click.prevent.once="linkHandler">百度一下</a>
    
        <!-- 演示: .stop 和 .self 的区别 -->
        <!-- .stop 会阻止所有冒泡行为的触发 -->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" @click.stop="btnHandler" value="按钮">
            </div>
        </div>
        <hr>
        <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" @click="btnHandler" value="按钮">
            </div>
        </div>
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                div1Handler() {
                    console.log("这是触发inner的事件")
                },
                btnHandler() {
                    console.log("这是触发btn的事件")
                },
                linkHandler() {
                    console.log("这是触发了链接的事件")
                },
                div2Handler() {
                    console.log("这是触发outer的事件")
                }
            },
        })
    </script>
    js代码

    vue指令之v-model实现双向数据绑定

    v-model实现双向绑定示例演示

    <div id="app">
        <div><h1>{{ msg }}</h1>
            <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定  -->
            <!-- <input type="text" v-bind:value="msg" style="100%;"> -->
            <!-- 使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 -->
            <!-- 注意: v-model 只能运用在 表单元素中 -->
            <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
            <input type="text" v-model="msg" style="100%">
        </div>
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "少年不识愁滋味,爱上层楼"
            },
            methods: {}
        });
    </script>
    js代码

    简易计算器案例

    <div id="app">
        <input type="text" v-model="i1">
        <select v-model="s1">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="i2">
        <input type="button" value="=" @click="opt">
        <input type="text" v-model="ret">
    </div>
    HTML部分代码
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                i1: 0,
                i2: 0,
                ret: 0,
                s1: "+"
            },
            methods: {
                opt() {
                    switch (this.s1) {
                        case "-":
                            this.ret = parseInt(this.i1) - parseInt(this.i2);
                            break;
                        case "*":
                            this.ret = parseInt(this.i1) * parseInt(this.i2);
                            break;
                        case "/":
                            this.ret = parseInt(this.i1) / parseInt(this.i2);
                            break;
                        default:
                            this.ret = parseInt(this.i1) + parseInt(this.i2);
    
                    }
                }
            }
        });
    </script>
    js代码

    在Vue中使用样式

    使用class样式

    完整代码

    完整代码

    1.数组

    <h1 :class="['red','thin']">明天会更好</h1>

    2.数组中使用三元表达式

    <h1 :class="['red', 'thin', isactive?'active':'']">明天会更好</h1>

     3.数组中嵌套对象

    <h1 :class="['red', 'thin', {'active': isactive}]">明天会更好</h1>

    4.直接使用对象

    <h1 :class="{red:true, italic:true, active:true, thin:true}">明天会更好</h1>

    使用内联样式

    完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!-- 对象就是无序键值对的集合 -->
        <h1 :style="styleObj1">hello,world</h1>
        <h1 :style="[styleObj1,styleObj2]">hello,world</h1>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj1:{color:"red","font-weight":200},
                styleObj2:{'font-style': 'italic'}
            },
            methods: {}
        })
    </script>
    </body>
    </html>
    完整代码

    style样式

    1.直接在元素上通过 :style 的形式,书写样式对象

    <h1 :style="{color:"red","font-weight":200}">hello,world</h1>

    2.将样式对象,定义到 data 中,并直接引用到 :style

    data中定义

    data: {
                styleObj1:{color:"red","font-weight":200},
            }

    在元素中,通过属性绑定的形式,将样式对象应用到元素中

    <h1 :style="styleObj1">hello,world</h1>

    3.:style 中通过数组,引用多个 data 上的样式对象

    data中定义

    data: {
                styleObj1:{color:"red","font-weight":200},
                styleObj2:{'font-style': 'italic'}
            },

    在元素中,通过属性绑定的形式,将样式对象应用到元素中

        <h1 :style="[styleObj1,styleObj2]">hello,world</h1>

    vue指令之v-for,key属性

    1.迭代数组

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="(value,index) in lst1">"index":{{ index }}--------"value":{{ value }}</li>
        </ul>    
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                 lst1:[1,2,3,4,5,6,7,8],
            methods: {}
        })
    </script>
    </body>
    </html>
    迭代数组

    2. 迭代对象数组

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="(value,index) in lst2">"index":{{ index }}--"id":{{ value.id }}--"name":{{ value.name }}</li>
        </ul>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                lst2: [{id: 1, name: 'zs1'}, {id: 2, name: 'zs2'}, {id: 3, name: 'zs3'}, {id: 4, name: 'zs4'}]
            },
            methods: {}
        })
    </script>
    </body>
    </html>
    迭代对象数组

    3.迭代对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in lst3">"index":{{ index }}--"key":{{ key }}--"value":{{ value }}</li>
        </ul>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                lst3:{
                    "name":"张晚七",
                    "age":18,
                    "hobby":"music"
                }
            },
            methods: {}
        })
    </script>
    </body>
    </html>
    迭代对象

    4.迭代数字

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <ul>
            <!-- in 后面我们放过  普通数组,对象数组,对象, 还可以放数字 -->
            <!-- 注意:如果使用 v-for 迭代数字的话,前面的 i值从 1 开始 -->
            <li v-for="i in 10">"value":{{ i }}</li>
        </ul>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
    </body>
    </html>
    迭代数字

     2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

    key属性的演示案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    
    <div id="app">
        <div>
            <label>id:
                <input type="text" v-model="id">
            </label>
            <label>name:
                <input type="text" v-model="name">
            </label>
            <input type="submit" value="提交" @click="add">
        </div>
        <p v-for="item in lst" :key="item.id">
            <input type="checkbox">{{ item.id }}----{{ item.name }}
        </p>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                lst: [
                    {id: 1, name: "张晚七"},
                    {id: 2, name: "吕不韦"},
                    {id: 3, name: "赵高"},
                    {id: 4, name: "张三丰"},
                ],
                id: "",
                name: ""
            },
            methods: {
                add() {
                    this.lst.unshift({id: this.id, name: this.name});
                }
            }
        });
    </script>
    </body>
    </html>
    v-for中key属性 

    vue指令之v-if和v-show

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- v-if 的特点:每次都会重新删除或创建元素 -->
        <!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 -->
    
        <!-- v-if 有较高的切换性能消耗 -->
        <!-- v-show 有较高的初始渲染消耗 -->
    
        <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
        <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
        <h3 v-if="flag">这是v-if的flag</h3>
        <h3 v-show="flag">这是v-show的flag</h3>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {}
        })
    </script>
    </body>
    </html>
    v-show和v-if的使用

     知识点概要

    <!-- 1. MVC 和 MVVM 的区别 -->
    
    <!-- 2. 学习了Vue中最基本代码的结构 -->
    
    <!-- 3. 插值表达式   v-cloak   v-text   v-html   v-bind(缩写是:)   v-on(缩写是@)   v-model   v-for   v-if     v-show -->
    
    <!-- 4. 事件修饰符  :  .stop   .prevent   .capture   .self     .once -->
    
    <!-- 5. el  指定要控制的区域    data 是个对象,指定了控制的区域内要用到的数据    methods 虽然带个s后缀,但是是个对象,这里可以自定义了方法 -->
    
    <!-- 6. 在 VM 实例中,如果要访问 data 上的数据,或者要访问 methods 中的方法, 必须带 this -->
    
    <!-- 7. 在 v-for 要会使用 key 属性 (只接受 string / number) -->
    
    <!-- 8. v-model 只能应用于表单元素 -->
    
    <!-- 9. 在vue中绑定样式两种方式  v-bind:class   v-bind:style -->
  • 相关阅读:
    Firemonkey 控件设定字型属性及颜色
    ListView 使用 LiveBindings 显示超过 200 条记录
    Firemonkey ListView 获取项目右方「>」(Accessory) 事件
    XE7 Update 1 选 iOS 8.1 SDK 发布 iPhone 3GS 实机测试
    Firemonkey Bitmap 设定像素颜色 Pixel
    Firemonkey 移动平台 Form 显示使用 ShowModal 范例
    XE7 提交 App(iOS 8)提示「does not contain the correct beta entitlement」问题修复
    XE7 Android 中使用 MessageDlg 范例
    导出 XE6 预设 Android Style (*.style) 档案
    修正 Memo 設定為 ReadOnly 後, 無法有複製的功能
  • 原文地址:https://www.cnblogs.com/zhangcheng94/p/12175107.html
Copyright © 2011-2022 走看看