【7】从零开始学Vue3

1、项目结构：

asserts用来存放静态资源的（一些图片，公共的css文件等）

components用来存放vue的组件（vue是组件开发）

 

App.vue是主入口组件 （根组件，所有组件都是从这里开始，从这里显示的）

 

main.js是主入口文件，（所有程序入口）

 

template可以理解是写html的

script可以理解为是写业务逻辑的

 

2、模板语法

目的：为了让标签里显示的数据从静态变为动态

语法：双花括号{ {}}

步骤：

（1）写一个data函数（用来返回数据）

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"测试"
    }
  }
}
</script>

（2）用花括号引入数据

<template>
  <div class="hello">

    <h3>学习vue模板语法</h3>
    <p>{
  {message}}</p>

  </div>
</template>

结果

目的：为了识别标签里的链接

语法：在标签括号里加v-html 

其实就是超链接的做法 以下对比普通的和v-html属性的标签

<template>
  <div class="hello">

    <p>{
  {message}}</p>
    <div>{
  {rawHtml}}</div>
    <div v-html="rawHtml"></div>


  </div>
</template>

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

结果

目的：让标签里的属性也动态化

语法：在标签括号里加v-bind

 <div v-bind:id="dynamicId"></div>
    //v-bind:可以简写为一个冒号“：”
 <div :id="dynamicId"></div> 

export default {
  name: 'HelloWorld',
  data(){
    return {
      dynamicId:10001
    }
  }
}

Vue.js也支持JavaScript表达式支持

结果

 注意只支持表达式，不支持语句和流程空值（如赋值语句和if语句都不会生效）

3、条件渲染

目的：用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。

 语法：v-if=""

比如用来标记某个物品是否为新增的状态或者控制父级容器的显示和隐藏

export default {
  name: 'HelloWorld',
  data(){
    return {

      message:"测试",
      rawHtml:"<a href='http://www.itbaizhan.com'>百战</a>",
      dynamicId:10001,
      num:10,
      flag:true
    }
  }
}

结果：

 目的：与v-if组合成一个逻辑的要么这样要么那样

语法：v-else

 只能控制一个的显示的

v-show 

v-if与v-show的区别（前者是删除，后者是隐藏）

4、列表渲染

目的：把一个数组映射为一组元素

语法：v-for="item in items" （items指的是定义的数组名称，item为数组的每一个元素）

步骤：

 （1）创建一个数组（数组用方括号创建）

 newsList:[
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1002,
            title:"今日新闻2"
          },
          {
            id:1003,
            title:"今日新闻3"
          }
        ]

 （2）以ul加li标签的形式显示在页面上

报错：

 解决：在后面加 ：key=“item.id”

(106条消息) Elements in iteration expect to have ‘v-bind:key‘ directives.‘_DaftJayee的博客-CSDN博客_v-bind:key' directives

<template>
  <div class="hello">
    <ul>
      <li v-for="item in newsList