关于vue.js:Vue指令

5次阅读

共计 7163 个字符，预计需要花费 18 分钟才能阅读完成。

v-once
v-text
v-html

v-once : 使元素外部的 插值表达式 只失效一次

<div id="app">
  <p v-once> {{xxxxx}} </p>
</div>

v-text : 元素内容整体替换为指定 纯文本 数据

与插值表达式区别：插值表达式是用来进行元素动静设置的，v-text 是间接将纯文本内容设置为指定数据，会笼罩老元素

只会显示纯文本，增加标签元素，也不会生成标签元素

<div id="app">
<p v-text="content"> 这段内容会被笼罩 </p>
</div>

new Vue({
el:"#app",
data:{
  content:"我是新内容" // 纯文本

  content:"<span> span 内容 </span>" // 非纯文本 不会生成 span 标签
}
})

v-html：元素内容整体替换为指定的 HTML 文本

相似于v-text，然而非纯文本能够转换成对应元素

<div id="app">
<p v-html="content"> 这段内容会被笼罩 </p>
</div>

new Vue({
el:"#app",
data:{
  content:"我是新内容" // 纯文本 ok

  content:"<span> span 内容 </span>" // 非纯文本 生成 span 标签
}
})

v-bind 指令：v-bind 指令用于动静绑定 HTML 属性

Class 绑定
Style 绑定

内容绑定办法只能解决内容，如果对 标签属性 进行解决，通过 绑定属性

<div id="app">
  <p v-bind:title ="content_title"> 内容 </p>
  <p :title ="content_title"> 内容 </p>  // 简写
</div>

new Vue({
  el:"#app",
  data:{
    content_title :"我是 title 属性内容",
    demo:"hello"
  }
})

v-bind 容许应用表达式 , 与插值表达式相似

不容许应用语句内容 <p :class ="var num = 10"> , error

<div id="app">
<p :class ="'demo'+3"> 内容 </p> // ok
</div>

如果须要一次绑定多个属性，还能够绑定对象。

<div id="#app">
<p v-bind="attrObj"> 内容 </p>
</div>

new Vue({
el:"#app",
data:{
  attrObj:{

    id :"box", // id 属性

    title :"我是 title", // title 属性

    class :"clsbox", // class 属性

    'data-title':"这是内容" // 自定义属性
  }
}
})

Class 绑定

class 是 HTML 属性，能够通过 v -bind 进行绑定，并且能够与 class 属性共存

<div id="app">
<p class="a" :class= "clsbox"> 内容 </p>
</div>

