Vue 前端笔记 | 常用指令及语法

最新推荐文章于 2024-05-11 08:19:17 发布

Wbw Belief

最新推荐文章于 2024-05-11 08:19:17 发布

阅读量327

点赞数

分类专栏： vue 文章标签： vue 语法指令常用笔记

本文链接：https://blog.csdn.net/qq_41497111/article/details/95399199

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

学习完，基本指令回顾总结下，方便日后回忆。

一、基本指令

{{ xxx }} 差值表达式

v-cloak 防止页面加载时出现 vuejs 的变量名

<div v-cloak>
  {{ xxx}}
</div>

<style>
[v-cloak] {
  display: none;
}
</style>

这样直至div内变量编译完毕后才会显示。

v-text 直接输出文本，会覆盖原内容
v-html 同v-text 类似，但是会加载标签
v-bind 绑定属性，通常绑定 class、style 等，简写为：class="xxxx"
v-on 绑定事件，通常绑定点击、鼠标移动等，简写为 @click="xxx"
v-model 双向数据绑定，差值表达式、v-text、v-html都是单向数据输出，但是 v-model 会将改变的数据写入至缓存，这是vue一大特色，但是此属性只能运用于表单元素，如：input、select等

v-for 遍历数组、对象、数字等

<div id="app">
    <p v-for="(item,index) in list">
        一级数组： {{index}} --- id: {{item.id}} --- name: {{item.name}}
        <br/>
        二级数组：
        <span v-for="(cl,i) in item.clothes">
            {{i}} --- {{cl}}
        </span>
    </p>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 1, name: '张三', clothes: ['牛仔衫', '夹克衫', '衬衣']},
                {id: 13, name: '李四', clothes: ['围巾', '帽子', '短裙']},
                {id: 32, name: '王五', clothes: ['牛仔衫', '毛衣', '风衣']}
            ]
        }
    });
</script>

// 结合 if 使用 -------------------------------------------------------------------------
<div id="app">
    <p v-for="(val,key) in user">

       <span  v-if="key == 'clothes'">
           clothes:
           <span v-for="(it,i) in val">
               {{i}} --- {{it}} &nbsp;&nbsp;
            </span>
       </span>
        <span v-else>
            {{key}} --- {{val}}
        </span>
    </p>
    <br/>
    <span v-for="(it,i) in user.clothes">
                {{it}}
            </span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: '张三',
                clothes: ['牛仔衫', '夹克衫', '衬衣']
            }
        }
    });
</script>

:key 只接受 number、string的值，用来标记当前元素，防止当前元素因为添加数据发生偏移

v-if 条件判断语句，但 v-if 的值为反时，会重新加载或删除元素，通常结合 v-else使用
v-show 展示或隐藏，当为 false 时，style 会变成 display:none，重新渲染元素，反之亦然

在vue 中绑定样式只能使用 v-bind:class 和 v-bind:style ，一个类样式，一个内联，需灵活使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .red {
            color: red;
        }

        .then {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 :class="['red']">大大的 classObj.............</h1>
    <h1 :style="[styleObj,styleObj2]">大大的styleObj.......</h1>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj: {color: 'red', 'font-weight': 200},
            styleObj2: {'font-style': 'italic'},
            classObj: {red: true, italic: true, active: true, then: true}
        },
        methods: {}
    });
</script>
</body>
</html>

二、事件修饰符

.stop 阻止冒泡，如按钮点击，外面也有，此时会阻止除了自身以外的事件行为
.prevent 阻止默认行为，当子元素发生事件行为，会阻止自身的事件行为
.capture 捕获机制，捕获自身及子元素事件的发生，从自身开始执行
.self 自己执行，当父元素也有事件行为时，只触发自身的事件行为
.once 只执行一次，再次发生事件时，不触发事件

三、vue属性

el 指定要控制的区域，只能绑定一个区域
data 对象，指定控制区域内要使用的数据
methods 对象，可以自定义一些方法，通常与 v-on:xxx 联合使用
this 在vue 对象中，使用自身的方法时，必须要用到 this

其他：

Vue 前端笔记 | MVVM、MVC 关系与区别

Vue 前端笔记 | 流行框架 vue 入门介绍与比较

Wbw Belief

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 前端笔记 | 常用指令及语法

学习完，基本指令回顾总结下，方便日后回忆。一、基本指令{{ xxx }} 差值表达式 v-cloak 防止页面加载时出现 vuejs 的变量名 <div v-cloak> {{ xxx}}</div><style>[v-cloak] { display: none;}</style>这样直至div内...
复制链接

扫一扫