本专栏将从基础开始，循序渐进的讲解Vue的基本概念以及使用，希望大家都能够从中有所收获，也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。
文章目录
1 Class和Style绑定
假设有如下样式:
.active{
color: red;
}
.txt{
font-size: 30px;
}
.txt2{
font-size: 50px;
}
.c1{
color: red;
}
.c2{
font-size: 30px;
}
1.1 直接使用样式
直接使用
<div :class="classDemo">
css
</div>
data():{
classDemo:"txt",
}
1.2 根据条件判断是否使用样式
注意:动态绑定的属性和本身的属性不冲突
<div :class="{'active':classFlag,'txt':classFlag}">
css
</div>
data(){
return{
classFlag:true,
}
},
1.3 根据条件使用css样式
<div :class="[classFlag?classDemo : '' , 'txt2']">
css
</div>
data(){
return{
classDemo:"txt",
}
},
1.4 根据计算属性切换css样式
<div :class="cssObj">
css2
</div>
<button type="button" @click="changeCss">改变css2样式</button>
data(){
return{
c1:true,
c2:false,
}
},
computed:{
cssObj(){
return {
'c1':this.c1, 'c2':this.c2}
}
},
methods:{
changeCss(){
this.c1 = !this.c1
this.c2 = !this.c2
}
}
1.5 开发中常用的样式
- 增量式组合css
<div class="old" :class="[classFlag ? classDemo : 'notactive',{'active':activeFlag}]">
应用中常用样式
</div>
data(){
return{
classDemo:"txt",
activeFlag:true,
classFlag:true,
}
},
注意:对象中的键只能接受字符串,在数组中可以接收对象
- 内联样式
<!-- 固定值-->
<div :style="{color:'red',font}">
<!-- 动态绑定-->
<div :style="{color:this.color,font}">
内联样式
</div>
data(){
return{
color:'green',
}
},
2 表单和侦听器
2.1 输入绑定v-model
v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
2.1.1 单值绑定
2.1.1 .1 单行文本框输入绑定
<!-- 单行文本输入框-->
<input v-model="inputmsg" type="text" name="" value="">
data(){
return{
inputmsg:"",
}
}
- lazy模式,转为change事件之后才会响应
<input v-model.lazy="inputmsg" type="text" name="" value="">
- number:自动转化为数值类型
<input v-model.number="number" type="text" name="" value="">
- trim:自动过滤用户输入的首尾空白字符
<input v-model.trim="inputmsg" type="text" name="" value="">
2.1.1.2 多行文本框输入绑定
<textarea v-model="message" placeholder="add multiple lines"></textarea>
data(){
return{
message:``,
}
}
2.1.1.3 单个复选框绑定
复选框绑定单值类型,则选中为true,没有选中为false,如果是数组类型,数组中的元素对应选择的checkbox的value
<input type="checkbox" id="checkbox" v-model="checked" id="checkbox1">
<!-- for的作用是使标签和radio绑定,点击文字相当于点击radio-->
<span for="checkbox1">checkbox</span>
如果需要指定选中和没有选中的值:
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
<!-- 值可以是对象-->
<input type="checkbox" v-model="toggle" true-value="{number:123}" false-value="no">
2.1.1.4 radio的绑定
<!-- 指定选中后picked的值 当值不一样时可以单选,当值一样时一样的名字的会全选-->
<!-- 当选中时，`picked` 为字符串 "one" -->
<input type="radio" v-model="picked" value="one" id="radio2">
<label for="one">One</label>
<!-- 当选中时，`picked` 为字符串 "two" -->
<input type="radio" v-model="picked" value="two" id="radio3">
<label for="two">Two</label>
2.1.1.5 单选框的绑定
当选中第一个选项时，selected为value属性"a",没有value属性则对应标签名A
<select v-model="selected">
<option disabled value="">请选择</option>
<option value='a'>A</option>
<option>B</option>
<option>C</option>
</select>
2.1.2 数组绑定
2.1.2.1 多个复选框绑定到同一个数组
<input type="checkbox" id="item1" value="itme1" v-model="checkedNames">
<label for="item1">itme1</label>
<input type="checkbox" id="item2" value="item2" v-model="checkedNames">
<label for="item2">item2</label>
<input type="checkbox" id="item3" value="item3" v-model="checkedNames">
<label for="item3">item3</label>
<br>
<span>Checked names: {
{
checkedNames }}</span>
data(){
return{
checkedNames: [],
}
}
2.1.2.2 多个选择框绑定到同一个数组
<select v-model="selects" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selects: {
{
selects }}</span>
data(){
return{
selects: [],
}
}
2.2 动态方式渲染选择框
<select v-model="selected">
<option v-for="option in options" :key="option" :value="option.value" >
{
{
option.text }}
</option>
</select>
<span>Selected: {
{
selected }}</span>
data(){
return{
selects:[],
options:[
{
text: 'One', value: 'A' },
{
text: 'Two', value: 'B' },
{
text: 'Three', value: 'C' }
],
}
}
2.3 侦听器
使用watch监听事件可以实时监听数据变化,watch的函数名必须为要监听的变量的名字,但是能用computed属性就用computed,尽量少使用computed.
2.4 补充,去掉eslint规范
添加如下图所示代码,保存并重启项目.
代码如下:
"rules": {
"generator-star-spacing": "off",
"no-tabs":"off",
"no-unused-vars":"off",
"no-console":"off",
"no-irregular-whitespace":"off",
"no-debugger": "off"
}