Vue基础学习

最新推荐文章于 2023-09-22 00:22:34 发布

微瞰技术

最新推荐文章于 2023-09-22 00:22:34 发布

阅读量301

点赞数

分类专栏： Web前端文章标签： vue v-bind v-if v-show :style

本文链接：https://blog.csdn.net/u011342403/article/details/81637712

版权

Web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

V-bind表达式

首先定义元素的属性

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'<h1>大字体</h1>',
                mytitle:'这是使用v-bind定义的标题'
            }

        })
    </script>

v-bind表达式是用来绑定元素属性的例如

            <input type="button" value="按钮" v-bind:title="mytitle" />

这样就可以绑定元素的title属性

同时我们还可以将进行表达式的字符串的改变

例如

            <input type="button" value="按钮" v-bind:title="mytitle+'123'" />

当然v-bind可以直接简写为:

例如

            <input type="button" value="按钮" :title="mytitle" />

v-on表达式

v-on表达式主要是Vue针对于传统dom元素的一些相应事件在Vue中的表现形式，

下面以onclick为例列举一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>

        <div id="app">
            <input type="button" value="点击" v-on:click="show" />
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'<h1>大字体</h1>',
                mytitle:'这是使用v-bind定义的标题'
            },
            methods:{
                show:function(){
                    alert("Hello");
                }
            }
        })
    </script>
</html>

同时，我们可以简写v-on:表达式简写为@，即将上述代码中的v-on:click简写为@click,同样可以达到与之前的效果一致

事件修饰符的简单介绍

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

v-model双向数据绑定

v-model实现的效果于v-text,v-bind类似，但是他只适用于表单元素，从而实现元素的双向数据绑定

Vue设置样式

直接在元素上使用:style设置

<!--当样式中包含'-'时，必须使用单引号包裹属性-->
            <h1 :style="{color:'red','font-size':'50px'}">
                这个字很大
            </h1>

在data中定义属性

        var vm = new Vue({
            el:'#app',
            data:{
                     h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
            }
        })

再去元素中使用:style进行赋值

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

在 `:style` 中通过数组，引用多个 `data` 上的样式对象

在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

Vue指令之`v-for`和`key`属性

迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

迭代对象中的属性


    <!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

迭代数字


<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

Vue指令之`v-if`和`v-show`

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

微瞰技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础学习

V-bind表达式首先定义元素的属性 &lt;script&gt; var vm = new Vue({ el:'#app', data:{ msg:'&lt;h1&gt;大字体&lt;/h1&gt;', mytitle:'这是使用v-bind定义的标题...
复制链接

扫一扫