初始化脚手架
- 全局安装：
npm install -g @vue/cli
- 创建项目
vue create xxx
- 启动项目
npm run serve
一、refs 属性
-
被用来给元素或组件注册引用信息（id的替代者）。
-
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）。
-
使用方式：
打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx">...</School> 获取：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref='btn' @click='showDOM'>点我输出DOM元素</button>
<School ref='sch'/>
</div>
</template>
<script>
// 引入 School 组件
import School from './components/School.vue'
export default {
name: 'App',
data(){
return{
msg: '努力学习Vue！'
}
},
components: {
School },
methods:{
showDOM(){
console.log(this.$refs.title)
console.log(this.$refs.btn)
console.log(this.$refs.sch)
}
}
}
</script>
<style>
</style>
二、配置项 props
功能：让组件接收外部传过来的数据
- 传递数据：
<Demo name="xxx"/>
- 接收数据：
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props:{
name: String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props:{
name:{
type: String, //类型
required: true,//必要性
default:'老王' //默认值
}
}
备注：
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么复制props的内容到data中一份，然后去修改data中的数据。
接收姓名、年龄和性别的几种方式：
//简单接收
props:['name','sex','age']
//接收的同时对数据进行类型限制
props:{
name: String,
age: Number,
sex: String
}
//接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制\
props:{
name:{
type: String, //name的类型是字符串
required: true //名字是必要的
},
age:{
type: Number, //age的类型是数值
default: 99 //不传的默认值
},
sex:{
type: String,
require: true
}
}
三、混入 mixin
- 功能：可以把多个组件公用的配置提取成一个混入对象。
- 使用方式：
第一步定义混合：
{
data(){...},
methods:{...},
....
}
第二步混入：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:['xxx']
局部混入：
School.vue
<template>
<div>
<h2 @click="showName">学校名称:{
{
name}}</h2>
<h2>学校地址:{
{
address}}</h2>
</div>
</template>
<script>
//引入一个混合
import {
mixin} from '../mixin'
export default {
name: 'SchoolName',
data(){
return{
name:'哔哩哔哩',
address:'中国'
}
},
mixins:[mixin]
}
</script>
Student.vue
<template>
<div>
<h2 @click="showName">学生姓名:{
{
name}}</h2>
<h2>学生性别:{
{
sex}}</h2>
</div>
</template>
<script>
//引入一个混合
import {
mixin} from '../mixin'
export default {
name: 'StudentName',
data(){
return{
name:'张三',
sex:'男'
}
},
mixins:[mixin]
}
</script>
App.vue
<template>
<div>
<School/>
<student/>
</div>
</template>
<script>
// 引入 School 组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name: 'App',
components: {
School,Student},
}
</script>
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 关闭 vue 的生产提示
Vue.config.production = false
// 创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
mixin.js
//分别暴露
export const mixin = {
methods:{
showName(){
alert(this.name)
}
}
}
全局混入：
删除
School.vue和Student.vue的import {mixin} from '../mixin'以及mixins:[mixin]，并修改 main.js
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
import {
mixin} from './mixin'
// 关闭 vue 的生产提示
Vue.config.production = false
Vue.mixin(mixin)
// 创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
四、插件 plugins
-
功能：用于增强
Vue、 -
本质：包含
install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 -
定义插件：
对象.install = function (Vue, options) { //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxx }
定义 plugins.js, 配置插件：
plugins.js
export default {
install(Vue){
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义混入
Vue.mixin({
data(){
return {
x:100,
y:200
}
}
})
//给Vue原型上添加一个方法（vm 和 vc就都能用了）
Vue.prototype.hello = ()=>{
alert('你好')}
}
}
School.vue
<template>
<div>
<h2>学校名称:{
{
name | mySlice}}</h2>
<h2>学校地址:{
{
address}}</h2>
<button @click="test">点我测试一下hello方法</button>
</div>
</template>
<script>
export default {
name: 'SchoolName',
data(){
return{
name:'哔哩~~~~哔哩',
address:'中国'
}
},
methods:{
test(){
this.hello()
}
}
}
</script>
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
//引入插件
import plugins from './plugins'
// 关闭 vue 的生产提示
Vue.config.production = false
//应用插件
Vue.use(plugins)
//创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
五、样式 scoped
- 作用：让样式在局部生效，防止冲突。
- 写法：
<style scoped>
School.vue
<style scoped>
.demo{
background-color: orange;
}
</style>
Student.vue
<style scoped>
.demo{
background-color: skyblue;
}
</style>
加上 scoped 可以防止样式的命名冲突，如果不加，样式重名时只能使用后引入的样式。
不积跬步无以至千里 不积小流无以成江海