Vue常用的修饰符有哪些
Vue中的修饰符主要分为五种：表单修饰符、事件修饰符、鼠标按键修饰符、键盘修饰符、v-bind修饰符。
-
表单修饰符
.lazy 在光标移开标签元素时更新 value 属性值，即不立刻调用 change 方法。
.trim 清除输入框中的首尾空格。
.number 把输入框中的值转换为 number 类型。如果这个值无法被 parseFloat 解析，则返回原值。 -
事件修饰符
.prevent 阻止预设事件，相当于原生JS中的 event.preventDefault()。
.stop 组织事件冒泡。相当于原生JS中的 event.stopPropagation()。
.self 事件只针对当前自己这个标签，也不包括子标签。
.once 事件只能触发一次。
.capture 使事件触发从包含这个元素的顶层从上往下触发。即谁有这个修饰符就先触发谁。 -
鼠标按键修饰符
.left .right .middle 表示鼠标的左键、右键、和中键。 -
键盘按键修饰符
.keycode 表示按键为各种keycode的时候触发事件。 -
V-bind修饰符
.sync 表示父组件与子组件的双向绑定。
//原本父组件
//(需要设置一个绑定值oneMessage,同时还需要设置一个更新触发函数给子组件修改绑定的值的时候调用)
<comp :oneMessage="bar" @update:oneMessage="func"></comp>
func(parameters){
this.bar = parameters;
}
//子组件
this.$emit('update:oneMessage',paramters)
----------------使用.sync修饰符对其进行简写-----------------
//父组件
<comp :oneMessage.sync="bar"></comp>
//子组件
this.$emit('update:oneMessage',parameters)
v-text、{{}}与v-html的区别
- v-text 是将数据解析为纯文本，不能输出真正的html。
- {{}} 跟v-text一个效果，将数据解析为纯文本，但是在页面 “加载” 时，会显示双括号。
- v-html 输出真正的html
v-on 可以绑定多个方法嘛？
可以, v-on 绑定多个方法是通过键值对的方式实现的:
<button v-on="{click:clickFunc, mousemove: mounseMoveFunc}"></button>
v-on 一个事件绑定多个方法直接使用逗号隔开。
<button @click="clickFunc1,clickFunc2"></button>
Vue循环中key的作用
Vue循环中的key表明了该元素的唯一性，Vue采用就地更新策略，当Vue循环执行时，如果没有key，则直接进行内容清空并赋值，当含有key值时就进行新旧key值得对比操作，然后进行相应得替换和删除或者不做更改。这样当循环得列表内容很多时，可以大大的提升循环得效率。
什么是计算属性？
计算属性是用来声明式的描述一个值依赖于其他的值，当其他的值发生变化时，这个值也会发生变化，dom也会做出响应。一个计算属性写在 computed:{} 里面，必定包含一个get{}方法（当只有get()方法时，可省略）,根据需要可能会包含一个set()方法。
- get()方法不接受传参。在计算属性第一次被调用的时候调用，还有每一次依赖的值发生变化时，也会被调用。
- set()方法可选是否传递一个参数，在计算属性被修改之后，set()方法被调用。
computed:{
fullName:{
get(){
return this.firstName +'-'+ this.lastName
},
set(value){
}
}
}
-------------------当计算属性只需要get()时可简化。
computed:{
//这个函数就是getter
fullName:function(){
return this.firstName +'-'+ this.lastName
}
}
Vue单页应用的优缺点
优点：1. 前后端分离，降低了前后端之间的耦合度。纠错成本低。 2. 并且Vue是由数据驱动的响应式的前端框架，所以当页面内容改变时，不需要重新渲染整个页面。3. 而且Vue具有组件化的特点，所以可复用性高，维护起来也很方便。4. 因为是单页应用所以跳转起来不会有白屏的现象。
缺点：1. 不利于seo（搜索引擎优化）。 2. 页面首次加载耗时比较长。（首次加载主页面就加载了所有的CSS，JS文件）3. 页面复杂度提高。
Vue的箭头函数
有如下几种情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type ='text/javascript'>
///1.没有形参（需要小括号占位）函数体内只有一行代码（省略花括号）
var fn1_old = function(){
console.log('fn')
}
var fn1_new = () => console.log('fn1_new')
fn1_new()
//2.有一个形参（省略小括号）函数体内只有一行代码（省略花括号）
var fn2_new = a => console.log(a)
fn2_new('一个参数')
//3.有两个或者两个以上形参（省略小括号）函数体内只有一行代码（省略花括号）
var fn3_new = (a,b) => console.log(a,b)
fn2_new(1, 2)
//3.有两个或者两个以上形参（省略小括号）函数体内只有多行代码（省略花括号）
var fn4_new = (a,b) => {
console.log(a,b)
return a + b
}
var sum = fn4_new(2,4)
console.log(sum)
</script>
</body>
</html>
Vuex是什么？怎么使用？在哪一种场景下使用的？※
- Vuex是一个专门为vue.js应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说，vuex就是vue的状态管理工具。
- vuex具体包括了五个部分：state、getters、mutations、actions、modeules
- State 就是数据源存放的地方，就好像是一般vue对象中的data，state里面存放的数据是响应式的，当state里面的数据发生改变时，对应这个数据的组件也会发生改变。--> 用this.$store.state.xxx调用。
- Getters 相当于store的计算属性，主要是用来过滤一些数据。组件可以通过此方法来获取想要的数据。 --> 用 this.$store.getters.xxx方法调用。
- Mutations 定义的方法用于动态的修改Vuex中store中的状态或数据。--> 用this.$store.commit调用，给这调用方法添加一个参数，就是mutation的载荷(payload)。
- Actions 异步操作数据，但是通过mutation来操作。 --> 用this.$store.dispatch来触发，actions也支持载荷。
- 使用的场景有：加入购物车、登陆状态等场景
Vuex主要用于一些中大型web单页应用中对应用的状态进行管理，vuex更多的用于解决跨组件通信以及作为数据中心集中式存储数据。所以它可以解决非父子组件之间的通信问题。
