vue.config.js

  1. lintOnSave:false //关闭代码检查工具

ref

  1. <h1 ref="title">内容</h1>
  2. <school ref='school'></school>
  3. methods:{
  4.     getshow(){
  5.       console.log(this.$refs.title)//获取ref为title的dom元素
  6.     console.log(this.$refs.school)//获取ref为school的VC实例对象
  7.   }
  8. }
  9. 如果ref在组件上，则返回该组件的实例对象Vuecomponent

props配置，实现组件复用，数据不同

  1. props传入的值不允许修改 ，props是只读的
  2. props传入的名。不能为vue已经占用的名 ```javascript props:[“a”,”b”,”c”]

props:{ a：String, b: Number, c: Boolean }

props:{ a:{ typeof:Number, //数据类型 default:99, //默认值 required:true //是否必填 } } //对于props传入的不允许修改的方案 data(){ return{ mya:this.a, myb:this.b } }

  1. <a name="JC2p4"></a>
  2. ## mixin混入
  4. 1. 如果混合和该组件的值，方法冲突，优先使用该组件
  5. 2. 都可以调用混合中的函数
  6. ```javascript
  7. // mixin.js
  8. export default{
  9.     methods: {
  10.         showName(){
  11.             alert("混合事件");
  12.             console.log("将重复的事件使用mixin混合减少代码")
  13.         }
  14.     },
  15. }
  16. //xxx.vue
  17. import mixi from '../mixin'
  18. export default {
  19.   name: 'HomeView',
  20.   components: {
  21.     HelloWorld
  22.   },
  23.   mixins:[mixi] //引入
  24. }
  25. //xxx2.vue
  26. import mixi from '../mixin'
  27. export default {
  28.   name: 'HomeView2',
  29.   components: {
  30.     HelloWorld2
  31.   },
  32.   mixins:[mixi]
  33. }
  35. //都可以调用混合中的函数

插件 —- plugins.js

  • 百度，没学懂

    scoped

    ]