Python学习二十八周（vue.js）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python学习二十八周（vue.js）相关的知识，希望对你有一定的参考价值。
目录：
内容：
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标签功能属性
- v-model 一般表单元素（input） 双向数据绑定（如果有了两个同样的input，修改其中一个另外一个内容也跟着修改）
<!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>
- 循环 v-for：
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>
以上是关于Python学习二十八周（vue.js）的主要内容，如果未能解决你的问题，请参考以下文章