【Vue】进阶语法

基础-系统指令-v-bind基本用法

• 作用: 绑定标签上的任何属性
• 场景: 当标签上的属性是变量/动态/需要改变的
• 用法:

// ID为数据对象中的变量值 
<p v-bind:id="ID"></p>   
// 简写
<p :id="ID"></p>  

基础-系统指令-v-bind绑定class(对象)

用法: 绑定class对象语法 :class=“{ class名称: 布尔值}”

<p class="obox" :class="{obox:isBn}">内容</p>  // isBn为 data选项中的属性

注意: 绑定class和原生class会进行合并(但是不会合并重复的)

基础-系统指令-v-bind-绑定class(数组)

• 绑定class数组语法 :class=“[a,b]”
• a、b为data属性的key
• data中key对应的value 为class名字

<p :class="[a,b]">内容</p>

data:{
	a:'obox'，
	b:'left'
}

基础-系统指令-v-bind-绑定style（对象）

语法:style=“{css属性名:属性值}”

<p :style="{color:a,fontSize:b}"></p> 

//a、b为data属性的key
data: {
a: 'red',
b: '30px'
},

注意 css属性名 例如 font-size要写成 fontSize 以此类推 原有的style会覆盖

基础-系统指令-v-bind-绑定style（数组）

// 语法: 
<div :style="[a,b]"></div>   
// a,b 为data的属性
data: {
     
a: {
     color: "red" },
b: {
     fontSize: "30px" } 
}

注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则

基础-系统指令-v-model-基础用法

作用: 表单元素的绑定

特点: 双向数据绑定

• 数据发生变化可以更新到界面
• 通过界面可以更改数据
• v-model 绑定表单元素，会忽略所有表单元素的 value、checked、selected 特性的初始值
• 表单元素会将 Vue 实例的data中的数据作为数据来源，所以应该在 data选项中声明初始值。

// 表单中设置value值没用 v-model会忽略
<input type="text" v-model="msg"  value="zhang">
<p>{
    {
    msg}}</p>
// 在data中设置msg
data: {
    
	msg: 'zhangsan'
}

基础-系统指令-v-model-原理及实现

分析

• 表单元素绑定的数据改变 => data数据发生改变=> 页面数据变化