vue基础知识

40次阅读

共计 6013 个字符,预计需要花费 16 分钟才能阅读完成。

Vue 基础知识整理
vue 实例方法:
<div id=”root”>
{{num}}
<my-components></my-components>
</div>
<template id=”tem”>
<div>
<p> 这是组件 </p>
</div>
</template>
</body>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
const app = new Vue({
el: “#root”,
data: {
num: 123,
obj: {c: 666}

},
components: {
“my-components”: {

template: “#tem”
}
}
})
</script>

app.$el 与 app.$refs 都是获取 dom 的节点,app.$el 是组件挂载的节点,而 app.$refs.xxx 则是 ref=xxx 的节点

app.$data 用于获取 data 中的所有数据, 如果要直接获取数据可以通过 app.$num 某个属性即可

app.$children 获取子组件

app.$root === app 相等获取 vue 实例

app.$options 返回一个对象,里面包含创建 vue 实例时传入的参数以及默认的参数,所以可以通过 app.$options.data().num 来获取数据;app.$options.render = (h) => h(“div”, {}, “ 页面上数据重新 update 时触发 ”), 例如加个定时器,那么 h 函数就会执行并渲染页面

const unWatch = app.$watch(‘xx’, (n, o) => {}), 可用来监听 data 中的数据变化,但是用 app 监听是,watch 不会自动关闭,需要手动关闭,unWatch()

app.$on 与 app.$emit,用来定义事件以及触发事件,在父组件 emit 子组件的 on 事件
vm.$on(‘test’, (a ,b) => {//vm.$once 事件是代表只执行一次
console.log(‘test is emit’)
})
vm.$emit(‘test’, 1, 2) // 可以传递给 a, b

app.$forceUpdate 与 app.$set(app.obj, ‘xx’, 1)可以用来渲染当 data 中的 obj 并没???? 定义 a 时,但在 html 中我们有写入了 a,原来 a 是不会被渲染出来的,但是这两条语句都能使得 a 渲染出来; 起到了类似强制刷新的作用

app.$nextTick(function() {}): 常用来获取 dom 更新后的数据,因为 dom 更新数据时异步的,有时候并不能及时获取到,则可用这么方法; 也可当做 promise 使用
Vue.nextTick()
.then(function () {
// DOM 更新了
})

