vue常用语法 渲染数据

渲染

v-once

• 该指令后面不需要跟任何表达式（比如之前的v-for后面是又跟表达式的）
• 该指令表示元素和组组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变

v- html

当服务器传回一个HTML代码时，{ { }} 就会将HTML代码输出，所以需要使用这个解析HTML代码

<h2 v-html="url"></h2>

data: {
	url: "<a href='http://www.baidu.com'>百度一下</a>"
}

v-text

一般不用，不够灵活，类似直接用 { { }}

<h2 v-text="message"></h2>
<h2>{
   
   {  message }}</h2>

data: {
   message: "666"
}

v-pre

原封不动的显示，包括 { { }}

v-block

在vue解析之前，div中有一个属性v-block
在vue解析之后，div中没有一个属性v-clock
这样就会直接显示数据，而是不有{ { }} 出来半秒后转换为数据
以后也不怎么用这个

<style>
	[v-clock] {
     
     
		display: none;
	}
</style>

<div id="app" v-clock>
    <h2 v-once>{
   
   { message }}</h2>
</div>

动态绑定

v-bind 基本使用