VUE 基本指令（代码）-蒲公英云

VUE 基本指令（代码）

HTML 部分

<div id="username">
    {
   {message}}
    <!-- v-model 绑定  响应 message-->
    <input type="text" v-model="message">
    <!-- 绑定Dom  click -->
    <button v-on:click="tabbnave">点击反转</button>
    <!--  v-html 用来 显示html -->
    <p v-html="cander"></p>
    <!-- v-text  用来显示text(文本值) 不包括 html 元素 -->
    <p v-text="cander"></p>
    <!-- v-for 遍历循环输出 Vue 中的值 -->
    <p v-for="(nav,key) in naver">
        {
   {"key的值为："+key+" nav的值为："+nav}}
    </p>
    <br />
    <!-- 动态响应 -->
    <input type="text"  v-model="values">
    <br />
    <!-- 绑定Dom 用来绑定 methods 中方法 并用v-model 来实现动态响应 -->
    <!-- v-on:oninput    缩写为    @input   input标签事件包括  oninput  onchange -->
    <input type="text" @input="inputnave" v-model="values">
    <br /> 
    <!-- if 动态判断 v-bink:href -->
    <!-- v-bink:href   缩写为 :href -->
    <a :href="href">点击我</a>
    <!-- v-if 判断是否 为 true (显示) -->
    <p v-if="thater">你猜我啊</p>
    <p v-show="thater">你再猜我啊</p>
    <!-- v-if v-else-if 多重判断 -->
    <p v-if="comer == 0">你好</p>
    <p v-else-if="comer == 1">你好啊</p>
    <p v-else-if="comer ==2">你好噢</p>
    <button @click="isflag()">啊哈</button>
</div>

JS 部分

<script type="text/javascript">
//注册一个全局自定义指令
Vue.directive('focus',{
    //当绑定的元素插入到DOM中
    inserted:function(el){
        //聚焦元素
        el.focus();
    }
})
var app=new Vue({
    el : '#username',
    data : {
        message : 'Hello World!',
        cander : "<span>你猜猜我在不在？</span>",
        naver : [1,2,3],
        values : "",
        href : "http://www.baidu.com/",
        thater : true,
        comer : 2,
        flag:true
    },
    methods : {
        tabbnave:function(){    //元素逆序输出
            this.message = this.message.split('').reverse().join('')
        },
        inputnave:function(){    //value值获取
            var num = event.target || event.srcElement;
            this.values = num.value;
        },
        isflag:function(){   //是否为true
            this.flag = !this.flag;
        }
    },
    //注册一个局部自定义函数
    directives : {
        change : {
            //指令的定义
            bind : function(el,bindings){
                //改变元素
                // el.change();
                console.log(el);
                console.log(bindings);
            },
            //指令的定义
            unbind : function(){
                //改变元素
                // el
                console.log("指令解除了绑定");
            }
        }
    }         
})
</script>