Vue2_9

Vue2_9

1、ref属性

代替 document

1.ref 的使用

<h1 ref="ha">haha</h1>
<!-- 等同于 -->
<h1 id="ha">haha</h1>

使用id要 document.getElementById("#ha")，才能获取

加入了 ref属性的标签，会出现在 vc 或 vm 当中 的 $refs 的对象中

// 在组件里
this.refs.ha
// 就获得了DOM元素

$refs: {
    ha: '<h1>haha</h1>'
}

2.ref 和 document 的区别

主要是在获取组件标签的区别

• ref 获取的组件标签是 该组件标签所在的组件实例对象

  <MySchool ref="MySchool"></MySchool>
  <!-- MySchool 的 VueComponent{...} -->
  

• id 获取的组件标签是 该组件标签所在的组件的 template

  <template>
  	<MySchool ref="MySchool"></MySchool>
  </template>
  <!--
  	<div id="MySchool">
          <h1>haha:{{haha}}</h1>
      </div>
  -->
  

  会在获取的 div 上自动添加 id

2、props配置

让组件接收外部传进来的数据，比如要用同一个组件，但是要不同的数据

1.使用

<!-- App -->
<XiaoMing name="小明" sex="男" age="12"/>

1.1 数组使用(用的多)

export default {
    data(){
        return {
			// 这里不写
        }	
    },
    props:[name,age,sex],
    // 没有顺序限制，传进来的属性会在 vc 里
}

这时候就可以使用了，但是有个问题，age 传进来的是一个字符串，如果进行修改：age+1 --> 121

解决方法：

• {{age*1+1}} 在Xiaoming组件里改，*1变成Number
• :age="12" : 是 v-bind，里面的12变成了表达式，这种方法最规范

1.2 对象

props:{
    name: String,
    sex: String,
    age: Number
}

可以对输入错的类型进行警告，但也仅仅只有报错

1.3 最规范的对象写法

<script>
export default {
    props:{
        name:{
            type: String,
            required: true,
        },
        age:{
            type: Number,
            default: 100,
        }
    },
}
</script>

新增属性：

• type：这是类型
• required：必须，true 就是必须有这个name
• default：默认值，没传就是这个值

2.外传属性的修改

答：最好不修改，修改会警告，但也仅仅只有警告，数值还是改了

那如果硬要修改！

整一个变量接着

<template>
    <div>
        <h1>name:{{Myname}}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            Myname: this.name,
        }
    }
    props:{
        name:{
            type: String,
            required: true,
        },
    },
}
</script>

但但是，它 Vue检查修改只能检查表面的，不能检测深层

相当于 watch 没有 deep

props:['a']
a = 10   	X
a.b = 10 	√

3.传递的是什么

传递的是 地址，所以才不让改，因为会改掉原来位置上的数值

传递的虽然不能改，但是可以使用，比如：

<template>
  <div>
    <WuWu :ha="ha"></WuWu>
    {{ a }}
  </div>
</template>

<script>
...
  data() {
    return {a:[1]}
  },
  methods:{
    ha(){
      this.a.push('ha')
    }
  }
}
</script>

<template>
  <div>
    <button @click="ha">haha</button>
  </div>
</template>

<script>
export default {
    props:['ha'],
}
</script>

在WuWu组件里，修改了App的data

3、mixin混入

复用属性

比如：

<script>
export default {
    name: 'XiaoMing',
    data() {
        return {
            name: '小明',
            age: 13,
        }
    },
    methods: {
        ha() {
            alert('haha');
        },
    }
}
</script>

<script>
export default {
    name: 'XiaoHong',
    data() {
        return {
            name: '小红',
            age: 13,
        }
    },
    methods: {
        ha() {
            alert('haha');
        },
    }
}
</script>

两个组件中的 methods 完全一致，就可以使用 mixin 混入

1.使用

1.1 创建一个js来暴露复用的属性

export const ha = {
    methods: {
        ha() {
            alert('haha');
        },
    }
}

1.2 导入并使用 mixins 属性混入

<script>
import {ha} from './mixin';

export default {
    name: 'XiaoHong',
    data() {
        return {
            name: '小红',
            age: 13,
        }
    },
    mixins:[ha],
}
</script>

mixins：数组

2.能混什么

答：基本上都能混

export const ha = {
    methods: {
        ha() {
            alert('haha');
        },
    }
}
export const age = {
    data() {
        return {
            age:300,
        }
    },
}
export const mounted = {
    // 钩子
    mounted(){
        console.log('xixi');
    }
}

3.优先级

我们混入了一个age

export const age = {
    data() {
        return {
            age:300,
        }
    },
}

<script>
    data() {
        return {
            name: '小红',
            age: 13,
        }
    },
</script>

组件里的data也有age，那会替换吗？

答：不会

那mounted钩子会替换吗？

export const mounted = {
    mounted(){
        console.log('xixi');
    }
}
--------------------------
mounted(){
    console.log('启动啦!');        
}

答：不会，会出现两个

3.1 总结

• 冲突的属性（比如data、methods）：原本的优先
• 不冲突的属性：添加

4.全局混入

在 main.js 里，使用 Vue.mixin，挨个的混入

import {ha,age,mounted} from './components/mixin'

Vue.mixin(ha);
Vue.mixin(age);
Vue.mixin(mounted);

注：这样混入会将所有的 vc、vm 都混入里面的属性

4、插件

类似于游戏里的控制台

1.创建一个插件

• 创建js
• 暴露一个对象，对象里要有 install()

export default {
    install(Vue){
        console.log('haha')
    }
}

2.使用插件

在 main.js 里

import plugins from './plugins'
// plugins.js 是我的插件
Vue.use(plugins)

这样一来，就会在控制台里输出 haha 了

3.真正的使用

install 里有一个参数，是 Vue的构造函数。那么就可以

import a from './components/mixin'
export default {
    install(Vue){
        // 混入
        Vue.mixins(a) 

        // 设置原型对象里的玩意
        Vue.prototype.aaa = 2000;
    }
}

不仅仅只有这些，之前的什么 全局过滤器、全局的指令，不都是 Vue.xxx 嘛

3.1 其他参数

在main.js 里传参数

Vue.use(plugins,1,2)

install(Vue,x,y){...}

5、样式小技巧

1.覆盖

其实写完的组件会最后汇总到一起，也就是说 如果你在两个组件里，写了两个相同的id和样式，会被后来者居上

比如：XiaoMing组件 和 XiaoHong写了两个相同的 id和样式，最后是 XiaoHong 的样式

<template>
  <div>
    <XiaoMing></XiaoMing>
    <XiaoHong></XiaoHong>
  </div>
</template>

解决：

• 组件的 id和样式 都不用同样的名字
• 在 style标签里写一个属性叫：scoped，这样会限制掉作用域

<style scoped>

元素：

<div data-v-d1d865a2="" id="ha"></div>

随机生成了一个标签属性

#ha[data-v-d1d865a2] {...}

注：最好不要在App里写，在App里写的样式不能给别人用，那写他干嘛(艹皿艹)

2.css写法切换

2.1 lang

<style lang="css">/*默认css*/

如果用 less：

<style lang="less">

报错：Module not found: Error: Can’t resolve ‘less-loader’，就是说用 less 需要一个模块，叫： less-loader

npm i less-loader

4.模拟控制台(玩)

let haha = false;
if (haha) {
	Vue.use(plugins)
}

我玩的游戏的控制台都是改文件，把false改成true