Vue中的常用指令

最新推荐文章于 2024-07-22 15:13:59 发布

只会CV只会CV只会CV

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量304

点赞数 7

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

本文链接：https://blog.csdn.net/qq_39921135/article/details/139294253

版权

Vue 专栏收录该内容

228 篇文章 0 订阅

订阅专栏

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

语法：

v-html = "表达式 " → 动态设置元素 innerHTML

示例代码：

<body>
  <div id="app">
    <!-- 插值表达式并不能解析标签，而是会以存文本的方式展示到页面上 -->
    <div>{{ msg }}</div>
    <div v-html="msg"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <h3>学前端~来黑马！</h3>
        `
      }
    })
  </script>
</body>

具体有哪些指令可以查询官网

学习 --> API

可以看见，总共14个指令，但这14个并不都是常用的，只用下述用红框框起来的这10个指令才是常用的

只会CV只会CV只会CV

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中的常用指令

可以看见，总共14个指令，但这14个并不都是常用的，只用下述用红框框起来的这10个指令才是常用的。Vue 会根据不同的【指令】，针对标签实现不同的【功能】指令是 vue 开发中最基础、最常用、最简单的知识点。<h3>学前端~来黑马！为啥要学：提高程序员操作 DOM 的效率。具体有哪些指令可以查询官网。学习 --> API。
复制链接

扫一扫

专栏目录