【无标题】

Vue
模块化
通过import引入组件
组件（component)是最强大的功能
组件的后缀名.vue
每个.vue有三部分组成
template模板结构
script组件的javaScript
style组件的样式

所以初始的hello
我们定义的Helloworld.vue
中app.vue中的template是helloworld.vue组成的

所以一般我们先写自己的组件hello.vue放到components
然后在app.vue中使用我们的组件
所以模块的复用非常方便

为什么我们在app.vue这样写就可以显示呢？
因为我们main.js
createApp(App).mount(‘#app’)
导入后，把他mount到#app的标签
其实就是index.html中的app标签内容
最终显示都是index.html

npm run serve
实际上就是运行package中的serve “script”

为了显示很多数据，我们把属性定义为一个参数
下面的数据给出具体值

<template>
    <div>
        <h1>{{title}}</h1>
    </div>
</template>
<script>
export default {
    name:"Movie",
    data:function(){
        return{
            title:"金刚狼"
        }
    }
}

同时为了在使用时能指定数据的值，我们使用props定义一个属性列表，这样就可以在标签里面进行赋值
Movie.vue中的script

<script>
export default {
    name:"Movie",
    props:["title"],
    // data:function(){
    //     return{
    //         title:"金刚狼"
    //     }
    // }
}
</script>

app.vue

<template>
  <div id="app">
    
    <Movie title="金刚狼"></Movie>
  </div>
</template>

然后就可以定位到Movie.vue中属性

<template>
    <div>
        <h1>{{title}}</h1>
    </div>
</template>

同样用之前学到的组件，可以便利数据，显示

<template>
  <div id="app">
    
    <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>

  </div>
</template>

<script>
import Movie from './components/Movie.vue';

export default {
  name: 'App',
  data:function(){
    return{
      movies:[
        {id:1,title:"金刚狼1",rating:9.1},
        {id:1,title:"金刚狼2",rating:2.1},
        {id:1,title:"金刚狼3",rating:3.1}
      ]
    }
  },
  components: {
    Movie
}
}
</script>

同时我们可以在Movie中写自己的一些样式，脚本
我们自己定义的方法都应该写到methods中

<script>
export default {
    name:"Movie",
    props:["title","rating"],
    // data:function(){
    //     return{
    //         title:"金刚狼"
    //     }
    // }
    methods:{
        fun(){
            alert("收藏成功")
        }
    }
}
</script>

https://blog.csdn.net/estrusKing/article/details/118228252
组件引入报错，解决方法
删除.vue或者路径./前面加@
应该是name:“Movie”,引起的，相当于我们重新命名了？

如何将数据在同级组件之间传递？
例如Movie和Hello两个自己定义的组件之前通信

element-ui 饿了吗公司提供的开源前端框架

传递代码时，可以不用传node_modules，因为依赖信息已经写在package.json中了，重新下载就行了

因此在缺失node_modules时，我们可以npm install，他就可以自动去找package。json然后下载

用第三方的组件，就需要全局注册VUE2
Vue.use(ElementUI);

main()大概就这个样子
引入包-全局注册
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

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

属性看不懂，可以去下面看解释
最好自己读一下才好复制粘贴

图标库
Font Awesome

https://fontawesome.dashgame.com/
如何使用？
先安装npm install font-awesome
使用
import ‘font-awesome/css/font-awesome.min.css’
图标就是fa class名字

<i class="fa fa-camera-retro"></i>