Vue基本指令
模板对象
vue指令
一：模板对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
{{4+5}}
{{2>3}}
<p v-text="msg">{{msg}}</p>
<h1 v-text="str">{{str}}</h1>
{{msg}} <h3 v-html="aa">
{{aa}} </h3> </div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'你是sb吗',
str:'哈哈 你个傻吊',
aa:'<i>are you ok?</i>' }
})
</script>
</html>
二、Vue指令
指令：是带有V-前缀的特殊属性，通过属性来操作元素
1.v-text和v-html
v-text:在元素当中插入值,只能是文本
v-html:在元素不中不仅可以插入文本，还可以插入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{80+2}}</p>
<p>{{20>30}}</p>
{{msg}}
我是：<h1 v-text="msg">{{str}}</h1>
你是：<h1 v-text="msg">2222222222222</h1> <h2 v-html="hd"></h2>
<h2 v-html="str"></h2>
</div>
<script>
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
msg: "我是老大",
hd: "<input type='button' value='你是shei?'>",
str: "我要发财!"
}
})
</script>
</body>
</html>
2.v-if和v-show
v-if: 根据表达式的真假值来动态插入和移除元素,如果条件成立插入一个元素，如果没有就删除，注意：删除时代码里面就没有了，查看控制台发现该元素的的代码被注释了
v-show:根据表达式的真假值来隐藏和显示元素，条件不成立的时候知识用css的display:none,将该元素的代码隐藏了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app"> <div v-if="pick">
<h1>你是对的</h1>
</div>
<div v-else>
<h1>我是对的</h1>
</div> <p v-show="bd">i am ctz</p> <p v-show="ok">好好学习天天写代码</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
pick: false,
bd: false,
ok: true
}
}); window.setInterval(function () {
vm.ok = !vm.ok
}, 1000)
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
3.v-for
v-for:根据变量的值来循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!--item我们要取的值index为该值早数组中的索引-->
<h3 v-for="(item,index) in arry">
{{index}}--->{{item}}
</h3> <h4 v-for="(v,key,index) in dic">
{{index}}---{{key}}-----{{v}}
</h4> <h4 v-for="(item,index) in obj1">
{{index}}----{{item.name}}---{{item.hobby}}
</h4> <button v-on:click="f">点我删除</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
arry:[111,222,333,444,555],
dic:{name:'陈太章',age:21,addr:'云南昆明'},
obj1:[
{name:'赵俊明',hobby:'搞基'},
{name:'肖博雅',hobby:'被搞'},
{name:'八级哥',hobby:'互搞'}
]
},
methods:{
f:function () {
vm.arry.pop()
}
}
})
</script>
</html>
4.v-on
v-on:监听元素事件，并执行相应的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app" >
<p><input type="checkbox" name="fruit" value="a">苹果</p>
<p><input type="checkbox" name="fruit" value="b">香蕉</p>
<p><input type="checkbox" name="fruit" value="c">梨</p>
<p><input type="checkbox" name="fruit" value="a" v-on:click="cc">其他</p>
<div v-html="aa" v-show="isshow"></div>
</div> </body> <script>
var vm=new Vue({
el:'#app',
data:{
aa:'<textarea placeholder="请输入你喜欢吃的水果"></textarea>',
isshow:false },
methods:{
cc:function () {
this.isshow=!this.isshow
}
}
})
</script>
</html>
动态生成标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
ul li{
list-style: none;
display: inline-block;
border:1px solid blueviolet;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-on:click="ewmlogin">二维码登录</li>
<li v-on:click="acountlogin">账号密码登录</li>
</ul> <div v-if="ewm">
<img src="erma.jpg" alt="请用手机扫码登录">
</div> <div v-if="account">
<form action="">
<p>账号:<input type="text"></p>
<p>密码:<input type="text"></p>
<p>密码:<input type="submit" value="登录"></p>
</form>
</div>
</div>
</body> <script>
var vm=new Vue({
el:'#app',
data:{
ewm:true,
account:false
},
methods:{
ewmlogin:function () {
vm.ewm=true;
vm.account=false
} ,
acountlogin:function () {
vm.account=true;
vm.ewm=false
}
}
})
</script>
</html>
tab切换方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid blueviolet;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!--<li v-on:click="login(true)">二维码登录</li>-->
<!--<li v-on:click="login(false)">账号密码登录</li>-->
<li @click="login(true)">二维码登录</li>
<li @click="login(false)">账号密码登录</li>
</ul> <div v-if="log">
<img src="erma.jpg" alt="请用手机扫码登录">
</div> <div v-if="!log">
<form action="">
<p>账号:<input type="text"></p>
<p>密码:<input type="text"></p>
<p>密码:<input type="submit" value="登录"></p>
</form>
</div>
</div>
</body>
<script>
var vm=new Vue(
{
el:'#app',
data:{
log:true
},
methods:{
login:function (el) {
vm.log=el
}
}
}
)
</script>
</html>
tab切换方式er
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a>
5.v-bind
v-bind:绑定元素的属性来执行相应的操作
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:argument="expression"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
<style>
.bk_1{
background-color: cornflowerblue;
width: 200px;
height: 200px;
}
.bk_2{
background-color: red;
width: 200px;
height: 200px;
}
.bk_3{ border: 5px solid #000;
}
</style>
</head>
<body>
<div id="app">
<h5><a href="http://www.baidu.com" v-bind:title="msg">百度一下</a></h5> <div :class="bk1"></div>
<div :class="bk2"></div> <div :class="{bk_2:tmp,bk_3:tmp}"></div> <div :class="[bk2,bk3]"></div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:"问问百度",
bk1:'bk_1',
bk2:'bk_2',
bk3:'bk_3',
tmp:false }
})
</script> </html>
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a>
6 v-model
v-model:实现了数据和视图的双向绑定
分成了3步：
1）把元素的值和数据相绑定
2）当输入内容时，数据同步发生变化，视图 ---数据的驱动
3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"> <br>
<h1>{{msg}}</h1>
<button @click="f">点击切换</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:''
},
methods:{
f:function () {
vm.msg='一个能打的都没有'
}
}
})
</script>
</html>
自定义指令
需求:
当进入一个页面时，输入框获取焦点，且背景颜色是绿色，字体颜色是篮色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{},
directives:{
focus:{ //指令的名字
//当绑定的元素显示时
inserted:function (tt) {
tt.focus();
tt.style.backgroundColor='green';
tt.style.color='blue'
}
}
}
})
</script>
</html>
计算属性computer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
temp: 1001
},
computed: {
msg: function () { if(this.temp > 1000){
return parseInt(this.temp/10)-1
} else {
return this.temp-1
}
}
}
})
</script>
</body>
</html>
Vue基本指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- 【SQLAlchemy】SQLAlchemy修改查询字段列名
SQLAlchemy问题记录 company price quantity Microsoft Google Google Google 要实现脚本 select price, sum(quantit ...
- springBoot @EnableAutoConfiguration深入分析
1.新建一个项目中需要提供配置类 2.在META-INF/spring.factorties在文件中配置 org.springframework.boot.autoconfigure.EnableAu ...
- Axure RP 的安装与卸载
官网:http://www.axure.com/download 支持Windows和Mac
- Python 源码剖析（一）【python对象】
处于研究python内存释放问题,在阅读部分python源码,顺便记录下所得.(基于<python源码剖析>(v2.4.1)与 python源码(v2.7.6)) 先列下总结: ...
- react 入门与进阶教程
react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...
- CF916E Jamie and Tree 解题报告
CF916E Jamie and Tree 题意翻译 有一棵\(n\)个节点的有根树,标号为\(1-n\),你需要维护一下三种操作 1.给定一个点\(v\),将整颗树的根变为\(v\) 2.给定两个点 ...
- 阿里云遇到的坑:CentOS7防火墙(Firewalld)，你关了吗？
阿里云官方教程: https://help.aliyun.com/knowledge_detail/41317.html 百度参考的牛人教程(推荐): http://www.111cn.net/sys ...
- sass的mixin,extend,placeholder,function
1. mixin 就是定义了一个函数,可以传参,并且设定默认值,css选择器可以通过@include来引用,mixin混入的代码,就是原样复制,不会合并,会造成冗余 例如: @mixin br6($b ...
- CF724E Goods transportation
最大流既视感 然后 TLEMLE既视感 然后 最大流=最小割 然后 dp[i][j]前i个点j个点在S集合,最小割 然后 dp[i][j]=min(dp[i-1][j]+p[i]+j*c,dp[i-1 ...
- YBT 1.1 贪心算法
本人因为过于懒所以以后就将题解放进原文件中,存入百度网盘,自行下载,里面包含题目网站,源文件,与相应题解(这次没有写) 链接: https://pan.baidu.com/s/1eSoQ_LFWMxF ...