备注:因为对之前脚手架部分的笔记不太满意,所以打算过阵子在这里另开一份。阅读时直接从新版本开始即可
旧版本
3.1 vue-cli脚手架
- index.html中建立id为app的模板(不用修改)
<div id="app"></div>
- main.js引入App.vue,并将它挂载到index.html的模板上(不用修改)
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
- App.vue中引入编写的vue子组件(RoyalNavy、IronBlood是我编写的子组件,可以按自己的项目更改)
<template>
<div id="app">
<RoyalNavy></RoyalNavy>
<IronBlood></IronBlood>
</div>
</template>
<script>
import RoyalNavy from './components/RoyalNavy.vue'
import IronBlood from './components/IronBlood.vue'
export default {
name: 'App',
components: {
RoyalNavy,
IronBlood
}
}
</script>
- 编写子组件
<template>
<div>
<h2>阵营:{{ camp }}</h2>
<h2>旗舰:{{ flagship }}</h2>
</div>
</template>
<script>
export default {
name: 'RoyalNavy',
data() {
return {
camp: '皇家',
flagship: '伊丽莎白女王'
}
}
}
</script>
3.2 Render函数
- vue.js是完整版的vue.runtime.xxx.js,包含核心+模板解析器
- 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要用render函数接收createElement函数去制定具体内容
3.3 ref属性
3.4 props配置
3.5 mixin混入
功能:可以把多个组件的共同配置提取成共同的混入对象
-
在src目录配置xxx.js文件存放mixin
export const mixin1 = { methods: { button() { alert(this.cname); }, }, }
-
使用混入
-
全局混入:在main.js中使用
import Vue from 'vue' import App from './App.vue' import { mixin1 } from "./mixin"; // 全局混合 Vue.mixin(mixin1)
-
局部混入:在子组件xxx.vue中使用
<script> import { mixin } from "../mixin"; export default { name: "", data() { return { }; }, mixins: [mixin], }; </script>
-
3.6 scoped样式
作用:让样式仅对子组件生效
写法:在对应子组件下写上
<style scoped>