vue指令示例合集
vue所有指令练习合集。这是个html文件，用chrome打开可查看结果。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>指令合集</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <style>
.greenWord {
color: green;
} .wordSize {
font-size: large;
background-color: darkorange;
} .redWord {
color: red;
} [v-cloak]{
display: none;
}
</style>
</head>
<body> <div id="app1">
<!--绑定普通文本-->
<h3>1、插值绑定</h3>
<span v-text="msg"></span>
<span>{{msg}}</span> <!--插入一段html源码 将源码渲染为DOM结构-->
<h3>2、v-html 动态渲染html</h3>
<div v-html="mhtml"></div> <!--v-show 原理：通过改变css的display决定是否显示元素；即不管v-show的值是true还是false,都会渲染完该节点下所有Dom-->
<h3>3、v-show 条件渲染</h3>
<span v-show="isshow">提莫队长现身啦</span> <!--真正的条件渲染，符合条件则渲染v-if的DOM结构，否则只渲染v-else指示的结构块-->
<h3>4、v-if 使用</h3>
<span v-if="isok">您是男士</span>
<span v-else>您是女士</span>
<span v-if="Math.random() < 0.3">概率小于0.3</span>
<span v-else-if="Math.random() < 0.6 && Math.random()>=0.3">概率0.3~0.5</span>
<span v-else>概率大于50%</span> <!--for循环插值-->
<h3>5、v-for vue循环</h3>
<div v-for="item in items">{{item}}</div>
<div v-for="item in items2">{{item.name}}>>>{{item.age}}</div> <!--给节点添加事件处理功能-->
<h3>6、v-on 事件处理器</h3>
<button v-on:click="chgColor" id="btn1">雨中的彩虹</button>
<button v-on:click.right="rightAlert">右击选择</button>
<button v-on:click.stop="stopEvent($event)">停止冒泡</button>
<button v-on:click="count +=1">加法：{{count}}</button> <!--给元素绑定class属性-->
<h3>7、v-bind 绑定class</h3>
<span v-bind:class="{greenWord : isActive}">快给我披上色彩吧</span>
<span v-bind:class="classObj">却从没有感觉，我无地自容</span>
<span v-bind:class="[redWord]">绑定数组类</span> <!--给元素绑定内联style-->
<h3>8、绑定内联样式</h3>
<span v-bind:style="{color:'#66cc66',fontSize:20+'px'}">内联样式 对象语法</span>
<span v-bind:style="styleObj">内联样式>>>对象语法</span>
<span v-bind:style="[styleObj]">内联样式>>>数组语法</span> <!--绑定一个html属性,自定义的也可以-->
<h3>9、绑定一个属性</h3>
<img v-bind:src=" './logo.png' "/>
<div v-bind:title="mtitle">红红火火恍恍惚惚</div>
<div v-bind:data-mid="mid">测试绑定mid</div> <!--处理表单 憋说话 怒吃你的语法糖-->
<h3>10、v-model 表单控件或者组件上创建双向绑定</h3>
<input v-model="message" placeholder="edit me">
<p>单行信息：{{message}}</p>
<textarea v-model="info" placeholder="add multiple lines"></textarea>
<p style="color: darkorange">多行信息：{{info}}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">单个复选框：{{checked}}</label>
<h4>多个复选框</h4>
<div>
<input type="checkbox" id="jack" value="jack" v-model="checkNames">
<label for="jack">jack</label>
<input type="checkbox" id="jack2" value="jack2" v-model="checkNames">
<label for="jack2">jack2</label>
<input type="checkbox" id="jack3" value="jack3" v-model="checkNames">
<label for="jack3">jack3</label>
<span>checked names:{{checkNames}}</span>
</div>
<h4>单选框</h4>
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>
<span>您的选择：{{picked}}</span>
<h4>选择框</h4>
<select v-model="selected">
<option>111</option>
<option>222</option>
<option>333</option>
</select>
<span>您的选择：{{selected}}</span>
<!--语法糖 有点甜 方便一丢丢-->
<select v-model="mselect">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span>您的选择：{{mselect}}</span> <!--很少用到这个-->
<h3>11、v-pre 跳过该元素和其子元素编译过程</h3>
<span v-pre>{{@@@@@@@@@@@@@@@@@@@@@@}}</span> <!--现象：在vue编译结束中，界面可能会闪现一下Mustach符号，很丑。加上这个指令可以有效地阻止这种情况发生，永葆优雅。-->
<h3>12、v-lock 该实例编译结束后，解除该指令绑定</h3>
<div v-cloak>{{message}}</div> <!--少用-->
<h3>13、v-once 只渲染元素和组件一次</h3>
<span v-once>我只更新一次：{{once}}</span>
<span>不加v-once:{{once}}</span> </div> </body> <script>
var app1 = new Vue({
el: '#app1',
data: {
msg: '插值测试',
mhtml: '<span style="color: palevioletred">巴啦啦小魔仙</span>',
isshow: true,
isok: true,
items: ["林徽因", "陆小曼", "张爱玲"],
items2: [{name: "徐志摩", age: "28"}, {name: '梁思成', age: 26}, {name: '金岳霖', age: 30}],
count: 0,
isActive: false,
error: null,
classObj: {
greenWord: true,
wordSize: true
},
redWord: 'redWord',
styleObj: {
color: '#00eeff',
fontSize: 30
},
message:'',
info:'',
checked:true,
checkNames:[],
picked:'',
selected:'',
options:[{text:'犬次郎',value:'QCL'},{text:'道格森二世',value:'DGS'}],
mselect:'',
once:'渲染2次',
mtitle:'title-property',
mid:'123456'
},
methods: {
chgColor: function () {
$("#btn1").css('color', "#cc66cc")
$('#btn1').text('我变成了粉红色')
},
rightAlert: function () {
alert("您点击了鼠标右键")
},
stopEvent: function (event) {
alert("event:" + event.target.tagName) }
},
computed: {
classObj: function () {
return {
greenWord: this.isActive && !this.error,
wordSize: this.error && this.error.type === 'fatal'
}
}
}
})
</script>
</html>
vue指令示例合集的更多相关文章
- 天气类API调用的代码示例合集：全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 全国天气预报:数据来自国家气象局,可根据地名.经纬度GPS.IP查 ...
- 位置信息类API调用的代码示例合集：中国省市区查询、经纬度地址转换、POI检索等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 中国省市区查询:2017最新中国省市区地址 经纬度地址转换:经纬度 ...
- 通讯服务类API调用的代码示例合集：短信服务、手机号归属地查询、电信基站查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 短信服务:通知类和验证码短信,全国三网合一通道,5秒内到达,费用低 ...
- 生活常用类API调用的代码示例合集：邮编查询、今日热门新闻查询、区号查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...
- 开发工具类API调用的代码示例合集：六位图片验证码生成、四位图片验证码生成、简单验证码识别等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...
- 出行服务类API调用的代码示例合集：长途汽车查询、车型大全、火车票查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 长途汽车查询:全国主要城市的长途汽车时刻查询,汽车站查询 车型大全 ...
- 超全的 Vue 开源项目合集，签收一下
超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...
- VUE相关资料合集
===官方=== https://github.com/vuejs/vue vue-components组件库 ---PC端--- https://github.com/ElemeFE/element ...
- NHibernate查询示例合集
基本查询 复杂查询示例 /// <summary> /// 获取自定义表单数据中属于部门的部分 /// </summary> /// <param name=&quo ...
随机推荐
- AFNetworking 3.1.0 使用中某些知识点讲解
# POST / GET 请求 /*! 首先要知道,POST请求不能被缓存,只有 GET 请求能被缓存.因为从数学的角度来讲,GET 的结果是 幂等 的,就好像字典里的 key 与 value 就是 ...
- Python小实验——读&写Excel文件内容
安装xlrd模块和xlwt模块 读取Excel文件了内容需要额外的模块-- \(xlrd\),在官网上可以找到下载:https://pypi.python.org/pypi/xlrd#download ...
- 2016级算法第六次上机-D.AlvinZH的学霸养成记V
1081 AlvinZH的学霸养成记V 思路 中等题,计算几何. 这是一个排序问题,按极角排序.可以转化为叉积的应用,对于点A和B,通过叉积可以判断角度大小,共线时再判断距离. 叉积的应用.OA × ...
- 解压命令tar zxvf中zxvf的意思
x : 从 tar 包中把文件提取出来 z : 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压 v : 显示详细信息 f xxx.tar.gz : 指定被处理的文件是 ...
- C#高效新增数据到数据库（十万级别测试）
我们在对数据库进行新增数据时,怎么能把速度提到最快,时间缩到最短呢?下面针对三种方法进行比较 新增 逐条新增数据模式 Stopwatch s2 = new Stopwatch(); s2.Start( ...
- ECharts概念学习系列之ECharts官网教程之自定义构建 ECharts（图文详解）
不多说,直接上干货! 官网 http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%2 ...
- springboot+zuul（二）------智能负载
一.参考 参考资料:https://www.cnblogs.com/flying607/p/8330551.html ribbon+spring retry重试策略源码分析:https://blog. ...
- linux 升级－杂
apt-cache search linux apt-cache search linux | grep generic apt-cache search linux | grep 4.10. apt ...
- maven在pom文件中添加你想要的jar包
概述:POM 文件里面的依赖jar包经常需要添加, 仅需要在google中代码查找 :maven 你需的jar包名称 repository 用了Maven,所需的JAR包就不能再像往常一样,自己找到并 ...
- Django models 的增删改查
增 from app01.models import * #create方式一: Author.objects.create(name='Alvin') #create方式二: Author.obje ...