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> &nbsp;&nbsp; <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构建应用的更多相关文章

  1. vux 入门备忘大佬多指点

    一.安装node.js https://nodejs.org/en/ 这样就可以使用npm喽 二.安装vux 安装vux npm install vux --save 安装vux-loader npm ...

  2. vux Tabbar组件入门备忘大佬多指点

    一.Tabbar引入及使用 1.新创建vue文件 2.在vue文件中添加插件 <template> <div> <tabbar style="position: ...

  3. spark入门备忘---1

    import org.apache.spark.{SparkContext, SparkConf} import scala.math.random /** * 利用spark进行圆周率的计算 */ ...

  4. Webstorm常用快捷键备忘(Webstorm入门指南)

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  5. Haxe UI框架StablexUI的使用备忘与心得(序)

    最近在手上的项目开发中,从原来的使用Sprite全手写UI,开始逐步使用StablexUI,感觉还是相当不错的,强大.高效.轻量.灵活,非常适应我当前的实际需求. 不过作为小种语言的一个小众第三方开源 ...

  6. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  7. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  8. AngularJS之备忘与诀窍

    译自:<angularjs> 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的. ...

  9. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

随机推荐

  1. C++ 学习笔记(五)类的知识小结一(重载,友元函数,静态成员,new)

    ---恢复内容开始--- 学习C++类知识点还是挺多的,每个知识点学习的时候都觉得这个知识点咋那么多东西,其实真学完了再回头看好像也就那么点.这次用程序写一个黑猫揍白猫的故事总结一下这段时间学习的零碎 ...

  2. 201621123080《Java程序设计》第三周学习总结

    Week03-面向对象入门 1. 本周学习总结 2. 书面作业 1.以面向对象方式改造数据结构作业'有理数'(重点) 1.1 截图你主要代码(需要在程序中出现你的学号和姓名)并粘贴程序的git地址. ...

  3. vue.js笔记1.0

    事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...

  4. OC8051项目启动

  5. 如何把list当成栈或者队列来用

    在python里,list和在C.java里的数组差不多,但是python里的list是可变长的,而且python语言也支持倒叙读取,如list[-1]可以读取最后一个元素.但这还不是最厉害的,lis ...

  6. 模拟ajax请求爬取微博

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/9/26 10:26 # @Author : Sa.Song # @Desc ...

  7. Java-downloadFileByLink

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.ByteArrayOutputStr ...

  8. vagrant 安装ubuntu12.04 64 bit

    1 下载用于ubuntu 12.04 用于vagrant的镜像,虚拟机是virtualbox $ wget http://files.vagrantup.com/precise64.box jb@e3 ...

  9. selenium2用AutoIt上传文件

    1.标签是input,如下图所示: WebElement e1= driver.findElement(By.id("load"));//输入要上传文件的地址e1.sendKeys ...

  10. splay模板三合一 luogu2042 [NOI2005]维护数列/bzoj1500 [NOI2005]维修数列 | poj3580 SuperMemo | luogu3391 【模板】文艺平衡树(Splay)

    先是维修数列 题解看这里,但是我写的跑得很慢 #include <iostream> #include <cstdio> using namespace std; int n, ...