如何做交易网站/百度账户托管公司

1-1 ref属性

1. ref属性：

   • 被用来给元素或子组件注册引用信息（id的替代者）

   • 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

2. 使用方式：

   • 打标识：<h1 ref="xxx">...</h1>或<School ref="xxx"></School>
   • 获取：this.$refs.xxx

3. <template><div id="app"><h1 v-text="msg" ref="title"></h1><button ref="btn" @click="showDOM">点我输出上方的DOM元素</button><School ref="sch"></School><Student></Student></div>
   </template><script>
   import School from './components/1_school'
   import Student from './components/2_Student.vue'export default {name: 'App',data() {return {msg: '啊啊啊'}},components: {School,Student},methods: {showDOM() {console.log(this.$refs.btn);     // 真实DOM元素console.log(this.$refs.title);  console.log(this.$refs.sch);     // School组件的实例对象}}
   }</script>

4. 

1-2 props配置

1-2-1

1. 父组件

       <Student name="李四"  :age="18"></Student>
   

2. 子组件

   <template>
   <!-- // 组件的结构 --><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age+1}}</h2></div>
   </template><script>
   // 组件交互相关的代码(数据、方法)export default{// name: 'Student',data() {return {// name: 'aaa',// age: 18}},// 接收的同时对数据:进行类型限制+默认值的指定+必要性的限制props: [name: {type: String，  // name的类型是字符串requird:true    // name是必要的},age: {type: Number，  // name的类型是字符串default: 99    // name是必要的}]，// props: ['name','age']}
   </script>
   

4. 功能：让组件接收外部传过来的数据

5. 传递数据：<Demo name="xxx"/>

6. 接收数据：

   1. 第一种方式（只接收）：props:['name']

   2. 第二种方式（限制类型）：props:{name:String}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{name:{type:String, //类型required:true, //必要性default:'老王' //默认值}
      }
      

   备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

1-5 mixin混入

1. mixin(混入)

   • 功能： 可以把多个组件公用的配置提取成一个混入对象

2. 使用方式：

   • 第一步定义混合

     {data() {...},methods: {...}
     }
     

   • 第二步使用混入

     • 全局混入:Vue.mixin(xxx)
     • 局部混入： mixins:['xxx']

1-5-1 全局引入混合：main.js

1. // 引入vue
   import Vue from 'vue'
   // 引入App
   import App from './App.vue'
   // 全局引入混合
   import { hunhe } from './mixin'
   Vue.mixin(hunhe)Vue.config.productionTip = false;new Vue({el: '#app',render: h => h(App)
   })
   

2. mixin.js

const mixin = {methods: {showName() {alert(this.name);}}
}
export default mixin

1-5-2 单组件引入

1. <script>
   // 引入一个混合
   import {hunhe} from '../mixin.js'
   // 组件交互相关的代码(数据、方法)export default{// name: 'School',data() {return {schoolName: 'aaa',address: '北京'}},methods: {showName() {alert(this.schoolName)}},mixins: [hunhe]}
   </script>
   

1-3 插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

   对象.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx
   }
   

4. 使用插件：Vue.use()

1-4 scoped样式

1. App不适合scoped
2. <style lang="less" scoped>
3. npm i less-loader