目录
一、脚手架结构
二、关于不同版本的vue
2.1.vue.js与vue.runtime.xxx.js的区别
1).vuejs是完整版的vue,包含:核心功能+模板解析器。
2).vue.runtime.xxx.js是运行版的vue,只包含:核心功能;没有模板解析器。
2.2.因为vue.runtime.Xxx.js没有模板解析器,所以不能使用template配置项,需要使用
render函数接收到的createElement函数去指定具体内容。
三、vue.config.js配置文件
3.1.使用vueinspect>output.js可以查看到Vue脚手架的默认配置。
3.2.使用vue.configjs可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh
四、ref属性
4.1.被用来给元素或子组件注册引用信息(id的替代者)
4.2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
4.3.使用方式
1).打标识:<h1ref="xxx">..</h1>或<School ref="xxx"></School>
2).获取:this.$refs.xXX
五、props配置项
5.1.功能:让组件接收外部传过来的数据
5.2.传递数据:<Demoname="xxx"/>
5.3.接收数据
1).第一种方式(只接收):props:[name’]
2).第二种方式(限制类型):props:{name:String)
3).第三种方式(限制类型、限制必要性、指定默认值)
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
5.4.备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
六、mixin(混入)
6.1.功能:可以把多个组件共用的配置提取成一个混入对象
6.2.使用方式
1).第一步定义混合:
{
data(){....},
methods:{....}
....
}
2).第二步使用混入:
2.1).全局混入:Vue.mixin(xxx)
2.2).局部混入:mixins:[xxx]
七、插件
7.1.功能:用于增强Vue
7.2.本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
7.3.定义插件
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
八、scoped样式
8.1.作用:让样式在局部生效,防止冲突。
8.2.写法:<style scoped>