02：vue3 模版语法

1、将vue-demo项目清理为空

（1）index.html 不动

 （2）main.js删除样式引用

（3）App.vue只保留template和script

（4）清空文件夹assets和components

 

2、模版语法

（1）文本插值

打开App.vue写一下代码

 

<template>
<h1>1、模版语法</h1>
<h3>(1)、文本插值</h3>
 <p>{{ msg }}</p>
 <p>文本：{{ hello }}</p>
 <p>加法：{{ num+1 }}</p>
 <p>三目运算符：{{ ok?'Yes':'No'}}</p>
 <p>文本翻转（字符串转为数组，翻转，合并成字符串）：{{ message.split('').reverse().join('')}}</p>
 
</template>

<script>
export default{
  data(){
    return{
      msg:"神器的语法",
      hello:"Hello World!",
      num:10,
      ok:true,
      message:"大家好！"
    }
  }
}
</script>

 

打开浏览器，页面显示效果

 

文本插值允许放入有返回值结果的，有return结果。

 （2）原始Html

 在App.vue中编辑

打开浏览器，页面显示效果

 

（3）属性绑定

代码示例：App.vue

<template>
<h1>1、模版语法</h1>
<h3>(3)、属性绑定</h3>
<div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle" v-bind:about="dynamicAbout">测试</div>
<p v-html="rawHtml"></p>
</template>

<script>
export default{
  data(){
    return{
      dynamicId:"appid",
      dynamicClass:"appclass",
      dynamicTitle:"测试",
      dynamicAbout:null  //绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除
    }
  }
}
</script>
<style>
.appclass{
  color:red;
  font-size: 30px;
}
</style>

 

浏览器页面显示结果：

 （4）布尔型属性

<template>
<h1>1、模版语法</h1>
<h3>(4)、布尔型属性</h3>
<button disabled>button1</button><br>
<button :disabled="isButtonDisabled">button2</button><br>
<button :disabled="isButtonDisabled3">button3</button>
</template>

<script>
export default{
  data(){
    return{
      isButtonDisabled:true,
      isButtonDisabled3:false
    }
  }
}
</script>

 

页面浏览效果及显示代码元素

 

（5）动态绑定多个属性值

App.vue代码

<template>
<h1>1、模版语法</h1>
<h3>(5)、动态绑定多个值</h3>
<div v-bind="objectOfAttrs">测试</div>
</template>

<script>
export default{
  data(){
    return{
      objectOfAttrs:{
        id:"appid",
        class:"appclass"
      }
    }
  }
}
</script>
<style>
.appclass{
  color:red;
  font-size: 30px;
}
</style>

打开浏览器显示页面和元素