学习Vue第二天

再让我学一会吧！

于 2021-06-30 22:02:13 发布

阅读量122

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ypxcan/article/details/118353775

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

开发中什么时候称之为方法，什么时候称之为函数？

方法：method
函数：function

生命周期：事务从诞生到消亡的整个过程

Vue生命周期：

基本语法：

v-once

该指令后面不需要跟任何表达式（比如之前的v-for后面是有跟表达式的）
该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    })
</script>

v-html

在某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们希望解析出HTML展示，可以使用v-html指令

该指令后面往往会跟一个string类型
会将string的HTML解析出来并且进行渲染

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!',
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

v-text

v-text作用和Mustache比较相似，都是用于将数据显示在界面中

v-text通常情况下，接收一个string类型

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    })
</script>

v-pre

v-pre用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法。

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    })
</script>

v-cloak

在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!'
            }
        },4000)
    })
</script>
</body>

v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令

<div id="app">
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!',
            imgURL: 'https://cn.vuejs.org/images/lifecycle.png',
            aHref: 'http://www.baidu.com'
        }
    })
</script>

v-bind语法糖

v-bind有一个对应的语法糖，也就是简写方式

<div id="app">
    <img :src="imgURL" alt="">
    <a :href="aHref">百度一下</a>
</div>

什么是计算属性？

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完成的名称。

但是如果多个地方都需要显示完整的名称，我们就需要些多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性：

计算属性是写在实例的computed选项中的

再让我学一会吧！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录