由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?
1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?
2.各个公司对技术的要求增高
3.有人说开始搞副业
在我来看,这一年已经过去了四分之一,按往年最晚 2 月份 大家应该就开始工作了。现在已经三月中旬了,大概的话五月份就可以出去工作了,这段时间其实也挺宝贵的,有大量的自由时间,可以来提升技术,来迎接接下来的面试。
1.通过数组方式添加样式
通过数组方式添加样式 【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的, 使用 :class绑定使用
<h1 :class="['size', 'color',boo?'big':'weight']">添加样式</h1> 复制代码
2.通过添加对象的方式进行判断 {‘样式名’,布尔值变量}
<h1 :class="[ 'color',{'big':boo}]">添加样式</h1> 复制代码
3.通过使用 计算属性来控制样式的显示
<div v-bind:class="classObject"></div> data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } 复制代码
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
1.通过往style中传入对象改变样式
缺点不能传多个对象
<h3 :style="ss">测试</h3> <script> new Vue({ el: '#fade', data:{ ss:{color:'red','font-size':"50px"}, } }) </script> 复制代码
通过往style中传入数组,在数组中可以放多个对象
<h3 :style="[yy , dd]">测试</h3> <script> new Vue({ el: '#fade', data:{ dd:{"font-weight":900}, yy:{color:'blue','font-size':"30px"}, } }) </script> 复制代码
// 两个指令都可以做控制元素渲染。 //区别是: 1. v-if 是用来控制元素的创建和销毁 2. v-show 是用来控制元素的 display 变化 //选择使用: 如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 复制代码
v-for
指令基于一个数组来渲染一个列表。格式:1. 遍历数组
( item,index) in items
item 为每一项 , index为索引,
遍历对象 (value, name, index) in object
value 为值 name为key index 为索引
注意
1 根据JavaScript 机制 , in 可以改为 of, 更接近于JavaScript
遍历项必须绑定key,来确定每个节点的身份
//官方含义:会改变调用了这些方法的原始数组。 简单说: 就是改变了原始数组,在原始数组上做一些操作,例如:增加,删除.. // 变异方法包括: push() pop() shift() unshift() splice() sort() reverse() 复制代码
//所谓非变异方法:不改变原始数组,生成新的数组 // 非变异方法包括: filter() concat() slice() .... 复制代码
//vm 为Vue实例 var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) //当你利用索引直接设置一个数组项时 vm.items[indexOfItem] = newValue ❌错误操作 //官方提供了两种解决办法 1. Vue.set Vue.set(vm.items, indexOfItem, newValue) 2. Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) //当你修改数组的长度时 vm.items.length = newLength ❌错误操作 //官方提供了一种解决办法 1.vm.items.splice(newLength) 复制代码
有时可能遇到这种需求,在原有data对象属性中,想实现动态添加属性,
直接添加是,不是响应式的,官方提供了解决办法。
var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) // 添加一个属性 可以使用 Vue.set(vm.userProfile, 'age', 27) // 为已有对象赋值多个新属性,可以使用 Object.assign() vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) 复制代码
有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。
<div> <div id="main"> <template v-for='(item,index) in filters' :key=index> <li>{{item}}</li> </template> </div> </div> <script> var vm = new Vue({ el: '#main', data: { list:[1,2,3,4,5,6] }, computed: { filters: function(){ return this.list.filter(item => item%2 == 0 ) } }, }) </script> 复制代码
Vue.js 为
v-on
提供了事件修饰符。对事件的一些操作限制, 修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
.once
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 复制代码
由于Vue 废除了 keyCode 事件, 在开发中,想要获取用户输入的按键,可以自己通过全局
config.keyCodes
对象自定义按键修饰符别名: 具体设置为 https://cn.vuejs.org/v2/api/#keyCodes
// 虽然Vue 废除了 keyCode事件,但是Vue 提供了绝大多数常用的按键码的别名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="自定义事件"> 复制代码
单个复选框 绑定到布尔值
多个复选框,绑定到同一个数组
直接绑定到data中自定义属性中
v-model 绑定到 select 元素上。
多选时: 绑定到一个数组上
对于单选按钮,复选框及选择框的选项,
v-model
绑定的值通常是静态字符串 (对于复选框也可以是布尔值):
把值绑定到 Vue 实例的一个动态属性上,这时可以用
v-bind
实现,并且这个属性的值可以不是字符串。
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" > // 当选中时 vm.toggle === 'yes' // 当没有选中时 vm.toggle === 'no' 复制代码
<input type="radio" v-model="pick" v-bind:value="a"> // 当选中时 vm.pick === vm.a 复制代码
<select v-model="selected"> <!-- 内联对象字面量 --> <option v-bind:value="{ number: 123 }">123</option> </select> // 当选中时 vm.selected.number // => 123 复制代码
Vue 已经基础已经过完了,看完文章可以跟着多敲一些demo,来熟练Vue的基本使用。下一章将更新Vue 组件的使用,组件在Vue中是很重要的一部分,其中组件的通信尤其重要,理解了如何使用组件,那么可以构建一个数据通信的Web Components。