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:实例中注册: