141.vue-插值表达式，指令与属性绑定 Day01

最新推荐文章于 2023-08-06 17:38:23 发布

曾经沧海难为水850

最新推荐文章于 2023-08-06 17:38:23 发布

阅读量405

点赞数

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

本文链接：https://blog.csdn.net/qq_56008519/article/details/126588417

版权

vue笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.vue引入

因为是在学习阶段使用直接引入

后续项目阶段则使用脚手架或者vue-ui等其他方式

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>

2.插值表达式

写入一个案例

正常用html写出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
    <h1>这里是h1标题</h1>
</body>
</html>

使用vue的插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="box">
        <h1>{{h1}}</h1>
    </div>

    <script>
        let data = {
            h1:"这里是h1标题"
        }

        let option = {
            el:"#box",
            data
        }

        var vm = new Vue(option)
    </script>


</body>
</html>

在项目中我们常常使用的是后端发来的数据对页面进行渲染，而vue框架能够较为有效的处理较多数据

1.

<div id="box">
        <h1>{{h1}}</h1>
    </div>

{{}}视为在js环境运行

所以诸如{{80+20}}能够正常打出100

h1实际上为data.h1 可以不用写

{{}}也能对对象和数组使用譬如{{obj.age}} {{arr[0]}}

2.

let option = {
            el:"#box",
            data
        }

        var vm = new Vue(option)

el：意为元素选择器一定程度代替了document.querySelector()的作用

用法也差不多类选择用. id选择用#

data => data = data

这个插值表达式会有一点不好就是加载时会短暂的出现源码比如例子它会短暂的出现{{h1}}然后在跳转到我们想要的页面

下面要用的知识可以解决这个问题

3.指令

例子同上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<style>
			[v-clock]{
				display: none;
			}
		</style>
<body>

    <div id="box">
        <h1 v-clock>{{h1}}</h1>
    </div>

    <script>
        let data = {
            h1:"这里是h1标题"
        }

        let option = {
            el:"#box",
            data
        }

        var vm = new Vue(option)
    </script>


</body>
</html>

写在标签内在vue框架运行时会吧项目中的v-clock属性去掉

$mount

v-text 底层代码等同 xx.innerText=""

v-html 底层代码等同 xx.innerHTML=""

v-pre 静默-跳过编译

尽量使用指令

4.属性绑定

1.v-html，v-text

<div id='app'>
<div v-text="obj.name"></div>
<div v-html="obj.gender"></div>
</div>

<script>
       var vm = new Vue({
				el: '#app',
				data: {
                    obj:{
                        name:"karen",
                        gender:"<a href='https://www.baidu.com'></a>"

}
    }})
</script>

v-html指令的作用：设置元素的innerHTML

并且其中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本

总之解析文本用v-text 解析html结构用v-html

2.v-bind:src，v-bind:href

<a v-bind:href="sina[0].source">{{sina[0].site}}</a>
<a v-bind:href="sina[0].source" v-html="sina[0].site"></a>

正常放在img标签里的src不被解析

必须使用v-bind:src

href同理

曾经沧海难为水850

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
141.vue-插值表达式，指令与属性绑定 Day01

这个插值表达式会有一点不好就是加载时会短暂的出现源码比如例子它会短暂的出现{{h1}}然后在跳转到我们想要的页面。在项目中我们常常使用的是后端发来的数据对页面进行渲染，而vue框架能够较为有效的处理较多数据。{{}}也能对对象和数组使用譬如{{obj.age}} {{arr[0]}}写在标签内在vue框架运行时会吧项目中的v-clock属性去掉。总之解析文本用v-text 解析html结构用v-html。v-html指令的作用：设置元素的innerHTML。{{}}视为在js环境运行。...
复制链接

扫一扫

专栏目录