10、vue指令

最新推荐文章于 2023-06-25 11:17:01 发布

Sun Jiakai_凯

最新推荐文章于 2023-06-25 11:17:01 发布

阅读量201

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/s12345672/article/details/120936282

版权

1、指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令		② 属性绑定指令		③ 事件绑定指令
④ 双向绑定指令		⑤ 条件渲染指令		⑥ 列表渲染指令

2、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

v-text
{ { }}
v-html

v-text (会覆盖元素内默认的值)

<!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>
</head>
<body>
    <!-- 2. 声明一个将要被vue控制的dom区域 -->
    <div id="app">
        <!-- 把username对应的值渲染到p标签中 -->
        <p v-text="username"></p>
        <!-- 把 gender 对应的值渲染到p标签中, 默认的文本"性别"会被gender的值覆盖掉 -->
        <p v-text="gender">性别</p>
    </div>
    <!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
    <script src="lib/vue-2.6.12.js"></script>
    <script>
        // 3. 创建vue实例对象
        const vm = new Vue({
     
            el: '#app', //el: 指定当前vm实例要控制页面的哪个区域
            // 指定model数据源
            data: {
     
                username: '张无忌',
                gender: '男'
            }
        })
    </script>
</body>
</html>

{ { }}

vue 提供的 { { }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 { { }} 语法的专业名称是插值表达式
相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容

<div id="app">
    <!-- 会保留元素中默认的额文本内容 -->
    <p>{
  {username}}</p>
    <p>{
  {gender}}</p>
</div>
<script>
    // 3. 创建vue实例对象
    const vm = new Vue({
     
        el: '#app', //el: 指定当前vm实例要控制页面的哪个区域
        // 指定model数据源
        data: {
     
            username: '张无忌',
            gender: '男'
        }
    })
</script>

v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的HTML 元素，则需要用到v-html 这个指令

<!-- 2. 声明一个将要被vue控制的dom区域 -->
<div id="app">
    <!-- 会保留元素中默认的额文本内容 -->
    <p>{
  {username}}</p>
    <p>{
  {gender}}</p>
    <p v-html="description"></p>
</div>
<!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->

最低0.47元/天解锁文章

Sun Jiakai_凯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
10、vue指令

1、指令的概念指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构vue 中的指令按照不同的用途可以分为如下 6 大类：① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令2、内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容v-text{{ }}v-htmlv-text (会覆盖元素内默认的值)<!DOCTYPE html><html la
复制链接

扫一扫