Vue 创建Vue项目（晓舟报告笔记）

npm install -g @vue/cli

安装完成之后可以使用vue命令

vue create helloworld

创建的项目目录结构如下所示：

node_modules：存放项目依赖包
public：存放静态文件(例如图片等)
src：项目源文件，后续开发几乎都在这个目录下进行
main.js为项目的入口文件
App.vue是单文件组
package.json记录了vue项目的所有依赖，其中有个script属性，可以定义一些命令（npm run serve啥的）

//main.js

//import和export是ES2015的语法，类似于node的require和module.export
import Vue from 'vue'

//以vue为后缀的文件是vue的单文件组件
import App from './App.vue'

Vue.config.productionTip = false	//配置开发选项，false就会有友好的错误提示，发布项目了可以写成true

new Vue({
  render: h => h(App),
}).$mount('#app')

开发vue应用的过程中，主要任务就是去编写这些以vue为后缀的文件。
可以把组件理解成一个，可以自定义的，有更强大功能的标签，而我们开发web项目，其实就是在编写和组装这些组件，例如晓舟报告的官网，可以将整个应用拆分成header，slider等等内容。

$mount("#app")是挂载到id = “app”的容器上

不用箭头函数的话

new Vue({
  render (createElement) {
    return createElement(App);
  }
}).$mount('#app')

render方法中的createElement可以根据组件生成DOM节点，这样，就成功地将单文件组件App.vue加载到index.html中了。
几乎不会碰他，别管

App.vue

<template>
  <!-- 网页模板，编写html文件 -->
  <h1>HelloWorld</h1>
</template>

<script>
// js
</script>

<style>
/* css */
</style>

< template > < /template >里面只能写一个标签
可以这样

  <div>
    <h1>HelloWorld</h1>
    <h2></h2>
  </div>

不要忘了单文件组件是因为被其他模块import的，所以单文件组件中一定要写export，用模块化的语法export default将组件的示例暴露给外部。这样组件文件才能被使用。

<script>
export default {

  // 如果是直接引入vue.js的话，data是一个对象
  // new Vue({
  //     data:{
  //         message:"hello world"
  //     }
  // }).$mount("#app")

//现在是基于node来开发的，所以date应该为一个函数
  data() {
    return {
      message: "hello vue",
    };
  },
};
</script>

ta属性与之前相比，变成了一个方法，而data中的数据是data方法的返回值。

按下button，alert(“hi”)

<template>
  <!-- 网页模板，编写html文件 -->
  <div>
    <h1>{{ message }}</h1>
    <button @click="showhi">hi</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello vue",
    };
  },
  methods: {
    showhi() {
      alert("hi");
    },
  },
};
</script>

<style>
/* css */
</style>

指令 (Directives) 是带有 v- 前缀的特殊属性，在此之前我们学习过的v-bind v-on

条件判断
通过v-if和v-show指令可以控制元素的显示与隐藏，区别如下：
v-if=‘false’：不会渲染DOM，查看元素不可见。
v-show=‘false’：会渲染DOM，查看元素可见，但是样式为display:none;

<div>
    <button @click="showOrNot">显示与隐藏</button>
    <h2 v-if="isShow">hello world</h2>
    <h2 v-show="isShow">hello world</h2>
</div>
export default {
    data(){
        return {
            isShow:true
        }
    },
    methods:{
        showOrNot(){
            this.isShow = !this.isShow;
        }
    }
}

显示列表
显示列表的功能在web应用中是非常常见的，例如文章列表、博客列表，学生列表等等，可以使用v-for指令将数据绑定在列表中

<template>
    <ul>
        <li v-for="fruit in fruits">{{fruit}}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return {
            fruits:["香蕉","苹果","鸭梨"]
        }
    }
}
</script>

v-for="fruit in fruits中的fruit是fruits中的元素，fruits是data中的数据，此数据是一个数组，fruit则是数组中的元素。
获取索引

<li v-for="fruit,index in fruits">
    <p>名称：{{fruit}}</p>
    <p>索引：{{index}}</p>
</li>

在开发的过程中，经常会遇到这种情况，数据集合的每一个元素并不是简单的字符串，而是对象，我们同样可以使用v-for执行遍历所以元素以及元素的属性。

<table>
    <thead>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </thead>
    <tbody>
        <tr v-for="student,index in students">
            <td>{{index + 1}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
        </tr>
    </tbody>
</table>


export default {
    data(){
        return {
            students:[
                {name:"小明",age:2},
                {name:"小亮",age:3},
                {name:"小红",age:4},
            ]
        }
    }
}

组件嵌套

自定义组件一般在components目录中创建，命名用大驼峰的方式。
如果首字母小写并且与html标签重名，程序会报错。

import Hello from "@/components/Hello"
import HelloWorld from "@/components/HelloWorld"
export default {
//注册组件
    components:{
        Hello,
        HelloWorld
    }
}


<div>
    <hello></hello>
</div>

视频地址：
https://www.bilibili.com/video/BV1er4y1P7UN?p=4