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>