“第一个Vue程序”的版本间的差异
来自CloudWiki
第1行: | 第1行: | ||
− | == | + | ==案例1== |
===引入vue文件=== | ===引入vue文件=== | ||
<nowiki> | <nowiki> | ||
第32行: | 第32行: | ||
}) | }) | ||
</script></nowiki> | </script></nowiki> | ||
− | == | + | ===全部代码=== |
<nowiki> | <nowiki> | ||
第62行: | 第62行: | ||
</nowiki> | </nowiki> | ||
+ | |||
+ | ==案例2== | ||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <script src="vue.js" type="text/javascript" charset="utf-8"> | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <title></title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="app"> | ||
+ | <h1>姓名:{{ Name }}</h1> | ||
+ | <h1>年龄:{{ Age }}</h1> | ||
+ | <h1>学校:{{ School }}</h1> | ||
+ | </div> | ||
+ | |||
+ | <script src="Content/vue/dist/vue.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | //Model | ||
+ | var data = { | ||
+ | Name: '小明', | ||
+ | Age: 18, | ||
+ | School:'光明小学', | ||
+ | } | ||
+ | |||
+ | //ViewModel | ||
+ | var vue = new Vue({ | ||
+ | el: '#app', | ||
+ | data: data, | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> |
2022年4月1日 (五) 07:49的版本
案例1
引入vue文件
<head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head>
视图层
<div id="app"> {{ message }} </div>
脚本
创建一个叫app的Vue对象,
绑定元素app ,赋值message 'Hello Vue'
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
全部代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
案例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <h1>姓名:{{ Name }}</h1> <h1>年龄:{{ Age }}</h1> <h1>学校:{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body> </html>