-
下载vue.js
-
首先需要在本机安装node.js
-
使用命令行进入到需要下载的文件夹下
-
使用如下的命令下载vue
npm install vue
-
然后就会在所在的路径下面找到vue的文件,如下图
-
在node_modules\vue\dist下就可以找到vue.js的文件
-
创建第一个vue的文件
<!DOCTYPE html> <html> <head> <title>第一个vue页面</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <div>这里是模板内容{{msg}}</div> <div>111</div> </div> `, //template下只能有一个根节点 data:function(){ return { msg:'Hello Vue!' } } }) </script> </body> </html>
-
指令:
- 在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫指令
- 在vue中v-xxx就是vue的指令
- 指令就是以数据去驱动DOM行为的,简化DOM操作
-
常用的指令
- v-text,元素的innerText,必须是双标签
- v-html, 元素的innerHtml
- v-if, 判断是否插入 append remove
- v-else-if
- v-else
- v-show,判断是否隐藏,display:none
- v-for
- 数组 item, index
- 对象value, key, index
-
v-text的使用实例
<!DOCTYPE html> <html> <head> <title>v-text指令</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', template: ` <div> <div v-text='mytext'></div> </div> `, data:function(){ return { mytext: '<h1>这里是v-text</h1>' } } }) </script> </body> </html>
-
v-html的使用示例
<!DOCTYPE html> <html> <head> <title>v-html指令</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div v-html='myhtml'></div> `, data: function(){ return { myhtml: '<h2>这里是v-html</h2>' } } }) </script> </body> </html>
-
v-if使用示例
<!DOCTYPE html> <html> <head> <title>v-if指令</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <div v-html='myhtml'></div> </hr> <button v-if='checkvif'>测试v-if</button> </div> `, data: function(){ return { myhtml: '<h1>这里是v-html</h1>', checkvif: true } } }) </script> </body> </html>
-
v-if, v-else-if, v-else使用示例
<!DOCTYPE html> <html> <head> <title>v-if指令</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <div v-html='myhtml'></div> </hr> <button v-if='num==1'>测试v-if</button> <button v-else-if='num==2'>测试v-else-if</button> <button v-else='num==3'>测试v-else</button> </div> `, data: function(){ return { myhtml: '<h1>这里是v-html</h1>', num: 1 } } }) </script> </body> </html>
-
v-show使用示例
<!DOCTYPE html> <html> <head> <title>v-show指令(隐藏与展示)</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <div v-html='myhtml'></div> </hr> <div v-show='checkshow'>这里是v-show</div> </div> `, data: function(){ return { myhtml: '<h1>这里是v-html</h1>', checkvif: true, num: 1, checkshow:false } } }) </script> </body> </html>
-
v-for的使用示例(数组):
<!DOCTYPE html> <html> <head> <title>v-for指令(数组)</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <div v-html='myhtml'></div> </hr> <ul> <li v-for='(item, index) in arrayFor'>{{ index }} - {{ item }}</li> </ul> </div> `, data: function(){ return { myhtml: '<h1>这里是v-html</h1>', arrayFor: ['篮球', '足球', '乒乓球', '羽毛球'] } } }) </script> </body> </html>
-
v-for(对象)使用示例
<!DOCTYPE html> <html> <head> <title>v-for指令(对象)</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', template: ` <div> <div v-html='myhtml'></div> </hr> <ul> <li v-for='(oj, key) in objFor'>{{ key }} - {{ oj }}</li> </ul> </div> `, data: function(){ return { myhtml: '<h1>这里是v-html</h1>', objFor: {name:'张三', age:15, phone:'18699999999'} } } }) </script> </body> </html>
vue的入门与指令
最新推荐文章于 2023-05-17 19:46:30 发布