Vue常用指令

Vue常用指令:

指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义

v-bind
- 为HTML标签绑定属性值, 如设置href,css样式等
- eg:
```
<body><div id = "app"><a v-bind:href = "url"></a></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{url:"https://www.baidu.com"}}});</script>
</body>
```
  - 上面我们是通过v-bind指令给a标签的href属性绑定了一个名为url的模型
    - 之后一旦url模型的值发生改变之后, 对应的url的值就会跟着发生改变
  - vue核心对象创建的过程中在data属性值中我们声明了一个名为url的模型, url模型的初始值为"https://www.baidu.com",就是百度官网, 所以开始的时候只要我们一旦点击这个a标签, 那么就会跳转到百度官网中去
    - 因为a标签的属性href值会随着url模型的值的改变而发生改变,所以即使开始的时候我们并没有给a标签的href属性显示的赋值, 但是我们给a标签的href属性绑定了一个名为url的模型, 而我们的url模型的初始值为百度官网, 所以一旦执行到后面的创建好Vue核心对象之后那么我们的a标签的href的值已经是跟着发生了改变了
  - v-bind指令可以省略: 也就是可以写为如下形式:
```
 <a :href = "url"></a>
```
v-model
- 在表单元素上创建双向数据绑定
  - 注意: 这里只是给表单元素添加
    - 一般我们都是给输入框加这种绑定
- eg:
```
<body><div id = "app"><a v-bind:href = "url"></a><input type = "text" v-model = "url"></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{url:"https://www.baidu.com"}}});</script>
</body>
```
  - 上面我们在div中又创建了一个输入框, 输入框就是属于表单元素的一种, 我们给这个表单元素通过v-model属性绑定了一个名为url的模型数据, 然后我们只要是改变输入框中的值, 那么对应的url模型数据就会发生改变, 那么我们的url模型数据一旦发生改变之后 , a标签中的href属性也会跟着发生改变
v-on
- 为HTML标签绑定事件
- eg:
```
<body><div id = "app"><input type = "button" value = "一个按钮" v-on:clink="show()"></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",methods:{show(){}});</script>
</body>
```
  - v-on后面是对应的事件类型, 这里是click(单击事件), 只要是点击这个按钮, 那么就会执行这个show()方法
  - 这个show()方法要写到创建Vue对象的过程中的methods属性中
    - methods属性后面是一个大括号, 在大括号的里面定义show()方法
  - v-on可以替换为一个@符号, 如下:
```
<input type = "button" value = "一个按钮" @:clink="show()">
```
①v-if

②v-else

③v-else-if
- 根据条件渲染某个元素, 判断为true时渲染, 否则不渲染
- 这几种都是条件判断的功能
- eg:
```
<body><div id = "app"><div v-if = "count == 3">div1</div><div v-else-if = "count == 4">div2</div><div v-else>div3</div><input v-model = "count"></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{count:3}}});</script>
</body>
```
  - 通过给div三个div标签分别加了v-if,v-else-if,v-else指令, 指令值中的count为一个模型数据, 当count模型数据的值为3时, 就会显示div1, 如果是count模型的值为4的时候就会显示div2, 如果是count既不为3也不为4的时候就会显示div3
  - 我们可以看到创建Vue核心对象的时候声明了名为count的模型数据, 且count模型数据的初始值为3, 那么也就是说: 初始情况之下我们会显示div1
  - 我们上面给输入框通过v-model绑定了count模型数据, 那么我们就可以通过输入到输入框中的值来改变我们的count模型数据的值, 那么count模型数据的值一旦发生改变之后对应的条件判断的结果就会不同
  - 我们如果想要一些标签在具有某种条件之下才展示, 我们就可以使用v-if,v-else-if,v-else来完成
v-show
- 根据条件展示元素
- 区别于v-if的就是v-show是在切换元素的display样式属性的值
  - 使用v-show和v-if指令有什么区别?
    - 使用v-if时,如果不满足要求, 则文档流中根本不会有此标签,而如果使用的是v-show时, 如果不满足要求, 则文档流中还是有标签的, 只不过通过标签的display样式设置为none从而将标签隐藏起来了
