(3)vue模板语法

1.全新项目，启动服务

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

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

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

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

代码如下

<template>
  <div id="app">
    
    
    <h1 v-if="false">hello worldh1>
    <h1 v-show="false">hello worldh1>

  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>