VUE 指令

最新推荐文章于 2024-07-09 00:17:48 发布

Yin_Xiaobo

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量677

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/wulala_hei/article/details/80458168

版权

VUE 专栏收录该内容

5 篇文章 4 订阅

订阅专栏

Vue 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
</head>
<body>
    <div id="app">
        <p v-cloak="msg">{{ msg }}</p>
        <p v-text="msg2"></p>
        <p v-html="msg2"></p>

        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show">
        <input type="button" value="按钮" :title="mytitle + '123'" @click="show">

    </div>


// 引入Vue 的依赖
<script src="../vue.js"></script>

    <script>
        // 实例化
        var vm = new Vue({
            // 操作的 DOM 元素
            el : "#app",
            data : { // 属性
                msg : '123',
                msg2 : '<h1>这是一个h1标签</h1>',
                mytitle : '这是自定义的title'
            },
            methods : {  // 方法
                show : function () {
                    alert("show");
                }
            }
        });
    </script>
</body>
</html>

v-text
- 没有闪烁问题
- 会覆盖元素中原本的内容
- html标签会作为字符串直接输出，不会解析标签
v-html
- 没有闪烁问题
- 会覆盖元素中的内容
- html标签会按照标签解析
v-cloak
- <p>{{ 属性名 }}</p>
- 有占位符闪烁问题
- 只会替换占位符的内容，不会覆盖元素中的原本内容。
v-bind:[属性名]=”xxx”
- 是 Vue 中提供用于绑定属性的指令，可以简写 :titile="mytitle"
- <input type="button" value="按钮" v-bind:title="mytitle">
- <input type="button" value="按钮" :title="mytitle + '123' ">
- v-bind 中可以写合法的 js 表达式。
v-on
- 事件绑定指令
- v-on:事件 = "方法名"
- 简写 @事件 = ""
- 如果方法名加了小括号() 那么就可以给这个方法进行传参。

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时，使用事件捕获模式
.self 只在事件在该元素本身（比如不是子元素）触发时，触发回调
.once 事件只触发一次

v-model 指令 —- 双向数据绑定

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V ，无法实现双向数据绑定
v-model 可以实现表单元素和 Model 中数据的双向数据绑定

注意：v-model 只能作用在表单元素上中
如： input select textare CheckBox 等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model双向数据绑定</title>
</head>
<body>
    <div id="box">
        <h2>{{ msg }}</h2>

        // 在页面 V 修改数据，可以同时修改 M 中的 msg 数据 
        <input type="text" v-model="msg">
    </div>

    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el : "#box",
            data : {
                msg : "This is one"
            }
        });
    </script>
</body>
</html>

Vue 中使用样式

使用 class 样式

数组
<h1 :class="['red','thin']"> 这是一个邪恶的h1 </h1>
数组中使用三元表达式
<h1 :class=" ['red','thin',isactive?'active':''] "> 这是一个邪恶的h1 </h1>
数组中嵌套对象
使用对象可以提高代码可读性
<h1 :class=" ['red','thin',{'active' : isactive}] "> 这是一个邪恶的h1 </h1>
直接使用对象
<h1 :class="{red:true, this:true, active:true}"> 这是一个邪恶的h1 </h1>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
<h1 :style="{ 'color':'red', 'font-weight':200 }"> 这是一个邪恶的h1 </h1>
将样式对象定义到 data 中，并直接引用到 :style 中。
- 在 data 中定义样式
```
data:{
    h1style:{'color':'red', 'font-weight':200}

} 
```
- 在元素中，通过属性绑定的形式，将样式应用到元素中。
  <h1 :style="h1style"> 这是一个邪恶的h1 </h1>
在 :style 中通过数组，引用多个 data 上的样式对象。
- 在 data 中定义样式
```
data:{
    h1style:{'color':'red', 'font-weight':200},
    h1style2:{'font-size':'30px', 'fontStyle':'italic'}

} 
```
- 在元素中，通过属性绑定的形式，将样式应用到元素中。
  <h1 :style="[h1style,h1style2]"> 这是一个邪恶的h1 </h1>

v-if 与 v-show

v-if
- 特点：每次都会重新创建或者删除元素。
- 有较高的切换性能消耗
- 如果元素可能永远不会显示出来被用户看到，则推荐使用 v-if
v-show
- 特点：每次不会进行DOM的创建和删除操作，只是切换了元素的 display:none 样式。
- 有较高的初始渲染消耗
- 如果元素涉及到频繁的切换，则推荐使用 v-show

v-for 和 key 属性

迭代数组

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

<ul>
    <li v-for="(item, i) in list">{{ i }}---{{ item }}</li>
</ul>

 <script>
    var vm = new Vue({
        el : "ul",
        data : {
            list : [1,2,3,4,5]
        }
    });
</script>

迭代对象中的属性

<ul>
    <li v-for="(item, i) in list">{{ item.name}} --- {{ item.id }} </li>
</ul>

<script>
    var vm = new Vue({
        el : "ul",
        data : {
            list : [
                {id: 1, name: "zs1"},
                {id: 2, name: "zs2"},
                {id: 3, name: "zs3"}
            ]
        }
    });
</script>

迭代数字
```
<ul>
    <li v-for="count in 10 ">{{ count }}</li>
</ul>
```
注意： v-for 循环的时候，key 属性只能使用 number 获取 string。
key 使用的，必须使用 v-bind 属性绑定的形式，指定 key 的值。
在组件中，使用 v-for 循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的字符串/数字类型的 key 值。