- eg:
```
<body><div id = "app"><div v-if = "count == 3">div1</div><div v-else-if = "count == 4">div2</div><div v-else>div3</div><div v-show = "count == 3">div v-show</div><input v-model = "count"></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{count:3}}});</script>
</body>
```
  - 这个时候我们在上面添加了一个标签体内容为div v-show的div标签, 这个时候对于这个标签我们也只只有当count模型数据值为3的时候才会显示这个div v-show标签的内容
v-for
- 列表渲染, 遍历容器的元素或者对象的属性
- eg:
```
<body><div id = "app"><div v-for = "addr in addrs">{{addr}}<br></div></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{addrs:["北京","上海","宝鸡"]}}});</script>
</body>
```
  - 上面的v-for后面的addr in addrs就是一个固定格式
  - 上面的addr就是一个局部变量, 就和我们java中的增强for循环中左边的局部变量一样名字可以乱写
  - 上面的addrs是一个模型数据, 此模型数据要是一个数组
  - 我们可以通过创建Vue核心对象的时候看到我们的data属性中声明了名为addrs的模型, 并且这个模型数据是一个数组类型的, 初始值有三个: 北京 , 上海 , 宝鸡
  - 我们在内层的div中通过"插值表达式"将addr的值取了出来, 这个时候取出的值有三个, 这个时候就是遍历容器中的元素, 那么就会遍历出北京上海宝鸡(之间是换行)
- 我们还可以在用v-for指令的时候加上索引:(如下)
```
<body><div id = "app"><div v-for = "(addr,i) in addrs">{{i + 1}}:{{addr}}<br></div></div><script src = "js/vue.js"></script><script>//创建vue核心对象new Vue({el:"#app",data(){return{addrs:["北京","上海","宝鸡"]}}});</script>
</body>
```
  - 此时我们在v-for后面的形式采用的是(形参1 , 形参2) in 容器的形式, 这种形式之下形参1中存储的是每次的元素值, 形参2中存储的是每次的索引位置(索引位置从0开始) , 容器就是我们的数组
    - 然后后面我们使用插值表达式将我们的模型数据值取了出来,我们是读取的i + 1的值,而不是i, 因为我们希望是从1开始, 如果不加1就是从0开始了

补充:

插值表达式可以读出模型数据值

补充二:

定义HTML标签的v-on指令后面的触发事件的时候我们可以将触发的方法定义到Vue核心对象的methods属性之中, 也可以定义到Vue核心对象之外

如果我们将触发的方法定义到了Vue核心对象的methods属性之中的时候我们就可以通过this关键字调用到我们声明在Vue对象中的data中的数据模型
如果我们将触发的方法定义到了Vue核心对象之外的时候我们这个时候在Vue核心对象之外就不能访问到Vue对象中定义的data中的数据模型值了

eg:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试methods属性和methods属性之外声明事件方法</title><!-- 导入vue.js文件 --> <script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id = "app"><input type="button" value = "点击我试试" v-on:click="change()"></div><script type="text/javascript">// 创建Vue核心对象const vue = new Vue({el : "#app",data :{name : "小陈"},})function change(){alert("哈哈哈")}</script></body>
</html>

Vue常用指令 [vue框架][web前端]相关推荐

介绍几个常用的免费的Web前端开发工具
几个常用的免费的Web前端开发工具一.Grid Guide 特点:快速生成栅格二.Foundation 特点:一款类似Bootstrap的框架,有为栅格.排版.按钮和其它动态元素的预定义CSS类. ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
几款常用的高质量web前端框架
Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析.都是个人意见,仁者见仁智者见智. QUICK UI Q ...
VUE常用指令v-xxx
概述在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令. 譬如在HTML页面中这样使用`<div v-xxx=''></div>` 在vue中v-xxx就是 ...
Vue 常用指令自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
几款常用的高质量Web前端框架！
近年来,Web前端技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造.各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现. 那么今天就给大家介绍几个在 ...
【vue 基础】 vue常用指令实例总结
文章目录 1.v-bind 2. v-on 2.1 参数问题 2.2 修饰符问题 3. v-for 4. v-if 5.v-show 6. v-model(重点) 6.1 原理 6.2 v-model ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
vue常用开发ui框架（app，后台管理系统,移动端）及插件
一.uni-app (app混合开发) uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台. 官网:uni-app ...

Vue常用指令 [vue框架][web前端]

Vue常用指令

Vue常用指令:

指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义

补充:

补充二:

Vue常用指令 [vue框架][web前端]相关推荐

最新文章

热门文章