vue学习-指令学习

最新推荐文章于 2024-05-17 15:34:29 发布

soputasmile11

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量64

点赞数

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

本文链接：https://blog.csdn.net/u014473112/article/details/120524416

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

（1）v-once，只渲染一次，后面要更新值时不渲染
试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。
（2）v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">{{message}}
  <span v-html="htmlCode"/>
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好啊',
      htmlCode: '<h1>这是大标题</h1>'
    }
  })
</script>

</body>
</html>

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

（3）v-text
不够灵活，不建议使用，建议使用{{}}

（4）v-bind
缩写：冒号
如果我们对标签的属性进行动态绑定可以使用v-bind，比如class，src，style，class，prop，xlink
（1）基本属性：src，href等
（2）绑定class，可以是数组，可以是对象，见下面说明
（3）绑定style，同上

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<!--使用比较少，还不如直接class="classA,classB"-->
<div :class="[classA, classB]"></div>
<!-- 注意这里的classA要用单引号-->
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

更多关于style和class的绑定参考官网：https://cn.vuejs.org/v2/guide/class-and-style.html

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
  .redColor{
    color: red;
  }
  .lineClass{
    text-decoration: underline;
  }
  .fontSize{
    font-size: 20px;
  }

</style>
<script src="../js/vue.js"></script>
<div id="app">{{message}}
  <!--<img :src="imgUrl"/>-->
  <!--<a :href="aHref">链接/</a>-->
  <!--class动态改变 -->
  <span :class="['fontSize',{redColor:isActive, lineClass: isActive}]">点击改变</span>
  <button @click="isActive=!isActive">点击</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好啊',
      imgUrl: 'http://www.dasouji.com/wp-content/uploads/2018/04/%E7%94%B0%E5%9B%AD-12.jpg',
      aHref: 'http://www.baidu.com',
      isActive: true
    }
  })
</script>

</body>
</html>

soputasmile11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习-指令学习

（1）v-once，只渲染一次，后面要更新值时不渲染试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。（2）v-html<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