前端面试题—vue部分详解
栏目: JavaScript · 发布时间: 5年前
内容简介：cmd命令npm i vueyarn add vue
- 单页面应用：在一个页面跳来跳去，不重新加载页面
- vue 特点：渐进式 框架 双向数据绑定
- 双向数据绑定：视图改变 数据自动更新；数据更新 视图自动改变
- 渐进式：vue vue-router路由 vuex axios
- 框架：自己写的代码被框架调用（库：自己调用库的代码）
- 声明式
安装vue
cmd命令
npm i vue
yarn add vue
vue核心实现方法
var obj={}
Object.defineProperty(obj,'name',{
value:'xhufeng',
configurable:true,//是否可删
writable:true,//是否可写
enumerable:true,//是否可枚举（循环）
set(val){
//只要外界给name赋值，就会触发该函数
//形参val就是外界赋予的值
},
get(){
return 123
}
})
复制代码
vue指令
指令都是行内属性 v-model 放在input、textarea、select>option上的，实现双向数据绑定 v-text 展示对应的文本 v-once 对应的标签只渲染一次 v-show=布尔 是否能显示，true能显示，false不能显示（存在隐式转化） v-html 把值中的标签渲染出来
v-for
循环显示元素 可以循环数组、对象、数字、字符串 最好加 :key='a+i' v-for='item in ary'
v-bind
用于绑定行内属性 简写成 :
v-if
控制是否渲染该元素 值是true，则渲染该元素；false则不渲染 与 v-else v-else-if 连着使用 可以使用template标签，就不会出现多余标签
<body>
<div id="app">
<h1>{{name}}</h1>
<button @click='flag=!flag'>按钮</button>
<h2 v-show='flag'>hello</h2>
<h2 v-show='!flag'>world</h2>
<button @click='n=1'>1</button>
<button @click='n=2'>2</button>
<button @click='n=3'>3</button>
<h3 v-if='n===1'>hello</h3>
<h3 v-else-if="n===2">hahaha</h3>
<h3 v-else>world</h3>
</div>
</body>
</html>
<script src="./node/node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: "珠峰",
flag:true,
n:1
},
methods: {
fn() {
}
}
})
</script>
复制代码
v-clock
需要配合css使用：解决小胡子显示问题
v-pre
跳过有这个指令的标签及其子元素的编译，按照原生代码编译
vue对象
data中的属性最终都添加到了实例上 属性需要有get set，才能触发视图更新
let vm = new Vue({
el: '#app',
data: {
name: '刘琪',
age:21,
q:'<h1>haha</h1>',
obj:{
a:123,//对于对象来说，新增一个属性不会触发视图更新，只有改变属性时才会触发视图更新
b:undefined,
}
}
}).$mount('#app')
//处理方式
//1.正常写全要用到的属性；先预留要用到的属性
//2.整个对象的重新赋值
//3.$set()方法
vm.$set(vm.obj,'c','456')
//4.增加一个无关变量t,每次修改完数据之后；重置t就可以了
复制代码
vue数组
let vm = new Vue({
el: '#app',
data: {
ary: [1, 2, 3, 4]
}
})
vm.ary.length--;
//能改变原有数组，但不能触发视图更新，只有数组原型上的变异方法可以触发更新
//数组变异方法：pop shift unshift push reverse splice sort
复制代码
vue 事件
<body>
<div id="app">
{{ary}}
<button @click='fn'>按钮1</button>
<button @click='fn(name,$event)'>按钮2</button>
<!-- $event是固定写法，代表传参事件对象 -->
</div>
</body>
</html>
<script src="./node/node_modules/vue/dist/vue.js"></script>
<script>
//事件绑定，用v-on：事件类型=‘函数’ 或者 @事件类型=‘函数’
//函数一般是在methods中定义的
//对应的函数一般不带小括号，默认传参事件对象e
//当我们需要传参时，需要加小括号,小括号里写需要传的参数；当只有小括号没有传参时，为undefined
//el data methods 都是VUE规定死的属性名
let vm = new Vue({
el: '#app',
data: {
ary: [1, 2, 3, 4],
name:'zhufeng'
},
methods: {
fn: function (val,e) {
console.log(val,e,this)
}
}
})
//@kryup.13='fn'在按下回车的时候才会触发该函数
</script>
复制代码
vue过滤器
全局用filter，实例局部使用filters 全局过滤器要放在需要使用的实例的前面
vue计算属性computed
- 于data同级别
- 语法同methods一样
- 计算属性的名字 不能跟 data 或 methods 中的名字重复
- 完全依赖于函数体中出现的属性名，只在最初加载时和其中属性名改变时运行，并不是像methods中的函数只要页面更新就运行一次
- 不能传参
- 异步的无法处理
- 为了提高性能而存在
vue监听属性
- 当且仅当监听的属性（例如：name）发生变化时会执行函数
- 可以处理异步
- 下面这种写法不能监听引用数据类型的内部变化
watch:{
name(newV,oldV){
clearTimeout(this.timer)
this.timer=setTimeout(() => {
if (newV.length > 5) {
this.msg2 = '名字太长'
}else{
this.msg2 = ''
}
}, 500)
}
}
复制代码
- 深度监听需要用下面这种语法
- 这种深度监听在有get和set属性时才会触发监听
watch:{
obj:{
handler(){
console.log(1111)
},
deep:true
}
}
复制代码
directives自定义指令
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
vue动画
transition
- 把需要实现动画的标签用transition标签包起来
- 只能对根元素有动效
transition-group
- tag指定外层包裹元素的tag类型；不写，默认span
- duration控制vue设置的类名存在的时间
事件修饰符
.self .stop .prevent .once .capture .passive
表单修饰符
.number .trim
生命周期
let vm = new Vue({
el:'#app',
// template:'<h1>哈哈哈</h1>',
data:{
name:"珠峰"
},
// 生命周期钩子函数 就是VUE规定的一些在固定阶段执行的函数
// 语法上 跟 data和el、methods等 同级
beforeCreate(){
// 创造之前
// 不能获取data和methods里的数据
console.log('beforeCreate');
debugger;
},
created(){
// 能获取data和methods里的数据
// 一般把ajax请求的发送写到这里
},
beforeMount() {},
mounted(){
// 在此时DOM已经渲染完成
},
beforeUpdate(){
// 在视图更新时会触发其中函数
// 函数在视图更新前执行
},
updated(){
// 在视图更新时会触发其中函数
// 函数在视图更新后执行
// 不要写会触发视图更新的代码
},
beforeDestroy(){},
destroyed(){}
})
vm.$destory();//手动销毁该实例，双向数据绑定没了
复制代码
组件
- 划分比较明细，复用率比较高
- 功能性组件 页面级组件
- 全局组件 局部组件
- template模板中只能有一个根元素
全局组件的注册
- 必须写到根组件（根实例）的前面
//全局组件的定义
Vue.component('qqq',{
template:'<i>hello 小聪子</i>'
})
复制代码
<body>
<div id="app">
<h1>{{name}}</h1>
<aaa></aaa>
<aaa></aaa>
<my-name></my-name>
<!-- 不支持驼峰式命名 -->
</div>
</body>
<template id='qqq'>
<div>
<input type="text" v-model='name'>
<h1><i>{{name}}</i></h1>
</div>
</template>
<script>
//全局组件的定义
//使用时只要把组件名当作标签使用即可
Vue.component('aaa', {
//没有el属性，有template属性，data是个函数，并且返回一个对象
//template就是qqq标签要去展示的内容
//template有且只能有一个根元素
template: '#qqq',
data() {
return {
name: 'zhufeng'
}
},
created() {
console.log(this.name)
}
})
Vue.component('myName', {
template: `<h2>My name is </h2>`,
data() {
return {
}
},
})
let vm = new Vue({
el: '#app',
data: {
name: "珠峰"
}
})
</script>
复制代码
局部组件的注册
- 局部组件只能使用在此之前声明的局部组件作为子组件
<body>
<div id="app">
<h1>{{name}}</h1>
<son></son>
<parent></parent>
</div>
</body>
<template id="opp">
<h2>ninininini</h2>
</template>
<template id="o">
<h2>小聪子<son></son></h2>
</template>
<script>
let son = {
template: '#opp',
data() {
return {
}
}
}
let parent = {
template: '#o',
data() {
return {
}
},
components: {
son
}
}
let vm = new Vue({
el: '#app',
data: {
name: "珠峰"
},
components: {
son,
parent: parent
}
})
</script>
复制代码
组件的数据传输
父传子
过程
- 1.通过v-bind绑定属性，把相应的数据传递给子组件
- 2.子组件通过props接收传进来的数据
注意事项
- 父传子是单向数据流，不能从子组件修改父组件的数据
- 但如果是引用数据类型，不修改地址，只改变内容，可以改变
- props可以是数组，也可以对象
- props中自定义属性的参数
-
- 1.default：默认值 复制代码
-
- 2.type：规定此属性的数据类型 复制代码
- 可以通过实例
this.$parent调用父组件的数据和方法（不推荐）
<body>
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model='name'>
<son :name='name'></son>
</div>
</body>
<template id="o">
<div>
<h3>{{name}}</h3>
<button @click='fn'> 这个按钮点击了{{n}}次</button>
</div>
</template>
<script>
let son = {
template: '#o',
data() {
return {
n: 0
}
},
methods: {
fn() {
this.n++
}
},
props:['name']
}
let vm = new Vue({
el: '#app',
data: {
name: "珠峰"
},
components: {
son,
}
})
</script>
复制代码
子传父
本质上是父组件使用子组件的数据
官方过程
this.$emit('自定义事件名',this.qqq)
也可以在父组件中通过 this.$children[i] 调用子组件的数据及方法 也可以在父组件中通过 this.$refs.son 调用子组件的方法
插槽
在template模板中写入 <slot></slot> ,可显示在使用组件时组件名标签内部内容
具名插槽
在slot标签中的name属性是控制要去显示哪一部分的一个功能 不写时，默认default，全部显示 name对应的的是 slot='qqq' 的部分
模板中若有与name值对应的元素，则slot标签包含的内容不会显示出来；反之，可以显示
子父组件的mounted
执行顺序
动态组件component
keep-alive
-在没有keep-alive时，component组件是销毁旧的，重新渲染新的 -加上keep-alive后，动态组件有缓存机制，不会销毁旧的
<keep-alive>
<component :is='son'></component>
</keep-alive>
复制代码
vue-router
vue-router是vue的路由插件
基本用法
- 步骤
- 1、声明组件
- 2、编写路由映射表
- 3、把编辑好的映射表注入到router实例中
- 4、把router实例注入到根实例中
- router-link 控制跳转的链接和显示的文字
- router-view 控制显示的组件内容
- active-class 控制选中对应路径的类名
- tag 控制渲染成什么标签
<body>
<div id="app">
<router-link to='/home' active-class='current'>首页</router-link>
<router-link to='/list' tag='div'>列表</router-link>
<router-view></router-view>
</div>
</body>
</html>
<template id="home">
<div>home</div>
</template>
<template id="list">
<div>list</div>
</template>
<script src="../node/node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {
template: '#home',
}
let list = {
template: '#list',
}
//路由映射表
let routes = [{
path: '/home',
component: home
},
{
path: '/list',
component: list
}
]
let router=new VueRouter({
routes:routes,
})
let vm = new Vue({
el: '#app',
data: {
name: "珠峰"
},
router,
})
</script>
复制代码
传参
- 提供了两种传参方式
- 1、query传参（问号传参）
- 路由映射表不用改动
:to={path:'',query:{}}或者:to={name:'',query:{}} - 2、params传参（路径传参）
- 在映射表中添加
/:变量的形式；:to={name:'',params:{变量:''}}}
<router-link :to='{path:"/list",query:{id:123,e:name}}' tag='div'>列表</router-link>
重定向redirect
let routes = [
{
path:'/',
redirect:'/son2/222'
},
{
path:'/son1',
// redirect:'/son2/5555',
name:'son1',
component:son1,
redirect:'/son1/sz',
children:[
{
path:'/son1/sz',
component:sz
}
]
},
{
path:'/son2/:bl1234',
name:'son2',
component:son2
},
{
path:'/*',
redirect:'/son1'
}
]
复制代码
vuex
是一个能方便vue实例及其组件传输数据的插件 方便传输数据，作为公共存储数据的一个库
基本用法
- 步骤
- 1、创建一个vuex实例
- 2、在根组件中注册一下
- 3、注册后，根组件及其一下的局部或全局组件可使用vuex实例中的数据方法，多个组件使用同一套规则时，我们可以把这套规则单独拎出来写在vuex实例中通用
方法汇总
state
类似vue实例中的data，存储数据 在vue实例中用 this.$store.state 调用state里的数据 使用 ...Vuex.mapStore(['count']) 将其数据放入computed中
mutations
官方提供的唯一改数据的方法 其中必须是同步函数 通过 commit 来调用mutations中的函数 其中函数最少有一个参数 state ，最多两个参数另加 val （调用时的传参） 使用 ...Vuex.mapMutations(['mu_add']) 将其函数放入methods中
actions
可以写异步函数，一般多用于触发ajax请求 不能直接用于修改state中的数据，需要通过其中函数默认的第一个实参obj，用 obj.commit('mu_') 来调用mutations中的函数来修改数据 使用 ...Vuex.mapActions(['ac_add']) 将其函数放入methods中
getters
类似vue实例中的计算属性，存储数据 使用 ...Vuex.mapGetters(['remove']) 将其函数放入computed中
//1、创造一个vuex实例
//2、把创造的实例放到根实例中
//使用this.$store.state
let son1 = {
template: `<div>
<button @click='add'>增加</button>
<button @click='mu_add(100)'>增加</button>
<button @click='add2(100)'>2增加</button>
<h2>{{count}}</h2>
<h2>{{qqq}}</h2>
</div>`,
data() {
return {
}
},
computed: {
//两种监听vuex数据的写法
// myCount(){
// return this.$store.state.count
// }
...Vuex.mapState(['count', 'qqq'])
},
methods: {
add() {
// this.$store.state.count++
// this.$store.commit('mu_add', 1)
this.mu_add(10)
},
...Vuex.mapMutations(['mu_add']),
add2() {
this.$store.dispatch('ac_add', 22)
//dispatch 触发的是actions里的函数
//commit 触发的是mutations里的函数
}
}
}
let son2 = {
template: `<div>
<button @click='remove'>减少</button>
<h2>{{$store.state.count}}</h2>
</div>`,
methods: {
remove() {
this.$store.commit('mu_remove', 1)
}
},
}
let store = new Vuex.Store({
state: {
count: 0,
qqq: 12
},
mutations: {
mu_add(state, val = 1) {
console.log(arguments)
//第一个实参是默认传的state
//第二个实参是自己传的参数
//一共只有一个或两个实参
state.count += val
},
mu_remove(state, val = 1) {
console.log(arguments)
//第一个实参是默认传的state
//第二个实参是自己传的参数
//一共只有一个或两个实参
state.count -= val
}
},
actions: {
ac_add(obj,n) {
//obj是vuex封装好的一个对象，里边提供了commit方法
obj.commit('mu_add',n)
console.log(arguments)
}
}
//mutations中必须是同步函数，actions同步异步都行
//想要修改state里的数据只能用commit来调用mutations里的函数
})
let vm = new Vue({
el: '#app',
store,
data: {
name: "珠峰"
},
components: {
son1,
son2
},
created() {
console.log(this)
},
})
复制代码
==========================================================
前端小白，第一次发文，欢迎评论指正！
以上所述就是小编给大家介绍的《前端面试题—vue部分详解》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 【前端学习笔记】前端安全详解
- 前端 H5 横屏 独特处理方案详解
- AngularJS + CoffeeScript 前端开发环境配置详解
- AngularJS + CoffeeScript 前端开发环境配置详解
- 【前端基础进阶】JS原型、原型链、对象详解
- 【前端基础进阶】JS-Object 功能详解
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
游戏编程中的人工智能技术
布克兰德 / 吴祖增 / 清华大学出版社 / 2006-5 / 39.0
《游戏编程中的人工智能技术》是人工智能游戏编程的一本指南性读物，介绍在游戏开发中怎样应用遗传算法和人工神经网络来创建电脑游戏中所需要的人工智能。书中包含了许多实用例子，所有例子的完整源码和可执行程序都能在随书附带的光盘上找到。光盘中还有不少其他方面的游戏开发资料和一个赛车游戏演示软件。 《游戏编程中的人工智能技术》适合遗传算法和人工神经网络等人工智能技术的各行业人员，特别是要实际动手做应用开......一起来看看 《游戏编程中的人工智能技术》 这本书的介绍吧!
