Vued知识点

十一点就睡a

已于 2022-04-01 20:07:32 修改

阅读量761

点赞数

文章标签：前端框架

于 2022-04-01 20:06:43 首次发布

本文链接：https://blog.csdn.net/China_11111/article/details/123906234

版权

1.什么是Vue?

Vue是构建用户界面的渐进式框架。

2、MVC和MVVM的区别？

MVC是后端分层开发的概念，MVVM是前端视图层的概念，关注视图层的分离，

MVC中的M是model，V是view，C是contorller，model是模型层用于与数据库进行交互，view是视图层用于与用户进行交互，contorller是调度层用于接受请求，处理请求，然后返回响应。

MVVM中的M是model，V是view，VM是viewModel，model是模型层进行业务逻辑，处理数据，view是视图层用于界面的展示，viewModel是用于把model和view进行双向绑定。

3、框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性较大，如果需要更换框架，需要重新构建项目。

库：是提供一个小功能，对项目的侵入性较小，如果这个库无法实现这个功能，可以很容易的更换其他库完成。

4、插值表达式？

插值表达式{undefined{}}，可以在前后插入一些内容

5、vue指令界面防止闪烁？

v-cloak

6、v-text和v-html的区别？

v-text 只会返回标签的内容不会把标签的效果渲染出

v-html 会带着标签效果一样显示,适合对接后台返回富文本内容

7、vue指令-属性绑定及简写？

v-bind 简写：

8、vue指令-事件绑定及简写？

v-on 简写@

9、vue事件修饰符？

.stop:阻止冒泡

.prevent:阻止默认事件

.capture:添加事件捕获模式

.once:事件只触发一次

.self:只有当事件作用于本身才能触发

10、vue指令-双向数据绑定？

v-model

原理：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。Object.defineProperty()来实现数据劫持的。

11、vue指令-循环渲染？

v-for

12、vue指令-显示隐藏

v-show、v-if

13、vue指令-v-for如何遍历对象、数组、数字

遍历对象：v-for=‘（value,key,index）’in list；

遍历数组：v-for=‘（item，index）’ in list；

遍历数字：v-for=‘num in 9’；

14、vue指令-v-for为什么设置key？

key：提高重排效率，就地复用。

key只能是数字或者字符串、必须是唯一的。

15、vue指令-v-if和v-show的区别？

v-if：删除dom元素，用于只修改一次的情况

v-show：设置display：none；，用于反复切换

16、vue绑定class方式？
数组：:class="[]";

三目表达式：:class="flag?'red':'green'";

对象：:class="{}" 对象的属性值是布尔类型；

数组内置对象：:class="[{}]";

17、vue绑定style方式？

对象：：style="style";

数组路是对象：:style="[]";

绑定方法，拿返回值；

18、vue过滤器全局和局部声明方式及使用？

通过vue.filter方法定义；

参数：过滤器的名字和过滤器执行函数

全局：vue.filter；

私有：vue.filters;

19、vue键盘修饰符使用？

监听所有按键：@keyup

监听指定按键：@keyup.按键码

20、vue键盘修饰符设置别名

Vue.config.keyCodes.a = 65

21、vue自定义指令全局和局部声明方式及使用？

指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行
这三个方法的参数有哪些

1.el：指令所绑定的元素，可以用来直接操作 DOM 。
2.binding：一个对象，包含以下属性：
3.name：指令名，不包括 v- 前缀。
4.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
5.oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
全局：vue.directive();

私有：vue.directives();

22、vue生命周期钩子函数有哪些？
23、vue生命周期钩子函数各阶段特点，什么作用？

// 生命周期
beforeCreate() {
// 一般用于页面重定向
console.log('beforeCreate');
console.log(this.msg);
},

created() {
// 一般用于接口请求，数据初始化
console.log('created');
console.log(this.msg);
},
// 页面数据未更新，在内存中已经解析好模版，虚拟dom
beforeMount() {
console.log('beforeMount');
// debugger
},
// 页面更新完成，需要依赖dom的操作，在此完成
mounted() {
console.log('mounted');
},
// 触发0次或多次，数据更新前
beforeUpdate() {
console.log("beforeUpdate");
console.log(this.msg);
// debugger
},
// 数据更新后
updated() {
console.log("updated");
console.log(this.msg);
},
// 组件销毁前，清除定时器还有页面监听
beforeDestroy() {
console.log('beforeDestroy');
},
// 组件销毁后
destroyed() {
console.log('destroyed');
},
24、vue-resource如何发送get，post请求？
25、vue-resource发送post请求第三个参数写什么？

getInfo() { // get 方式获取数据
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
console.log(res.body);
})
}
postInfo() {
var url = 'http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
// post 方法接收三个参数：
// 参数1：要请求的URL地址
// 参数2：要发送的数据对象
// 参数3：指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
26、axios发送get，post请求？
27、axios发送post请求使用内置参数对象是什么？

axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then((res) => {
console.log(res);
})
// post
// 内置对象
let url = new URLSearchParams()
// let url = new FormData()
// 参数一属性名称，参数二属性值
url.append('type', 'free')
url.append('pageSize', 10)
url.append('pageNum', 1)
axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type", url).then((res) => {
// console.log(res);
this.courseList = res.data.rows
})
28、vue中过渡动画类名有哪些？transition

/* 入场动画 */

.v-enter、.v-enter-active、 .v-enter-to

/* 离场动画 */

.v-leave、.v-leave-active、.v-leave-to

29、vue中过渡动画结合第三方插件使用？

先引入css,在写类名。

30、vue中过渡动画中钩子函数的使用？

<div id='app'>
<input type="button" value="切换动画" @click="isshow = !isshow">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-if="isshow" class="show">OK</div>
</transition>

</div>

<script>
const vm = new Vue({
el: '#app',
data: {
isshow: true
},
methods: {
beforeEnter(el) { // 动画进入之前的回调
console.log(el);
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 动画进入完成时候的回调
console.log(done);
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
},
afterEnter(el) { // 动画进入完成之后的回调
console.log("3333");
this.isshow = !this.isshow;
}

}
})
</script>
31、vue中如何设置v-for列表动画？

<div id='app'>
<button @click="flag=!flag"> 更改显示模式 </button>
<button @click="deleteList"> 删除</button>
<input type="text" v-model="txt" @keyup.enter="add">
<transition-group tag="ul">
<li v-show="flag" v-for="(item, i) in list" :key="i">{ {item}}</li>
</transition-group>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: true,
txt: '',
list: [1, 2, 3, 4]
},
methods: {
add() {
this.list.push(this.txt);
this.txt = '';
},
deleteList() {
this.list.splice(0, 1)
}

},
})