标签：doctype none 目录 back isp script html标签 div put
目录：
内容：
1、一个例子简单实用vue：
下载vue.js（这里实用1.0.21版本）
编写html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: ‘#box‘,//el代码element的缩写，定位元素 data: { //data中编写数据 msg: ‘welcome vue!‘ } }); }; </script> </head> <body> <div id="box"> {{msg}} <!--通过{{}}方式来调用vue的表现 --> </div> </body> </html>
2、常见指令：
指令：扩展html标签功能属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script> window.onload = function () { new Vue ({ el: ‘#box‘, //无论class id 标签都可以 data:{ msg: ‘welcome vue!‘, msg2: 12, msg3: true, arr:[‘apple‘,‘bananan‘,‘orange‘], json: {a:"apple",b:"banana",c:"orange"} } }); } </script> </head> <body> <div id="box"> <input type="text" v-model="msg"> <input type="text" v-model="msg"> <br> {{msg2}} <br> {{msg3}} <br> {{arr}} <br> {{json}} </div> </body> </html>
1、数组：
v-for=“value in arr” 如果想到得到index使用{{$index}}
2、json：
循环json和arr类似
可以使用{{$index}} {{$key}}方式,也可以使用python字典循环方式类似显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script> window.onload = function () { new Vue ({ el: ‘#box‘, //无论class id 标签都可以 data:{ arr:[‘apple‘,‘banana‘,‘orange‘], json: {a:"apple",b:"banana",c:"orange"} } }); } </script> </head> <body> <div id="box"> <ul> <!--需要数组v-for 如果想得到数组的index可以使用{{$index}} --> <li v-for="value in arr"> {{value}} {{$index}} </li> </ul> <hr> <ul> <!-- 循环json和arr类似 可以使用{{$index}} {{$key}}方式 --> <li v-for="value in json"> {{value}} {{$index}} {{$key}} </li> </ul> <hr> <ul> <!-- 使用python字典循环方式类似显示 --> <li v-for="(k,v) in json"> {{k}} {{v}} {{$index}} {{$key}} </li> </ul> </div> </body> </html>
标签：doctype none 目录 back isp script html标签 div put
原文地址：http://www.cnblogs.com/xiaopi-python/p/7748600.html
