费话不说,想看介绍的上官网https://cn.vuejs.org/v2/ ，中文官网,相信大家都能看得懂
学习vue第一步一定是从指令开始，博主也不例外。
1.v-text 向页面展示文本信息
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app" v-text='mes'>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{ //顾名思义数据的意思
mes:'hellow world' //声明一个数据 name 为mes value为hellow world
},
});
</script>
</body>
</html>
v-text
2.v-html 想页面渲染一个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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text='mes'></div>
<div v-html='mes1'></div>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{ //顾名思义数据的意思
mes:'<h1>hellow world</h1>',
mes1:'<h1>hellow world</h1>' //声明一个数据 name 为mes value为hellow world
},
});
</script>
</body>
</html>
v-html
3.v-show v-show 修改css的display属性 true是显示，false为隐藏
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show='false'>hellow world
</div>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
});
</script>
</body>
</html>
v-show
4.v-if 、 v-else-if、v-else 条件判断
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="mes = 'lhf'">if
</div>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{
mes:"fhl"
}
});
</script>
</body>
</html>
v-if
5.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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for='item,index in mes'>
<li :key='item.id'><span>序号:{{ index }}
</span>名字: {{ item.name }}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{
mes:[
{id:1,name:'zhangsan'},
{id:2,name:'lishi'},
{id:3,name:'wangwu'}
]
}
});
</script>
</body>
</html>
v-for
6.v-on 绑定事件 简写 @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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<button @click='handleClick'>点我啊
</button>
<button v-on:click='handleClick'>点我啊
</button>
<!-- 没有参数的时候可以不用写括号 -->
<a href="" @click.prevent='toBaidu(1)'> 点我啊
</a>
<!-- 当然 还有一些事件的修饰 比如上边用到的.prevent就是阻止默认行为的 -->
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{
mes:[
{id:1,name:'zhangsan'},
{id:2,name:'lishi'},
{id:3,name:'wangwu'}
]
},
methods:{ //顾名思义，上边绑定的方法就是在这里声明的
handleClick(){
alert('你还真点啊!')
},
toBaidu(id){
alert(id)
}
}
});
</script>
</body>
</html>
v-on
7.v-bind 绑定到属性 缩写直接使用 :即可
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" :value="mes" :id='id'>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{
mes:'我是value',
id:'id'
},
});
</script>
</body>
</html>
v-bind
8.v-model 双向绑定 我很喜欢的东西
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
{{ mes }}
<input type="text" v-model='mes'>
</div>
<script>
var vm=new Vue({
el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
data:{
mes:'我是value',
},
});
</script>
</body>
</html>
v-model
常用的指令就这么多了,不要问我一个后端为什么学vue，活在当今社会下不会连工作都找不到,被逼的啊
转载于:https://www.cnblogs.com/Tiandaochouqin1/p/11480166.html