vue 的生命周期
vue 创建到挂载
beforeCreate () {
this.$on(‘test’, (a, b) => {
console.log(a, b, ‘ 执行事件 ’)
})
this.$emit(‘test’, 1, 2)
// 事件已完成,但 dom 与数据不能进行操作
},
created () {
console.log(this.msg)
this.msg = 888
console.log(this.msg)
// 能操作 data 中的数据但不能操作 dom
},
beforeMount () {
console.log(this.$refs.span, ‘ 还是不能操作获取 dom’)
// b 不能获取 dom
},
// 这中间会执行 render 函数,进行虚拟 dom 的渲染
// 接下来菜市 mounted 阶段
mounted () {
console.log(this.$refs.span, ‘mounted 能进行 dom 的获取与操作 ’)
}
如果 new Vue()时没有进行 el 的指定则不会进行 beforeMount 与 mounted,我们可以手动 vm.$mount(“#app”)如果 new Vue()时有 template: ‘<div>888</div>’, 或者 render (h) {h(‘div’, {}, ‘888’)}都会对 el:#app 的 dom 进行整体覆盖
vue 数据更新 beforeUpdate 与 updated 当数据发生变化时会执行这两个钩子函数,但是一般可以通过 watch 与 Computed` 进行监听数据变化,执行相应操作,官方提到:
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated:
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
vue 卸载
vm.$destroy()螚手动触发 beforeDestroy 与 destroyed; 卸载不是消除页面上的 dom, 而是解除任何绑定
vue-data

data 中存放着组件或者 vue 实例的数据;但是在 new Vue()时,data 则可以直接 写成一个对象,而在组件中时 data 必须为一个方法,并且 return 一个对象,这是为什么呢?就是必须返回一个独立的对象,防止组件之间相互影响
当组件中的 data 为一个对象时:因为组件时可复用的,父组件 A 中使用了子组件 b,并且对 b 组件中 data 的值进行了改变,那么当父组件 c 再次使用子组件 b 时也会使用被 A 改变了的 data,这是不合理的,所以在组件中 data 必须为一个 `function` 并且返回一个对象

vue-html
<div v-html=”html”></div>

data: {
html: ‘<span>888</span>’ // 会解析 html 结构并 append 进去
}
vue-bind
绑定 dom 的一些 attribute
<div v-bind:class=”{active: isActive}”></div> //v-bind 可省略

data: {
isActive: true
}
// 或者
<div :class=”classname”></div>
computed: {
classname () {
return {
active: !this.isActive
}
}
},

computed,watch,methods 浅谈区别

computed 本质就是 get 方法,通常用的就是 get 方法去获取数据,该数据不用放在 data 中;直接放在 computed 中,通过计算通过 get 方式获取数据,默认第一次渲染就能获取到,而不用等到重新渲染在获取;(监听多个 data 数据来 get 自己想要数据,不要出现无限循环)通常形式如下
computed: {
xx () {
return ‘xxx’
}
}

watch 通常用于监听 data 中的数据,有两个参数 (new, old) 来改变相应的数据,看起来是一对多,与 computed 的多对一有区别;而且默认第一次渲染不刷新;可以手动 handle 并且不要改自身监听的属性的值
watch: {
xxx (new, old) {
….
}
} // 默认第一次渲染不刷新
watch: {
xxx: {
handle (new, old) {

}
},
immediate: true,
deep: true // 深度监听,例如监听 obj 时其中的元素发生变化,并不会监听到,但是 deep 为 true 时则会生效,这样性能开销会大
} // 通过 handle 第一次渲染刷新
所以我们可以使用字符串形式, 来指定监听 obj 中的 a
watch: {
‘xxx.a’: {// 监听 xxx 对象中的 a 属性
handle (new, old) {

}
},
immediate: true,
} // 通过 handle 第一次渲染刷新

methods 与 computed 不同,所有数据变化都会执行 methods 内的方法

vue 原生指令

v-text 等价于 textContent,v-html 等价于 `innerHTML

v-show=”bool” 就是是否 display:none;v-if,v-else-if,v-else 是动态增删 dom 会消耗性能不推荐使用
v-for

<div id=”app”>
<ul>
<li v-for=”(item, index) in arr” :key=”item”>{{item}}: {{index}}</li>
</ul>
<ul>
<li v-for=”(value, key, index) in obj” :key=”key”>{{key}}: {{value}} – {{index}}</li>
</ul>
</div>
<script>
Vue.config.devtools = true
const vm = new Vue({
el: ‘#app’,
data: {
msg: 123,
obj: {
‘a’: 12,
‘b’: 34
},
arr: [1, 2, 3, 4]
}
})
</script>

v-on 绑定事件,当绑定对象不是 vue 实例时,实际上是使用 addEventListener 进行事件添加, 若是实例对象则 vm.$on()

v-model

<div id=”app”>
<!– <comp-one :value=”num” @input=”num = arguments[0]”></comp-one> –>
<comp-one v-model=”num”></comp-one>
<div>{{num}}</div>
</div>
<script>
Vue.config.devtools = true

const component = {
props: [‘value’],
template: “<input type=’text’ :value=’value’ @input=’handleInput’/>”,
methods: {
handleInput(e) {
this.$emit(‘input’, e.target.value)
}
}
}
Vue.component(‘CompOne’, component)
const vm = new Vue({
el: ‘#app’,
components: {
CompOne: component
},
data: {
num: 1
}

})
</script>
vue 组件

创建
方法 1:全局创建一个组件

const component = {
template: ‘<span>{{text}}</span>’,
data () {
return {
text: 123456
}
}
}
Vue.component(‘CompOne’, component)
const vm = new Vue({
el: ‘#app’,
template: ‘<comp-one></comp-one>’,
})
组件内部创建组件
const component = {
template: ‘<span>{{text}}</span>’,
data () {
return {
text: 123456
}
}
}
const vm = new Vue({
el: ‘#app’,
components: {
CompOne: component
},
data: {
arr: [1, 2, 3]
}
})

props 属性 通过父组件向子组件传递数据,但 props 是单项数据流,不能有子组件进行改变,需要父组件传递一个函数,由父组件来决定怎么改变 props 的值
<div id=”app”>
<comp-one :prop-one=”num” :on-change=”handleChange”></comp-one>
//<comp-one :prop-one=”num” @change=”handleChange”></comp-one>
</div>
<script>
Vue.config.devtools = true

const component = {
template: ‘<span @click=”handleClick”>{{propOne}}</span>’,
props:{
propOne: Number,
onChange: Function // 这便可省略用 $emit
},
methods: {
handleClick() {
this.onChange()
//this,$emit(‘change’)
}
}

}
Vue.component(‘CompOne’, component)
const vm = new Vue({
el: ‘#app’,
components: {
CompOne: component
},
data: {
num: 1,
},
methods: {
handleChange() {
this.num += 1
}
}
})
</script>

extend 属性
const component = {
template: ‘<span @click=”handleClick”>{{propOne}}{{text}}</span>’,
props:{
propOne: Number,

},
data () {
return {
text: 888
}
},
mounted () {
console.log(‘component mounted’) // 先执行
},
methods: {
handleClick() {
// this.onChange()
this.$emit(‘change’)
}
}

}
const compVue = Vue.extend(component) // 生成 vue 子类并拥有组件的属性
// 也可通过新建一个组件并继承上个组件属性(extend:component),并 new Vue()
new compVue({
el:’#app’,
propsData: {
propOne: 12356 // 用 propsData 进行赋值
},
data: {

text: 666 // 后覆盖继承组件的 data 中的值
},
mounted () {
console.log(‘compVue mounted’) // 后执行
}
})
vue- 插槽
父组件决定放什么内容,子组件决定放哪
具名插槽
<div id=”app”>
<comp-one>
<span slot=”body”> 具名插槽 </span>
<span slot=”foot” slot-sc>{{value}}</span>
<span slot-scope=”props”>{{props.value}}作用域插槽 </span>
</comp-one>
</div>
<script>
Vue.config.devtools = true;

const component = {
template: `
<div>
<div>
<slot name=’body’></slot>
</div>
<div>
<slot name=’foot’></slot>
</div>
<div>
<slot :value=”value”></slot>
</div>
</div>
`,
data () {
return {
value: 888
}
}
};
const vm = new Vue({
el: “#app”,
components: {
CompOne: component
},
data: {
value: 666
}
});
</script>

正文完
 0