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项目目录就构建好了。
vuejs入门备忘&&用vuecli构建应用的更多相关文章
- vux 入门备忘大佬多指点
一.安装node.js https://nodejs.org/en/ 这样就可以使用npm喽 二.安装vux 安装vux npm install vux --save 安装vux-loader npm ...
- vux Tabbar组件入门备忘大佬多指点
一.Tabbar引入及使用 1.新创建vue文件 2.在vue文件中添加插件 <template> <div> <tabbar style="position: ...
- spark入门备忘---1
import org.apache.spark.{SparkContext, SparkConf} import scala.math.random /** * 利用spark进行圆周率的计算 */ ...
- Webstorm常用快捷键备忘(Webstorm入门指南)
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...
- Haxe UI框架StablexUI的使用备忘与心得（序）
最近在手上的项目开发中,从原来的使用Sprite全手写UI,开始逐步使用StablexUI,感觉还是相当不错的,强大.高效.轻量.灵活,非常适应我当前的实际需求. 不过作为小种语言的一个小众第三方开源 ...
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...
- 中文代码示例之Vuejs入门教程(一)
原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...
- AngularJS之备忘与诀窍
译自:<angularjs> 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的. ...
- 利用 vue-cli 构建一个 Vue 项目
一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...
随机推荐
- Bootstrap历练实例：默认的列表组
Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...
- iOS 解决ipv6问题
解决ipv6的方法有很多种,由于现在国内的网络运营商还在使用ipv4的网络环境,所以appstore应用不可能大范围去修改自己的服务器, 而且国内的云服务器几乎没有ipv6地址. 这里附上苹果开发平台 ...
- MATLAB编程技巧
[摘要] MATLAB是一种科学计算语言,和C.Fortran等高级语言相类似,能方便的实现程序控制.以下介绍一点matlab编程的技巧. 嵌套计算 程序执行的速度取决于调用的子程序的个数和算法实现. ...
- chrome浏览器跳过(忽略)所有的js断点
在调试程序时我们经常通过打断点的方式来跟踪代码的执行流程,所以可能会在很多时候打很多断点,当我们知道了程序大概的执行流程之后,这时候断点就不太需要了.但是我们又不想马上把所有的断点清除掉,因为我们打的 ...
- vue之列表循环
文档:https://cn.vuejs.org/v2/guide/list.html 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变, ...
- uvm transaction modeling
1.what is transaction? network transactions tcp/ip wifi 3g/4g bus transactions amba-ahb/apb/axi pci/ ...
- python爬虫基础18-Chrome调试前端工具
01 Chrome调试 抓包工具原理 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具.使用开发者工具来重演,调试和剖析您的网站. 其中常用的有Elements(元 ...
- 安装repo
$ sudo apt-get install curl -y$ curl "http://android.git.linaro.org/gitweb?p=tools/repo.git;a=b ...
- Linux学习-额外(单一)核心模块编译
编译前注意事项 由于我们的核心原本就有提供很多的核心工具给硬件开发商来使用, 而硬件开发商也需要针对核心 所提供的功能来设计他们的驱动程序模块,因此, 我们如果想要自行使用硬件开发商所提供的模块 来进 ...
- Linux学习-备份的种类、频率与工具的选择
完整备份之累积备份 (Incremental backup) 还原的考虑 如果是完整备份的话.若硬件出问题导致系统损毁时,只要将完整备份拿出来,整个给他倾倒回去硬盘, 所有事情就搞定了!有些时候 (例 ...