vuejs入门备忘&&用vuecli构建应用
vuejs框架入门
mvvm图例
这张图足以说明MVVM的核心功能,在这三者里面,ViewModel无疑起着重要的桥梁作用。
- 一方面,通过ViewModel将Model的数据绑定到View的Dom元素上面,当Model里面的数据发生变化的时候,通过ViewModel里面数据绑定的机制,触发View里面Dom元素的变化;
- 另一方面,又通过ViewModel来监听View里面的Dom元素的数据变化,当页面上面的Dom元素发生变化的时候,ViewModel通过Dom树的监听机制,触发对应的Model的数据变化。
一、最简单的vuejs应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"> <h1>姓名:{{Name}}</h1> <h1>年龄:{{Age}}</h1> <h1>学校:{{School}}</h1> </div> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript"> //Mode var data={ Name:"yjw", Age:100, School:"启二" } //ViewModel var vm = new Vue({ el:"#app", data:data }) </script> </body> </html>
其中 el:表示绑定的Dom元素,此例子中表示的是父级的Dom元素。
data:需要绑定的数据Model。
二、双向数据绑定
通过v-model 实现双向数据绑定 如 编辑姓名:<input type="text" v-model="Name" />
三、简单的基于vuejs增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tabel</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <style> th,td{text-align: center;} ul{margin:0; padding: 0;} .box{width: 800px; height: 600px; float: left; margin-left: 100px;} .box .breadcrumb{margin-bottom:0;} </style> </head> <body> <div id="app" class="box"> <ul class="breadcrumb"> <li><a href="#">用户管理</a> <span class="divider">/</span></li> </ul> <table class="table table-bordered table-striped text-center"> <thead> <tr> <th>name</th> <th>age</th> <th>school</th> <th>back</th> <th>option</th> </tr> </thead> <tbody> <template v-for="row in rows"> <tr> <td>{{row.Name}}</td> <td>{{row.Age}}</td> <td>{{row.School}}</td> <td>{{row.Back}}</td> <td><a href="#" v-on:click="Edit(row)">编辑</a> <a href="#" v-on:click="Del(row.Id)">删除</a></td> </tr> </template> <tr> <td><input class="form-control" type="text" v-model="rowtemplate.Name"></td> <td><input class="form-control" type="text" v-model="rowtemplate.Age"></td> <td><input class="form-control" type="text" v-model="rowtemplate.School"></td> <td><input class="form-control" type="text" v-model="rowtemplate.Back"></td> <td><button class="btn btn-primary" v-on:click="Save">保存</button></td> </tr> </tbody> </table> </div> <script src="js/vue.min.js"></script> <script> var data = { rows:[ {Id:1,Name:'asdfg',Age:20,School:'q2',Back:'asd'}, {Id:2,Name:'asdfg',Age:30,School:'q2',Back:'asd'}, {Id:3,Name:'asdfg',Age:40,School:'q2',Back:'asd'}, {Id:4,Name:'asdfg',Age:50,School:'q2',Back:'asd'}, {Id:5,Name:'asdfg',Age:60,School:'q2',Back:'asd'} ], rowtemplate:{Id:0,Name:'',Age:'',School:'',Back:''} } var v = new Vue({ el:"#app", data:data, methods:{ Edit:function(row){ this.rowtemplate = row; }, Save:function(){ if(this.rowtemplate.Id === 0){ this.rowtemplate.Id = this.rows.length+1; this.rows.push(this.rowtemplate); } }, Del:function(id){ for(var i=0; i<this.rows.length;i++){ if(this.rows[i].Id == id){ this.rows.splice(i,1); } } } } }) </script> </body> </html>
---------------------------------------
应用vue-cli构建应用
在使用vue-cli之前我们需要安装node.js,利用其提供的npm命令来安装vue-cli。安装node.js只需去其官网下载软件并安装即可,地址为:https://nodejs.org/en/
安装完成之后我们打开电脑的cmd命令行工具依次输入上图中的命令:
(1)npm install -g vue-cli:全局安装vue-cli
(2)vue init webpack my-project: 利用vue-cli在目录地址生成一个基于webpack的名为’my-project‘的Vue项目文件及目录
(3)cd my-project:打开刚刚创建的文件夹
(4)npm intall:安装项目所依赖的包文件
(5)npm run dev:利用本地node服务器在浏览器中打开并浏览项目页面
这样我们的一个基于webpack的vue项目目录就构建好了。