• vue的基本指令


    放在

    <style type="text/javascript"></style>

    形式:

    [v-text]{
        display: none;
    }                             //相当于自定义属性

    MVVM设计思想:

    M(model) V(view)  VM(View-Model) 分而治之,把不同的功能放到不同的模块

    指令:

    
    

    (1)什么是自定义属性

    
    

    (2)指令的本质就是自定义属性

    
    

    (3)指令的格式是以v-开始(比如v-on)

    1.v-text 填充纯文本     
        
    2.v-html 填充HTML片段
      (1)存在安全问题,容易导致xss攻击
      (2)本网站内部数据可以使用,来自第三方的数据不可以用
    3.v-pre 填充原始消息 (1)显示原始信息,跳过编译过程

    4.v-once
    (1)数据只更新一次.
    不会被更改

    5.v-model ********
     (1)放在input里面.数据改变那么内容就会改变(双向数据绑定)

    6.v-bind 动态的处理属性
     (1)例如 v-bind:href="url" 可以动态的改变属性
    (2)可以简写为 <a :href="url"> 省略为 :属性名="属性值"

    自定义指令:

       注:钩子函数: inserted,blind等

     (1)全局自定义指令

     <div id="app">
                <input type="text" value="是是是" v-aaa v-qqq="{color:'pink'}">   
                <div v-qqq></div>
                <!-- v-aaa就是自定义属性  功能是页面刷新input元素自动获取焦点 -->
            </div>
       <script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //自定义指令
            Vue.directive("aaa",{
                inserted:function(el){       //el表示指令绑定的元素  
                    el.focus();
                }
            })
            Vue.directive("qqq",{
                inserted:function(el,binding){
                console.log(binding.value.color)  
                //binding 是自定义指令的参数   binding.value是属性
                el.style.backgroundColor =  binding.value.color;
                }
            })
        var vm = new Vue({
            el:"#app",
            data:{
            },
            methods:{
            },
        })
        </script>

     (2)局部自定义指令

              // 局部指令需要定义在 directives 的选项
                directives: {
                    color: {
                        bind: function (el, binding) {
                            el.style.backgroundColor = binding.value.color
                        }
                    },
                    focus: {
                        inserted: function (el) {
                            el.focus()
                        }
                    }
                }
            })
  • 相关阅读:
    kickstart-G
    some advice in work
    Java Applet:练习TextField类和TextArea类的文本事件
    jquery带下拉菜单和焦点图
    炫酷的CSS3抖动样式:CSS Shake
    CSS: iPhone Custom CSS
    css sprite技巧详解
    CSS缎带效果
    css 采集下载
    CSS控制表格嵌套
  • 原文地址:https://www.cnblogs.com/wsm777/p/13577222.html
Copyright © 2020-2023  润新知