Vue 入门
Posted littlepage
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 入门相关的知识，希望对你有一定的参考价值。
安装更换node源
1.安装node
2.node install nrm -g
3.nrm list
4.nrm use taobao
创建一个Vue项目&v-model双向绑定
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>
v-html&v-text
<!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>
v-for
<div id="app"> <ul> <li v-for="(user,index) in users"> index - user.name : user.gender : user.age </li> </ul> </div>
v-show
<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>
以上是关于Vue 入门的主要内容，如果未能解决你的问题，请参考以下文章