VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
2017-05-02 20:12
806 查看
双向数据绑定
v-bindv-bindtitle简化写法为title
设置类名 v-bindclass
隐藏显示元素v-if和v-show
v-for
遍历数组
遍历对象
v-onclick 点击事件简化语法click
组件
私有组件
过滤器
全局过滤器
私有过滤器
路由
点击按钮之后
v-bindv-bindtitle简化写法为title
设置类名 v-bindclass
隐藏显示元素v-if和v-show
v-for
遍历数组
遍历对象
v-onclick 点击事件简化语法click
组件
私有组件
过滤器
全局过滤器
私有过滤器
路由
双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h1>{{ message }}</h1>
<h2 v-html="message"></h2> <!--v-html相当于innerHTML-->
<h3 v-text="message"></h3> <!--v-text相当于innerText-->
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello world',
}
})
</script>
</body>
</html>v-bind(v-bind:title简化写法为:title)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--将变量biaoti绑定到a标签的title属性-->
<!--将变量mytitle绑定到a标签的自定义属性data-tit上-->
<a href="javascript:;" v-bind:title='biaoti' v-bind:data-tit='mytitle'>超链接</a>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
biaoti:'这是一个标题',
mytitle:'我的自定义属性'
}
})
</script>
</body>
</html>设置类名 v-bind:class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<div class="test" v-bind:class='{ clr:isClr }'>对象设置类名</div>
<div class="test" v-bind:class='[one,two]'>数组设置类名</div>
<div class="test" v-bind:class='[one,two,{clr:isClr}]'>对象和数组设置类名</div>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
biaoti:'这是一个标题',
mytitle:'我的自定义属性',
isClr:true,
one:'oneStyle',
two:'twoStyle'
}
})
</script>
</body>
</html>隐藏/显示元素，v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<div class="test" v-if='isTrue'>if</div> <!--isTrue为false则删除标签-->
<div class="test" v-show='isTrue2'>show</div> <!--isTrue为false则设置display:none;-->
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isTrue:true,
isTrue2:false,
}
})
</script>
</body>
</html>v-for
遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<li class="test" v-for='(item,index) in items'> 元素:{{item}} 索引:{{index}} </li>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[1,2,3,4,5]
}
})
</script>
</body>
</html>遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
obj:{name:'tom',agee:188,addr:'usa'}
},
})
</script>
</body>
</html>v-on:click 点击事件（简化语法@click）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<button v-on:click="myClick">给对象添加内容</button>
<li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
obj:{name:'tom',agee:188,addr:'usa'}
},
methods:{
myClick:function(){
this.obj.name='jack'
console.log( this.obj )
}
}
})
</script>
</body>
</html>点击按钮之后
组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<my-ele></my-ele>
</div>
<script src="../vue.min.js"></script>
<script>
Vue.component( 'myEle' , {
data:function(){
return {
num:0,
arr:[1,2,3],
str:'i am component'
}
},
template:'<h1 @click="num++">我的组件 {{ arr[1] }} {{ num }}</h1>'
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>私有组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<my-ele v-bind:mydata='num'></my-ele>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:200
},
methods:{
btnClick:function(){
this.num++
}
},
components:{
myEle:{
data:function(){
return {
num2:10
}
},
props:['mydata'],
template:'<h1>自身的值{{ num2 }} 传来的值{{ mydata }} </h1>'
}
}
})
</script>
</body>
</html>过滤器
全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<div> {{ 'ABC' | toLowCase }}</div>
</div>
<script src="../vue.min.js"></script>
<script>
Vue.filter('toLowCase',function( str ){
return str.toLowerCase();
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<div> {{ str | lowCase }}</div>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
str:'abcd'
},
filters:{
lowCase:function( str ){
return str.toUpperCase()
}
}
})
</script>
</body>
</html>路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
</head>
<body>
<div id="app">
<router-link to='/internationalNews'>国际新闻</router-link>
<router-link to='/nativeNews'>国际新闻</router-link>
<router-view></router-view>
</div>
<script src="../vue.min.js"></script>
<script src="../vue-router.min.js"></script>
<script>
var news1 = Vue.component('my-news1',{
template:'<h1>特朗普就任美国总统</h1>'
})
var news2 = Vue.component('my-news2',{
template:'<h1>北京房价已上天！</h1>'
})
var myroute = new VueRouter({
routes:[
{ name:'new1' , path:'/internationalNews' , component:news1 } ,
{ name:'new2' , path:'/nativeNews' , component:news2 } ,
]
})
var vm = new Vue({
el:'#app',
router:myroute
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js常用指令汇总（v-if//v-show//v-else//v-for//v-bind//v-on等）
- vue学习02--处理用户输入(v-on/v-model/v-show/v-text/v-html)
- vue学习笔记之指令v-text && v-html && v-bind详解
- vue学习笔记2——指令v-text && v-html && v-bind
- Vue2 指令v-if v-show v-for v-text v-html
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- Vue v-if v-for v-bind v-on
- Vue------第三天(条件渲染：v-if、v-show;列表渲染:v-for)
- Vue.js之v-text／v-html／v-bind
- vue常用指令v-model和v-for
- 9-Vue指令之V-text/V-html
- vue中v-text，v-html, v-model, {{}}之间的异同
- vue 指令 v-html 中使用过滤器filters功能
- Vue常用指令v-on:click
- vue学习第2天，基础知识，v-bind v-on v-if v-for v-model v-html computed watch methods
- Vue.js常用指令汇总（v-if、v-for等）
- vue学习01--v-bind:title/v-if/v-for
- 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶
- vue学习02 vue-cli 模板创建后的基本结构 及内容组件 指令
- vue中v-text，v-html, v-model, {{}}之间的异同