费话不说,想看介绍的上官网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>
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>
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>
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>
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>
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>
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>
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>
常用的指令就这么多了,不要问我一个后端为什么学vue，活在当今社会下不会连工作都找不到,被逼的啊