vue学习笔记-常用指令

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

 

v-html

内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
    {{msg}}
    <p>Using mustaches: {{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        rawHtml : '<span style="color:red">this is should be red</span>'

    }
});

效果区别：

Using mustaches: <span style="color:red">this is should be red</span>

this is should be red

 

v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<div id="app">
    <div v-bind:class="color">test...</div>
</div>

<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        
    }
});
</script>

<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>

效果：

 

 

 

v-text

效果类似于{{aaa}}动态切换变量内容

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>