Vue内部指令

作者: PZcoder | 来源:发表于2020-04-12 17:23 被阅读0次

Vue 内部指令
Vue内部指令
‘cnpm’不是内部指令，‘vue’不是内部指令
Vue 二内部指令
vue不是内部或外部指令--解决办法
web前端vue：vue内部指令大全说几个常用的
VUE 内部指令有哪些？？
Vue.js 内部指令
[vue warn]:failed to resolve dir
Vue.js破冰系列-3自定义指令

1.v-if/v-else/v-show

        <div v-if="isLogin">isLogin为true时显示</div>
        <div v-else>isLogin为false时显示</div>
        <div v-show="isLogin">isLogin为true时显示</div>
        <!-- 
        v-if与v-show的区别
        v-if：判断是否加载，可以减轻服务器的压力，需要时加载
        v-show:调整css display属性，可以使客户端操作更加流畅。
         -->

2.v-for

        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>

3.v-text/v-html

<body>
    <h1>v-text&v-html<h1>
    <hr>
    <div id="app">
        <!-- 弊端：js出错时，页面显示{{message}}错误内容 -->
        <span>{{message}}</span>
    
        <!-- v-text:js没内容时页面不显示 -->
        <span v-text="dodo"></span>

        <!-- v-html可以解析标签，弊端：可能引起攻击，尽量少用。 -->
        <span v-html="dodo"> </span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world!',
                dodo:'<h2>hello world!</h2>'
            }
        })
    </script>
</body>

4.v-on监听事件绑定

<body>
    <div id="app">
        <p>比赛得分：{{score}}</p>
        <p>
            <button v-on:click="addScore">加分(v-on)</button>
            <!-- v-on简写方法 -->
            <button @click="substractScore">减分(v-on简写)</button>
            <br/>
            <!-- 键盘码 enter对应13 可以使用v-on:keyup.13 -->
            <input type="text" v-on:keyup.enter="onEnter" v-model="score2">

            <button onclick="onclickAdd()">加分（onclick方法）</button>
        </p>
    </div>

    <script type="text/javascript">

        function onclickAdd(){
            app.score += 2;//数据处理和app中的不同
        };

        var app = new Vue({
            el:'#app',
            data:{
                score:0,
                score2:1,//绑定初始值
            },
            methods:{
                addScore:function(){
                    this.score ++;
                },
                substractScore:function(){
                    this.score --;
                },
                onEnter:function(){
                    this.score = this.score + parseInt(this.score2);
                },
            }
        })
    </script>
</body>

5.v-model数据源绑定、双向数据绑定

        <p>原始文本信息：{{message}}</p>
        
        <p>v-model：<input type="text" v-model="message"></p>

        <!-- lazy:文本框失去焦点时更新数据 -->
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>

        <!-- number:先输入数字再输入文本，文本不显示 -->
        <p>v-model.number：<input type="text" v-model.number="message"></p>

        <!-- trim:去掉空格 -->
        <p>v-model.trim<input type="text" v-model.trim="message"></p>

6.v-bind绑定标签上的属性

<div id="app">
        <img v-bind:src="imgSrc" width="200px"/>
        <!-- 简写方法 -->
        <a :href="webUrl" target="_blank">技术宅</a>

        <div :class="className">1.绑定Class</div>
        <div :class="{classA:isOK}">2.绑定Class中的判断</div>
        <div :class="[classA,classB]">3.绑定Class中数组</div>
        <div :class="isOK?classA:classB">4.绑定Class中三元运算符</div>

        <div>
            <input type="checkbox" id="isOK" v-model="isOK">
            <label for="isOK">isOK={{isOK}}</label>
        </div>

    <div :style="{color:red,fontSize:font}">5.绑定style值</div>
    <div :style="styleObject">6.对象绑定style</div>
    </div>

7.v-pre/v-cloak/v-once

<div id="app">
        
        <div v-pre>v-pre 原样输出，不进行渲染：{{message}}</div>

        <div v-cloak>v-cloak渲染完成后才显示：{{message}}</div>

        <div v-once>v-once只在第一次渲染时显示一次：{{message}}</div>

        <div><input type="text" v-model="message">修改内容对v-once不影响</div>
    </div>