new Vue({
el:"#app",
data:{clsbox:"x" // 此时增加了两个 class 一个 "a" 一个 "x", clsbox 是动静绑定的}
})

注意事项

元素多个动静类名的绑定的谬误写法

<p class="a" :class= "clsbox clsbox1 clsbox2"> 内容 </p>  // error

<p class="a" :class= "clsbox"> 内容 </p>  // ok

new Vue({
el:"#app",
data:{
  clsbox:"x y z" // 多动静名称 不罕用

  // clsbox1:"y"
  // clsbox2:"z"
}
})

三元运算动静增加 class

<p class="a" :class= "bol ? clsbox1 : clsbox2"> 内容 </p>  // ok

new Vue({
el:"#app",
data:{
  bol:true,
  clsbox1:"y",
  clsbox2:"z"
}
})

如果类名既有条件判断，又同时存在多个类名，组合则写法比较复杂。对于 class 绑定，Vue.js 中还提供了非凡解决形式。

对象表示法，键示意类名，值示意键是否失效。对于带横线类名用引号包裹

<p :class= "{b:isB, c:isC,'class-d':true}"> 内容 </p>

new Vue({
el:"#app",
data:{
  isB:true,
  isC:false
}
})

数组表示法，对对象表示法的扩大

<p :class= "['a',{ b:isB,'class-d':true}, c]"> 内容 </p>

new Vue({
el:"#app",
data:{
  isB:false,   // 此时有 a class-d z 三个属性
  c:"z"
}
})

Style 绑定

style 是 HTML 属性，能够通过 v -bind 进行绑定，并且能够与 style 属性共存。
不倡议写在行内不好保护，倡议从 data 中获取 , 留神要加单位 px 等。

雷同属性，框架会优先取绑定的属性的值

<p style="width=50px;" :style= "styleObj"> 内容 </p>

new Vue({
el:"#app",
data:{
  styleObj:{
    width:'100px',  // 笼罩之前设置的 50px width
    height:'100px',
    border:'1px solid #ccc',
    backgroundColor:'red', // 驼峰
    'font-size':'30px' // 非驼峰
  }
}
})

当咱们心愿给元素绑定多个款式对象时，能够设置为数组
```
<p :style= "[styleObj1 , styleObj2]"> 内容 </p>
```
```
new Vue({
el:"#app",
data:{styleObj1:{ ...},
  styleObj2:{...}
}
})
```
罕用于公共款式和独自款式的组合

v-for
v-show
v-if

v-for 指令

用于遍历数据渲染构造，罕用的数组与对象均可遍历。
哪个元素要屡次创立，将指令增加到哪个元素

遍历时的参数：index为索引,key为键

<div id="app">
<ul>
  <li v-for="(item,index) in arr">{{item}}</li> // 数组
</ul>

<ul>
  <li v-for="(val,key,index) in obj">{{val}}</li> // 对象
</ul>
</div>

new Vue({
el:"#app",
data:{arr:["1","asd",2],
  obj:{ 
    content1:"内 1",
    content2:"内 2"
  }
}
})

数值遍历 : 实用于没有根底数据，凭空创立数值个元素

<div id="app">
  <ul>
    <li v-for="(item,index) in 5">{{item}}</li>  // 1,2,3,4,5
  </ul>
</div>

注意事项

应用 v -for 的同时，应始终指定惟一的 key属性
key属性是通过 v-bind 绑定的一个属性，是标识每项的惟一值
for 循环中 index下标无奈作为 key，如果属性值也不惟一（无奈作为 key）。能够把数据改成对象，增加惟一 key 属性
为什么会要增加key?
- vue.js 在进行构造渲染时，会为了进步执行效率，对于 构造统一 的内容只进行修补操作，不会进行移除替换，因而用户输出的内容得以保留未被删除。

如图，初始时 文本 1 ->输入框 1 ，一一对应。当控制台执行 vm.arr.reverse() 时

vue 批改而非替换的操作，会导致构造和内容不统一

正确写法

<ul>
  <li v-for="item in items" :key="item.id">{{item}}</li>
</ul>

通过 <template> 标签设置模板占位符，能够将局部元素或内容作为整体进行操作。
template 不会生成标签，只是占位符，外部内容是个整体，能够只对整体进行反复增加。
如果用 div，会额定减少 div 标签，可能并不是咱们想要的构造。

因为 template 自身不是元素，无奈绑定 key 属性

<div id="app">
<template v-for="(item,index) in items">
  <span>{{标签内容 1}}</span>
  <span>{{标签内容 2}}</span>
</template>
</div>

v-show 指令

用于管制元素显示与暗藏，实用于显示暗藏频繁切换时应用

通过 display 管制元素显示和暗藏

<div id="app">
<p v-show="true"> 这个元素显示 </p>
<p v-show="false"> 这个元素暗藏 </p>
<p v-show="2>11"> 这个元素暗藏 </p>
<p v-show="bol"> 这个元素看 bol 值 </p>
</div>

注意事项：

template 无奈应用 v-show 指令，不是元素

v-if 指令

用于依据条件管制元素的创立与移除。

不适宜频繁的显示暗藏，因为他是移除和创立，是耗费性能的操作

<div id="app">
<p v-if="false"> 这个元素不会创立 </p>
<p v-else-if="true"> 这个元素会创立 </p>
<p v-else-if="true"> 这个元素不会创立 </p> // 上一个进了这个不会进
<p v-else> 这个元素不会创立 </p>
</div>

注意事项：

给应用 v -if 的同类型元素绑定不同的 key

如图，增加了v-if 和 v-else

当 bool=true 时，代码会运行至 v-if，此时给输入框输出 123。
批改 bool，当 bool=false 时，代码会执行 v-else 内的代码，输入框内的 123 也被第二个输入框保留
这种代码形式利用于在 用户登陆 时，应用 账号，手机号，邮箱 等 , 款式统一，然而不同性能元素切换登录时，输入框内判断逻辑不同必定是不同的。
问题也产生在，vue 对雷同构造进行修补，而不是移除旧的，创立新的

正确做法，增加 key 绑定

<div id="app">
  <p v-if="type ==='username'" :key="'username'">
    用户输入框：<input type="text">
  </p>
  <p v-else :key="'email'">
    邮箱输入框：<input type="text">
  </p>
</div>

出于性能思考，应防止将 v -if 与 v -for 利用于同一标签

例如有个列表，要通过指定数据 v-for 循环创立，同时列表内每项的创立和移除还要取决于某个条件

v-for的优先级会更高，如果此时 v-if=false，则v-for 执行是毫无意义的，还会耗费不必要的性能

解决办法，创立列表循环的 v-for 操作赋予子元素 li，v-if 条件判断赋予父元素ul

此函数执行效率很低

<div id="app">
  <ul>
    <li v-if="false" v-for="item in items">{{item}}</li>
  </ul>
</div>

new Vue({
  el:"#app",
  data:{
    items:{ 
      content1:"内 1",
      content2:"内 2",
      content3:"内 3",
    }
  }
})

批改后

<div id="app">
  <ul v-if="false">   // 放到父元素,false 时 外部的 v-for 不会被执行
    <li v-for="item in items">{{item}}</li>
  </ul>
</div>

其余批改办法，既然遍历的循环对象有判断，那么咱们把判断写在办法内，即在遍历前解决遍历的数据

<div id="app">
  <ul>
    <li v-for="item in handleItems()">{{ item}}</li>
  </ul>
</div>

v-on

v-on 指令

用于进行元素的事件绑定。
当事件处理程序较少时，能够间接写在行内，尽量不要，不好保护

能够指定 methods 函数处理事件

<div id="app">
<p>{{content}}</p>

<button v-on:click="content=' 新内容 ' "> 按钮 </button>

<button @click="content=' 新内容 ' "> 按钮 </button>   // 简写

<button @click="fn"> 按钮 </button>   // methods 函数设置
</div>

new Vue({
el:"#app",
data:{content:"默认内容"},
methods:{fn(){this.content='新内容'}
}
})

设置事件处理程序后，能够从参数中接管事件对象 event。

new Vue({
el:"#app",
data:{content:"默认内容"},
methods:{fn(event){   // 接管事件对象
    console.log(event) 
  }
}
})

在视图中能够通过 $event 拜访事件对象。

当传参时也想拜访 event 事件对象，能够通过传入 $event 在办法中获取 event 对象

<div id="app">
<p>{{content}}</p>

<button @click="fn(content, $event)"> 按钮 </button> // 本人传参也想拜访 event 事件对象时
</div>

new Vue({
el:"#app",
data:{content:"默认内容"},
methods:{fn(content,event){console.log(content)
    console.log(event)
  }
}
})

v-model

v-model 指令

用于给可输出元素 <input>、<textarea>及 <select> 元素设置双向数据绑定。
当输入框输出时，依赖 v -model 的变量的元素都会动静扭转
v-model 不能应用表达式，如果要计算，能够增加计算属性双向绑定

v-model 本质就是 v-bind+v-on:input事件联合

<div id="app">
<p>{{value}}</p>

<input type="text" v-model="value">
</div>

new Vue({
el:"#app",
data:{value:""}
})

输入框分为单行输入框 input 与多行输入框 textarea

<div id="app">
<p>{{value1}}</p>
<input type="text" v-model="value1">

<p>{{value2}}</p>
<textarea v-model="value2"></textarea>
</div>

单选按钮的双向数据绑定形式如下:

<div id="app">
<p>{{value3}}</p>

<input type="radio" id="one" value="1" v-model="value3">
<label for="one"> 选项一 </label>

<input type="radio" id="two" value="2" v-model="value3">
<label for="two"> 选项二 </label>
</div>

new Vue({
el:"#app",
data:{value3:""  // 选哪个，哪个 input 的 value 就会赋给 value3}
})

复选框绑定分为单个选项与多个选项两种状况，书写形式不同

单个复选框利用，可勾可勾销

<div id="app">
  <p> 单复选框：{{value4}}</p>
  <input type="checkbox" id="item" value="内容" v-model="value4">
  <label for="item"> 选项 </label>
  
  <p> 多复选框：{{value5}}</p>
  <input type="checkbox" id="one" value="选项一内容" v-model="value5">
  <label for="one"> 选项一 </label>
  <input type="checkbox" id="two" value="选项二内容" v-model="value5">
  <label for="two"> 选项二 </label>
</div>

单复选和多复选区别在于

点击单复选时，返回 true / false 示意是否勾选，value4 值不会返回。然而 value4 仍然要设置，如果解决作表单提交，提交的值是 value4

多复选是个数组，寄存每个复选框的 value5 值，且 value5 值必须不同

new Vue({
el:"#app",
data:{
  value4:"",  // 单复选
  value5:[] // 多复选}
})

抉择框绑定分为单选绑定与多选绑定两种状况，书写形式不同。

<div id="app">
<p> 单选 select：{{value6}}</p>  // 显示的是 option 的 value 值
<select v-model="value6">   // v-model 绑定给 select
  <option value=""> 请抉择 </option> // 默认选项，无实际意义
  <option value="1"> 选项一 </option>
  <option value="2"> 选项二 </option>
  <option value="3"> 选项三 </option>
</select>

<p> 多选 select：{{value7}}</p>
<select v-model="value7" multiple>
  <option value="1"> 选项一 </option>
  <option value="2"> 选项二 </option>
  <option value="3"> 选项三 </option>
</select>
</div>

var vm = new Vue({
data:{
  value6:'',
  value7:[]},
}).$mount("#app")

按住 ctrl 进行多选

input 输入框: 绑定字符串值。
textarea 输入框: 绑定字符串值。
radio: 绑定字符串值。
checkbox: 单个绑定布尔值，多个绑定数组。
select: 单选绑定字符串，多选绑定数组。

正文完

vue.js

发表至： vue.js

2021-07-03

0

关于vue.js:CRMEB知识付费系统优势及常见问题解答

关于vue.js:词云滚动效果

关于vue.js:在一段很长的文字中间用省略显示

关于vue.js:vue3-provide-inject-父子组件传值watch监听

关于python:unittest系统四测试套件

关于vue.js:Vue指令

内容解决

属性绑定

渲染指令

事件处理

表单输出绑定

输入框绑定

单选按钮绑定

复选框绑定

抉择框绑定

v-model 小结

站内搜索