标签:ons device charset 实例 gen idt cmd bsp 生成
1.安装node
2.node install nrm -g
3.nrm list
4.nrm use taobao
1.创建一个空项目
2.打开cmd
npm init -y
npm install vue --save
<!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> </head> <body> <div id="app"> <input type="text" v-model="number" > <h2>{{name}} create the first vue project</h2><br> <h2>{{number}}个小页</h2><br> <button type="button" @click="addNumber()">点我</button> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> //生成一个vue实例 var app=new Vue({ el:"#app", data:{ name:"steve yu", number:1 }, created(){ this.name="lll" }, methods:{ addNumber(){ app.number++; console.log("加了"); } } }) </script> </body> </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> </head> <body> <div id="app"> <span v-text="name"></span><br> <span v-html="name"></span> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> var vu=new Vue({ el:"#app", data:{ name:"<h1>lala</h1>", age:15 } }) </script> </body> </html>
<div id="app"> <ul> <li v-for="(user,index) in users"> {{index}} - {{user.name}} : {{user.gender}} : {{user.age}} </li> </ul> </div>
<div id="app"> <!--事件中直接写js片段--> <button v-on:click="show = !show">点击切换</button><br/> <h1 v-if="show"> 你好 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ show:true } }) </script>
标签:ons device charset 实例 gen idt cmd bsp 生成
原文地址:https://www.cnblogs.com/littlepage/p/11409954.html