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 ...
随机推荐
- 从一个bug谈谈psqlodbc游标的一点认识
本文源于最近修正的一个关于psqlodbc的bug,该bug在近期的psqlodbc的git上也有人提交了修正. 关于该bug的修正代码可以看这里: https://git.postgresql.or ...
- Word2Vec原理及代码
一.Word2Vec简介 Word2Vec 是 Google 于 2013 年开源推出的一款将词表征为实数值向量的高效工具,采用的模型有CBOW(Continuous Bag-Of-Words,连续的 ...
- UVALive-7457-Discrete Logarithm Problem（取模运算）
原题链接 额,一直在理解题意在纠结看不懂,后来才恍然大悟 题意:定义一种新运算 a × b = a * b mod p : 已知条件给定一个p 求 x 这里用到同余与模运算乘法公式:a * b % n ...
- markdown页面内跳转
分两步 第一步 实际语法比较简单,在需要跳转的位置添加锚点,语法如下: <span id="jump">跳转到的地方</span> 第二步 在需要点击跳转的 ...
- 【性能调优】：记录一次数据库sql语句性能调优过程
一,依旧很简单的一个接口,查询列表接口,发现10并发单交易场景下,数据库表4w铺底数据,每次查询2000条数据进行orderby显示,平均响应时间2秒以上,数据库的cpu使用率高达95%: 二,抓到这 ...
- 五、 OpenERP 输出日志
import logging from openerp.osv import orm _logger = logging.getLogger(__name__) class project_task_ ...
- RealVNC
使用Linux服务器,在一般情况下是不太用桌面环境的.不过现在我想着开发用Linux,如使用Pycharm这种IDE,还是很方便的.这样还是需要桌面环境的,然而我们位置不多,就将服务器的屏幕摘下了,那 ...
- AngularJS Eclipse Plugin
本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine ...
- transform旋转变换效果
div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
- InterView之C/CPP cal
cal #define DOUBLE(x) x+x ,i = 5*DOUBLE(5): i 是多少? i 为30. 5 * 5 + 5 下面关于"联合"的题目的输出? A // / ...