Vue2.x基础（一） —— 指令

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/q95548854/article/details/79669238

01-Vue的初体验

// 1. 创建Vue的实例
    <div id="app">
       <p>{{message}}</p>
       <input type="text" v-model="message">
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {  // vue中的model -> 数据
               message: '你好,世界!'
            }
        });
    </script>

02-Vue的常用指令-v-once

• ###### 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    <div id="app">
        <p v-once>原始值: {{msg}}</p>
        <p>后面的: {{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
           el: '#app',
            data: {
               msg: '今天的天气很好!'
            }
        });
    </script>

03-Vue的常用指令-v-show、v-if、v-else

• v-show 根据表达式之真假值，切换元素的 display CSS 属性。

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

    <div id="app">
        <p v-if="show">要显示出来!</p>
        <p v-if="hide">不要显示出来!</p>
        <p v-if="height > 1.55">小明的身高: {{height}}m</p>
        <p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>
        <p v-else>小明的身高不足1.55m</p>
        <!--<p v-if="1">小明的身高: {{height1}}m</p>-->

        <p v-show="show">要显示出来!</p>
        <p v-show="hide">不要显示出来!</p>
        <p v-show="height > 1.55">小明的身高: {{height}}m</p>
        <p v-show="height1 > 1.55">小明的身高: {{height1}}m</p>
    </div>
    <script>
        new Vue({
           el: '#app',
            data: {
                show: true,
                hide: false,
                height: 1.68,
                height1: 1.50
            }
        });
    </script>

03-Vue的常用指令-v-for

<div v-for="(val, key, index) in object"></div>
<div v-for="(item, index) in items"></div>

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

04-Vue的常用指令-v-text与v-html

都会清空原有内容

v-text:更新元素的textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

v-html:更新元素的 innerHTML。注意：内容按普通 HTML 插入

• ###### 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

    <div id="app">
        <span v-text="msg"></span>
        <!-- 和下面的一样 -->
        <span>{{msg}}</span>

        <div v-html="html">
            哈哈哈哈!
            <input type="text">
        </div>
    </div>
    <script>
        new Vue({
           el: '#app',
            data: {
               msg: '今天的天气很好!',
               html: '<input type="date"><input type="color">'
            }
        });
    </script>

05-Vue的常用指令-v-bind

缩写：:

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：

<svg :view-box.camel="viewBox"></svg>

    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">

    <!-- 缩写 -->
    <img :src="imageSrc">

    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName">

    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">

    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>

    <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

    <!-- 通过 prop 修饰符绑定 DOM 属性 -->
    <div v-bind:text-content.prop="text"></div>

    <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
    <my-component :prop="someThing"></my-component>

    <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>

    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>

05-Vue的常用指令-v-on

缩写：@

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。

.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>