【无标题】

vue文档学习

模板语法

文本

数据绑定最常见的形式就是使用“Mustache”(双大括号) 语法的文本插值

<span>Message: {{ msg }} </span>

一般配合js中的data() 设置数据

export default{
    name:'HelloWorld',
    data(){
        return{
            msg:"消息提示"
        }
    }
}

原生html

双大括号会将数据解释为普通文本，而非HTML代码。

为了输出真正的HTML，你需要使用v-html指令。

<p>Using mustaches: {{ rawHtml }} </p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p

data(){
    return {
        rawHtml:"<a href='https://www.itbaizhan.com'>百站</a>", 
        message:"学习Vue"
    }
}

屬性Attribute

Mustache 语法不能在HTML属性中使用，然而，可以使用v-bind指令

<div v-bind:id=“dynameicId"></div>

data(){
    return {
        dynamecId:1001
    }
}

---

温馨提示
v-bind: 可以简写成 i

使用JavaScript表达式

在我们的模板中，我们一直都只绑定简单的property键值，Vue.js都提供了完全的javaScript表达式支持。

{{num+20}}
{{flage ? '孙'：'好在'}}
num：10
{{ message.split('').reverse().join('') }}

这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式：--》
{{ var a =1 }}
<!-- 流程控制也不会生效 使用三元表达式 -->
 {{ if (ok) {return message} }}

<template>
  <div class="hello">
    <h3>学习vue3:模板语法</h3>
    <p>{{ message }}</p>
    <div>{{ rawHtml }}</div>
    <div v-html="rawHtml"></div>
    <div v-bind:id="dynameicId"></div>
  </div> 
</template>

<script>
export default {
  name:'HelloWorld',
  data(){
    return {
      message:"测试",
      rawHtml:"<a href='http://www.itbaizhan.com'>百战</a>",
      dynameicId:10001
    }
  }
}
</script>