Vue学习笔记04 脚手架-插件-混合

Vue学习笔记04 Vue-cli

使用脚手架创建Vue项目

全局安装@vue/cli，使用vue命令创建Vue项目

需要先安装node，我看的安装教程

安装命令:vue-clicnpm install -g @vue/cli
切换到要创建项目的目录，然后使用命令创建项目vue create xxx
启动项目npm run serve

render函数

vue.runtime.xxx.js是运行版的Vue，只包含核心功能没有模板编译器，所以main,js不能使用以下写法

为什么没有模板解析器？
开发的时候需要借助模板解析器解析模板，但是在打包之后，Vue已经被转换成浏览器能够识别的js,不需要模板解析器了，不用一起打包。所以使用的精简版里不包含模板解析器(模板解析器占1/3)

components:{App},
tempalete:`<App></App>`

没有模板解析器可以借助render函数

//参数是createElement函数
render(createElement){
return createElement('h1','xxx')//创建元素
}
//精简版
render:createElement => createElement('h1','xxx')
//如果使用的是组件，就不需要传第二个内容参数
import Vue from 'vue'
render:createElement => createElement(App)

关闭语法检查

vue.config.js 使用commonjs的暴露方法
此配置文件会传送给webpcak，webpack基于nodejs
脚手架会把vue.config.js里的配置拿出来和webpack写好的配置进行合并与替换

配置项lintOnSave:false关闭语法检查

ref属性

被用来给元素或子组件注册引用信息，id的替代者

<h1 ref='title'>
<School ref = "sch">
this.$refs.title 获取真实DOM
this.$refs.sch School组件的实例对象(vc)

props

props用于让组件接受外部传过来的值

//父组件传值 age传的是字符串"18"
<Student name="李四" sex="女" age="18"/>
//vbind动态绑定，绑定是引号里的js表达式的执行的结果，18
<Student name="李四" sex="女" :age="18"/>

//写法1:子组件接受值，简单接受
props:['name','sex','age']

//写法2:子组件接受值，设置希望类型
props:{
	name:String,
	sex:String,
	age:Number	
}

//写法3: 子组件接受值，完整写法
props:{
	name:{
		type:String,
		required:true //是否必须
	},
	age:{
		type:Number,//类型
		default:99 //默认值
	}
}

props是只读属性，子组件不可以修改传入的值。
如果想要修改可以使用中间变量

{{myAge}} //模板中使用

data(){
	myAge:this.age //中间变量
},
props:['age'] //优先被设置在vc组件上

mixin 混合

功能:可以把多个组件共用的配置提取成一个混合对象

mixin 混合是复用配置，如果该组件有mixin混合里面的同名属性，组件的优先。
但是生命周期函数的话，是合并，混合先执行然后执行组件自己的生命周期函数

局部混合

//在main.js的所在目录新建mixin.js 混合的定义
export const mixin = {
	methods:{
	showName(){
		alert(this.name)
		}
	}
}
//使用的组件引入混合
import {mixin} from '../mixin.js'
//混合的使用
export default{
	name:'School',
	data(){},
	mixins:[mixin]
}

全局混合

//main.js
import {mixin} from './mixin.js'
Vue.mixin(mixin) //每个组件都可以使用(vm和vc)

插件

功能:用于增强Vue
本质:包含install方法的一个对象，install方法的第一个参数是Vue，之后的参数是插件使用者传递的数据
说明
1.先使用插件，再新建vm
2.Vue.use()使用插件的时候，会调用插件的install方法
install方法的第一个参数是Vue构造函数

在src文件夹下新建plugins.js，定义插件。
Vue构造函数的方法，实例vm和vc都可以使用

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

在main.js中使用插件，先使用插件，再新建vm

//main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//使用插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

scoped样式

作用:让样式在局部生效，防止冲突。
每一个组件的style样式都会汇总在一起，容易发生样式冲突

给样式添加scoped属性，可以使样式只作用于当前组件
但是App不太适用该属性，一般在App里设置的样式会给全局适用

<style scoped></style>