vue小结笔记(1)之指令篇
来源:互联网 发布:小罗伯特唐尼知乎 编辑:程序博客网 时间:2024/06/05 12:39
1.导入vue的库
<script src="https://unpkg.com/vue"></script>
2.程序员万年不变的helloworld
下面贴一下代码(这里贴关键代码,源码见博客最后)
<div id="app">{{ msg }}</div>
var vm=new Vue({ el:"#app" , //id选择器 data:{ msg:"helloworld" }});
这样一个简单的helloword就实现了,当然我们并不会仅仅满足这些
3.指令的使用
- v-if
- v-else
- v-show
- v-for
- v-model
- v-on ‘@’
- v-bind ‘:’
- v-text
- v-html
- v-cloak
- v-ref
v-if
<div v-if="!flag">用来显示的内容</div>
要注意的问题是v-if指令在做渲染的时候会有元素的卸载和装载的过程,也就是会添加和删除元素的操作,与之类似的有v-show指令下面会介绍到。(通过浏览器控制台查看元素)
v-else
<div v-if="flag">用来显示的内容</div> <div v-else>else</div>
与v-if配合使用
v-show
<div v-show="!flag">用来显示show的内容</div>
用法和v-if基本一致 但实现原理有区别,v-show只是改变元素css的display属性,v-if则存在删除和添加元素的操作,根据实际情况,若判断的(如上述的flag)真假值会有很多频率的变化选择v-show为宜。
v-for
<ul> <li v-for="(item,index) in items"> {{ index }}{{ item }} </li> </ul>
这里的items是一个数组类型,item是遍历时的别名,index是当前元素的下标
v-model
<div> {{ msg }}</div> <input type="text" v-model="msg">
v-model用于数据的双向绑定
Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。(摘自vue官网)
v-model的高级用法
<input type="checkbox" v-model="msg" value="helloworld" name="msgcheck"> <input type="checkbox" v-model="msg" value="hellovue" name="msgcheck">
注:此时的msg的类型需要时数组类型
v-on
<div v-on:click="fn" >用来测试v-on</div>
用来绑定事件,调用methods中的函数,其简写形式是'@'
v-bind
<div class="div" v-bind:class="{div:!flag}">
用于绑定标签的属性
- v-text
- v-html
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] { display: none;}
<div v-cloak> {{ message }}</div>
不会显示,直到编译结束。
v-ref
4. 详细代码
源码地址
阅读全文
1 0
- vue小结笔记(1)之指令篇
- vue小结笔记(2)之指令的综合运用
- vue小结笔记(3)之指令在表单上的应用
- Vue学习笔记(2)vue指令
- Vue.js指令篇之自定义指令
- vue第二篇之指令
- vue小结笔记(4)之v-resource应用
- vue笔记----指令bind
- vue笔记----指令for
- vue入门篇之内部指令
- VUE学习之指令
- vue之自定义指令
- Vue之自定义指令
- Vue之自定义指令
- vue笔记----指令v-if
- vue笔记--模板语法--指令
- Vue 指令(Directive)
- vue 进阶系列之指令
- excel中删除重复数据
- 深入python3学习-我的第一个python程序
- 基于Triplet loss函数训练人脸识别深度网络(Open Face)
- Spring 使用笔记
- 从string引起的串扰bug说起
- vue小结笔记(1)之指令篇
- 机器学习基石-04-4-Connection to Real Learning
- 23种设计模式
- JavaScript基础 语句
- K近邻算法
- UDP全面分析
- 浮点数与字节数据转换详解
- Binary Search:50. Pow(x, n)
- Android Studio : emulator is already running