Vue脚手架
vue-cli：全称command line interface，命令行接口工具
Vue脚手架是Vue官方提供的标准化开发工具
初始化脚手架
第一步(仅第一次执行)：全局安装 @vue/cli
npm install -g @vue/cli
第二步：切换到要创建项目的目录，然后使用命令创建项目
npm creat 项目名
第三步：启动项目
npm run server
关于不同版本的Vue（APP.vue）
1、vue.js和vue.runtime.xxx.js的区别
vue.js是完整版的Vue，包含核心功能+模板解析器
vue.runtime.xxx.js是运行版的Vue，包含核心功能，没有模板解析器
2、因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，只能使用render函数接收到的createElement函数(可以写成箭头函数)指定具体的内容
查看脚手架的默认配置
Vue脚手架默认隐藏了webpack相关的配置，要是向查看具体的webpack配置，请执行
vue inspect > output.js
修改脚手架的默认配置
脚手架文件结构(基本)
|--node-modules
|--public
|--favicon.ico 页签图标
|--index.html 主页面
|--src
|--assets 存放静态资源
|--log.png 如：图片
|--component 存放组件
|--HelloWorld.vue 如：helloworld组件
|--App.vue 汇总所有组件
|--main.js 入口文件
|--.gitignore git版本管制忽略的配置
|--babel.config.js babel的配置文件
|--jsconfig.json js配置文件
|--package-lock.json 包版本控制文件
|--package.json 应用包配置文件
|--README.md 应用描述文件
|--vue.config.js vue配置文件
props配置项
功能：让组件接收外部传过来的数据’
1、传递数据
2、接收数据
第一种方式(只接收)：props:['name']
第二种方式(限制类型)：
props:{
name:Number
}
第三种方式(限制类型、限制必要性、指定默认值)：
props:{
name:{
type:String,
required:true,
default:'张三'
}
}
3、注意
props是只读的，Vue底层会监测对props的修改，如果进行的修改，就会发出警告
如果确实需要修改，就需要把props中的内容复制到data中一份（属性名不能相同），然后修改data中的数据
<template>
<div>
<Student name="李四" sex="女" :age="19"/>
<hr>
<Student name="王五" sex="男" :age="80"/>
<hr>
<Student name="赵六" sex="男"/>
</div>
</template>
<script>
// 引入Student组件
import Student from './components/Student.vue'
export default {
name: 'App',
components:{
Student,
},
}
</script>
<template>
<div class="demo">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生年龄：{{myAge}}</h2>
<h2>学生信息：{{msg}}</h2>
<button @click="updateAge">尝试修改收到的参数——年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
msg:'七进七出长坂坡！！！',
myAge:this.age
}
},
// 通过props接收到的数据最好不要改
// 但是可以通过在data中设置一个中间属性，修改这个中间属性
methods:{
updateAge(){
this.myAge = 10000;
}
},
// 简单接收
props:['name','sex','age']
// 接收的同时对数据进行类型的限制
// props:{
// name:String,
// age:Number,
// sex:String
// }
// 在接收的同时对数据进行类型的限制+默认值的指定+必要性的限制
// props:{
// name:{
// // 设置接收到的参数的类型
// type:String,
// // 这个属性是必要的
// required:true
// },
// age:{
// typeof:Number,
// // 如果没有传入，就是用默认值
// default:999
// },
// sex:{
// typeof:String,
// required:true
// }
// }
}
</script>
mixin混入
功能：可以把多个组件公用的配置提取成一个混入对象(mixin.js)
使用方法：
1、定义混入，如：
{
data:{......},
methods:{......}
}
2、使用混入，如：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
export const mixin = {
methods:{
showName(){
alert(this.name)
}
}
};
export const mixin2 ={
data(){
return {
name:'123123123',
x:9999999999
}
},
mounted() {
console.log("你好！！！！");
},
}
import Vue from "vue";
import App from "./App.vue";
import {mixin,mixin2} from './mixin'
Vue.config.productionTip = false;
Vue.mixin(mixin);
Vue.mixin(mixin2);
new Vue({
el:'#app',
render:h => h(App)
})
<template>
<div class="demo">
<h2 @click="showName">学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>混入的属性：{{x}}</h2>
</div>
</template>
<script>
//引入混合
import {mixin,mixin2} from "../mixin"
export default {
name:'Student',
data(){
return {
name:'赵云',
sex:'男'
}
},
//使用混合
mixins:[mixin,mixin2]
}
</script>
template>
<div class="demo">
<h2 @click="showName">学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
// 引入一个混合
import {mixin} from "../mixin"
export default {
name:'School',
data(){
return {
name:'复旦大学',
address:'地球'
}
},
mixins:[mixin]
}
</script>
插件
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件：
对象.install = function(Vue,options){......}
使用插件：
import xxx from './xxx';
Vue.use(xxx);
注意：
在引入插件时，必须在new Vue之前，要不然不能使用
export default {
install(Vue){
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
});
// 自定义指令
Vue.directive('fbind',{
// 指令与元素成功绑定时(一上来)执行bind函数
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入到页面中时调用inserted函数
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时调用update函数
update(element,binding){
element.value = binding.value
}
})
// 定义混入
Vue.mixin({
data(){
return {
x:100,
y:200
}
}
})
// 给原型上添加一个方法，vm和vc都能用
Vue.prototype.hello = () =>{alert("Hello")}
}
}
import Vue from "vue";
import App from "./App.vue";
// 引入插件
import plugins from "./plugins"
Vue.config.productionTip = false;
Vue.use(plugins);
new Vue({
el:'#app',
render:h => h(App)
})
<template>
<div class="demo">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'赵云',
sex:'男'
}
},
}
</script>
<template>
<div class="demo">
<h2>学校名称：{{name | mySlice}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="hello">点我测试hello</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'哈工程',
address:'哈哈'
}
},
}
</script>
scoped样式
作用：让样式在局部生效，防止名字相同而导致的冲突
写法：
<style lang="less" scoped>
.demo{
background-color: yellow;
.qwe{
font-size: 50px;
}
}
</style>
1、被用来给元素或子组件注册引用信息(id的替代者)
2、应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(VueComponent)
3、使用方式：
打上标识：< h1 v-text="msg" ref="xxx">
获取标识：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
// 引入School组件
import School from './components/School.vue'
export default {
name: 'App',
components:{
School,
},
data(){
return {
msg:'helloworld'
}
},
methods:{
showDOM(){
console.log(this.$refs.title);//获取真实DOM元素-h1
console.log(this.$refs.btn);//获取真实DOM元素-button
console.log(this.$refs.sch);//获取组件
}
}
}
</script>
<template>
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'北京大学',
address:'北京'
}
},
}
</script>
<style>
.demo{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
