vue2.0常用内容总结篇

0.编写目的

前段时间在工作中遭遇了职场pua，我一直勤勤恳恳努力的工作，收到的反馈却是无论干什么都是不对，做得越多错的越多，这样的经历使我开始怀疑自己、怀疑人生；在经历了长达半年的挣扎期后，我几乎抑郁了，我在网上搜索抑郁症的各种表现和缓解方法，最后我决定离开这里，当时的想法就是即使去扫马路也不要这样下去了，因为我还有年迈的父母和关爱我的人，我要给自己寻找快乐和肯定。
回到家后我不敢去找新工作，不愿意见其他人，每天把自己关在屋里。后来我开始寻找学习视频，开启了vue的学习之路，将学到的知识点总结在这篇博客里，以便于后面忘记时候进行回忆查看。
就在我学习了一个月之后，我一个朋友给我推荐了三个招聘信息，我抱着试试看的心态和用人单位进行了沟通和面试。庆幸的是。陆陆续续这三家单位都给与了我肯定，他们表示愿意接受我去他们那里入职。这里面有十几个人的小公司，也有规模上千的公司。我开始慢慢的找回了点自信。但是我现在还是在犹豫要不要去工作还是继续调节心情。
这篇博文我会持续更新有关于vue2.0的知识点，如果我以后要学习vue3.0的话，会再创建个新的文章，如果你想了解vue2.0，希望以下知识点总结可以帮到你。

1.vue基础总结

1）mustache语法 { {}} 支持变量和表达式
2）v-html会解析html标签，替换标签里的内容
3）v-text 类似于mustache语法，替换标签里的内容
4）v-cloak，在vue解析之前，div中加一个属性v-cloak,解析后会消失,这样解决在徐然前页面上出现标签的尴尬情况，加v-cloak可以先设置不显示，待加载完后，v-cloak被vue实例自动移除后就显示了

//html
<div v-cloak>
  {
   {
    message }}
</div>
//css
[v-cloak] {
   
  display: none;
}

5）v-pre 原样展示内容，不需要解析
6）v-once 元素只渲染一次，不会随着数据改变而改变
7）v-bind 属性 可以接普通的变量三目运算符 也可以接对象或数组

//html
<img :src="imgurl"/>//普通用法
<div :class="isred?'red':''">文字</div> //class渲染结果 class=“red”
<div :class="{classa:true,classb:false}"></div> //class渲染结果 class=“classa”
<div :class="['classa','classb']"></div>
<div :style="[stylea,styleb]"></div>
<div :style="{color:'red',fontSize:'12px'}"></div>
//js
data(){
   
	return {
   
		imgurl:"./img/img1.jpg"，
		isred:true,
		stylea:{
   color:'red'},
		styleb:{
   "text-decoration":"line-through"}
	}
}

8)计算属性

computed:{
   
	funcA：function(){
   
		//....
	}
}

9) v-on
语法糖是@

<button @click="方法名"></button>
<button @click="方法名(参数，$event)"></button> //$event是浏览器产生的对象

事件修饰符：
①click.stop=“方法名” 阻止事件冒泡
②click.prevent =“方法名” 阻止默认行为
③keyup.enter=“方法名” 监听键帽点击，抬起enter键
④keyup.13=“方法名” 监听键帽点击，抬起enter键
⑤@click.native监听组件根元素的原生事件（如组件上写点击事件要加native）

10）v-if v-else-if v-else
v-if 用于管理dom节点和元素是否渲染
11）v-show 切换频率高的时候使用，v-show=“false” 相当于 display：none
12）v-for 可用于遍历数组和对象,key属性用于绑定唯一值

<div v-for="(item,index) in array" :key="index">{
   {
   item}}</div>

14）vue中的filters过滤器
在vue实例中加

data(){
   
	return {
   
    	price:100
    }
},
filters:{
   
	showprice(price){
   
		return '￥'+price.toFixed(2)
	}
}

dom中使用

