props
props: {
msg: {
type: Number, // Number String Boolean Object Array Function,
required: true, // 规定了msg这个参数是必传的
default: 100, // 如果参数没有传递,则使用默认值
}
}
// 如果类型为数组或对象
props: {
obj: {
type: Object,
default() {
return {a: 1}
}
},
arr: {
type: Array,
default: function() {
return [1,2,3]
}
}
}
ref (*)
-
获取dom元素
<h1 ref="mohensuibian"></h1> this.$refs.wohensuibian
-
获取子组件实例
<Son ref="myson" /> this.$refs.myson
-
ref配合v-for使用绑定元素
<span ref="myspan" v-for="item in arr"></span> this.$refs.myspan => [span, span]
jquery (在vue的项目中如何全局使用第三方插件)
-
在index.html 内通过script进行引入 不推荐
-
通过npm
-
下载 npm i jquery --save 保证命令行启动在项目下
-
Main.js
import $ from 'jquery' Vue.prototype.$ = $
-
is属性 ()
is: 是
is=“组件名称”
<button>登录</button>
<button>注册</button>
<div :is="comName"></div>
data() {
return {
comName: "Login"
}
},
methods: {
login() {
this.comName = "Login"
},
register() {
this.comName = "Register"
}
slot 插槽
什么是插槽
小霸王
在封装vue组件的时候,我们在组件的结构内的某个位置预留出一些空间,最终这个空间会被调用这个组件时传递的结构所取代
-
匿名插槽
// 某一个组件 Son <slot></slot> <Son> <p>这里的东西会替代slot的位置</p> </Son>
-
具名插槽
// 某一个组件 Son <slot name="slotA"></slot> <slot name="slotB"></slot> <Son> <div slot="slotA"></div> <div slot="slotB"></div> </Son>
-
作用域插槽
子组件的结构由父组件决定,但是数据是由子组件暴露出去
// 某个组件 Son <slot :arr="arr"></slot> data() { return { arr: [1,2,3] } } <Son> <template slot-scope="slot"> <ul> <li v-for="(item) in slot.arr"></li> </ul> </template> </Son>
scoped
style标签上的一个属性,加了scoped的style标签里面的样式,只会在当前组件进行查找,不加页面所有匹配的都会找到
鄙视题
-
如何理解虚拟dom 和 diff算法
虚拟Dom仅仅是程序员用js的对象来模拟真实dom结构
diff算法,比较新旧两颗dom树的不同,进行针对性的局部渲染
-
组件的data为什么必须是一个函数
答:如果组件的data是一个对象的话,有可能改了某一个组件的data,会造成其他组件的data跟着一起改变,违背了组件的data应该是相互独立的,互不影响的
// 组件的data如果是一个对象会有什么问题 function Component() { } Component.prototype.data = { a: 1, b: 2 } var comA = new Component() var comB = new Component() comB.data.a = 3; console.log(comA.data) // {a:3 , b:2} console.log(comB.data) // {a: 3, b:2}
// 组件是如何通过this来访问data中的数据的 function Component() { } Component.prototype.data = function () { return { a: 1, b: 2, c:3, d: 4 } } // 将a放到this的身上 Component.prototype.init = function () { var obj = this.data() for(var key in obj) { this[key] = obj[key] } // 把a和1都变成活的 // this.a = 1 } var comA = new Component() var comB = new Component() comA.init() comB.init() console.log(comA.a)