vue（二）[基础指令图文讲解]

v-model 双向绑定

v-mode是配合input框使用的，data数据改变，使用了v-mode的input框内容也会改变。

三种输出方式

vue共有三种输出方式：
1:vue模板输出{ {}} 只能输出纯文本
2：v-text 跟模板输出几乎一样 也是只能输出纯文本不能解析html标签 但是他会覆盖掉P标签原有的内容
3：v-html 可以解析html标签在输出

data数据作为测试

data: {
   
	text: '<h1>你过来啊</h1>'
}

模板语法

直接在p标签中使用{ {}}模板语法：

<p>564541 {
  {text}} 54154154</p>

结果：

v-text

b标签使用v-text 内容以及有6546496494 然后在data写入h1标签带你过来啊，我们看到原来内容已经被覆盖但是h1并没有被解析出来。

<b v-text="text">6546496494</b>

结果：

v-html

在h3标签中使用v-html，可以解析h1标签，使内容变成h1标签内容。

<h3 v-html="text">我是html原本的内容</h3>

结果：

v-bind

v-bind 主要用于属性绑定显示到页面比如文字、数字、照片等，Vue官方提供了一个简写方式 :bind，例如：

<a v-bind:href="url"></a>

缩写

<a :href=