<div>{
   {
   price | showprice}}</div>//输出 ￥100.00

15) v-model
v-model用于结合表单元素进行双向数据绑定。以单选框为例，双向绑定相当于执行了两步操作，一是给input的value属性绑定一个变量，在变量变化的时候，value也跟着改变；二是给input的输入事件（@input）绑定一个方法，每次输入便获取当前的值赋值给变量。关键代码如下：

//dom
<input :value="vue组件中的变量" @input="方法（$event）"/>
//js
方法（）{
   
this.vue组件中的变量=event.target.value
}

v-model和radio结合
给radio 设置value属性，v-model绑定数据变量的key，value对应数据标本量中的值。label中for对应dom中的id，作用是点击label包含的区域都能触发单选按钮的点击事件。

//html
<label for="sexradio">
	<input type="radio" id="sexradio" value="男" v-model="sex"/>男
</label>
<label for="sexradio2">
	<input type="radio" id="sexradio2" value="女" v-model="sex"/>女
</label>
//js
data:{
   
	sex:'男'
}

v-model和checkbox结合
单个复选框,变量用boolean类型

//html
<label for="agree">
	<input type="checkbox" id="agree" v-model="agree" value="xieyi"/>同意协议
</label>
//js
data:{
   
	agree:false,
}

多个复选框,变量用数组类型

<label for="basketball">
	<input type="checkbox" id="basketball" value="篮球" v-model="aihao"/>篮球
</label>
<label for="football">
	<input type="checkbox" id="football" value="足球" v-model="aihao"/>足球
</label>
//js
data:{
   
	aihao:[]
}

常见修饰符有
①v-model.lazy=“变量”
在绑定输入框的时候，在用户敲回车或光标移出的时候同步双向绑定的变量内容
②v-model.trim=“变量”
去除变量左右两边空格
③number
v-model.number=“变量”
转换成数字
④sync
父组件向子组件传值，有时候子组件数值改变需要双向同步到父组件，使用sync

//父组件中：
<son :title.sync="title变量"/>
//子组件中
<div>{
   {
   title}}</div>
<button @click="change">改变</button>
js:
props:['title'],
methods:{
   
	change(){
   
		this.$emit('update:title',新的值)
	}
},

16）数组中的响应式方法：
let letters=[‘a’,‘b’,‘c’]
①push()方法 向数组中插值是响应式 letters.push('d')
②通过索引改变数组中的元素，不是响应式letters[0]='aaa'
③pop()删除数组中最后一个元素是响应式
④shift()删除数组中第一个元素是响应式
⑤unshift()在数组中最前面添加元素是响应式
⑥splice(索引，删除个数，新元素1，新元素2…) 是响应式//改变某个内容
⑦sort() 数组排序是响应式
⑧reverse() 倒序是响应式

2.vue组件

2.1全局组件

vue注册全局组件有以下三步
1.创建组件构造器 vue.extend()
2.注册组件 vue.component()
3.在vue实例作用范围内使用组件

//html中
<div id="app">
	<cpn1></cpn1>
</div>
//js中普通写法
const cpn1=Vue.extend({
   
	template:`<div>全局组件</div>`
})
Vue.component('cpn1',cpn1)
//js中的组件语法糖
const cpn1={
   
	template:`<div>全局组件</div>`
}
Vue.component('cpn1',cpn1)

2.2 局部组件

const cpn1={
   
	template:`<div>全局组件</div>`
}
//在vue实例中加
components:{
   cpn1}

2.3 组件模板分离写法

//html中
<body>
		<div id="app">
			<cpn1></cpn1>
		</div>
		<template id="cpn1"><div>子组件模板</div></template>
	</body>
//js中
const cpn1={
   
	template:'#cpn1'
}
const app=new Vue({
   
	el:"#app",
	components:{
   
		cpn1
	}
})

2.4 父组件和子组件传值

1） 父组件向子组件传值
父组件中加入如下内容：
A:导入子组件：import 子组件名 from ‘子组件文件路径’
B:实