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()
                    }
                }
            }
        })