(3)vue模板语法

1.全新项目，启动服务

下面这种方式，直接在vscode内部集成的终端内启动

2.v-if和v-show的区别

v-if
它们可以设置为true和false
项目结构如下所示

目前就修改了这个目录里面的代码,在这个目录里面写代码

代码如下

<template>
  <div id="app">
    <!-- 这个img标签暂时先不管，删除的话就会报错 所。没有什么影响-->
    
    <h1 v-if="false">hello world</h1>
    <h1 v-show="false">hello world</h1>

  </div>
</template>

<script>
export default {
  
}
</script>

<style>
</style>

运行结果如下

• 通过运行结果可以知道，v-if当设置为false时连标签都没有了，

3.v-for的使用

代码

<template>
  <div id="app">

   <p v-if="isLogin">欢迎你,小白</p>
   <p v-if="!isLogin"><a href="">请登录</a></p>

   <!-- 显示列表 不会将数据写死（动态产生数据）-->
   <ul>
    <li v-for="(fruit,index) of fruits" :key="index">
      <p>水果名称:{{fruit}}</p>
      <p>水果序号:{{index}}</p>
    </li>
   </ul>
   <!-- 将数据显示在一个表格里面 -->
   <table>
     <thead>
       <th>序号</th>
       <th>姓名</th>
       <th>年龄</th>
     </thead>
     <tbody>
       <tr v-for="(v,i) of students" :key="i">
         <td>{{i+1}}</td>
         <td>{{v.name}}</td>
         <td>{{v.age}}</td>
       </tr>
     </tbody>
   </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin:false,
      fruits:["苹果","香蕉","梨子"],
      students:[
        {name:"小白",age:12},
        {name:"小红",age:23},
        {name:"小黑",age:33}
      ]
    }
  },
}
</script>

<style>

</style>

4.组件

组件的命名规则

组件命令:大写字母开头(建议)驼峰命名比较好

创建自己的组件

<template>
  <div>
    <WeiWei></WeiWei>
  </div>
</template>

<script>
// 1.引入组件
import WeiWei from "./components/WeiWei.vue"

export default {
  // 2.注册组件
  components:{
    WeiWei:WeiWei
  },
  data() {
    return {
     
    }
  },
}
</script>

<style>

</style>