vuejs框架入门

mvvm图例

这张图足以说明MVVM的核心功能,在这三者里面,ViewModel无疑起着重要的桥梁作用。

  • 一方面,通过ViewModel将Model的数据绑定到View的Dom元素上面,当Model里面的数据发生变化的时候,通过ViewModel里面数据绑定的机制,触发View里面Dom元素的变化;
  • 另一方面,又通过ViewModel来监听View里面的Dom元素的数据变化,当页面上面的Dom元素发生变化的时候,ViewModel通过Dom树的监听机制,触发对应的Model的数据变化。

一、最简单的vuejs应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>test</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <h1>姓名:{{Name}}</h1>
  10. <h1>年龄:{{Age}}</h1>
  11. <h1>学校:{{School}}</h1>
  12. </div>
  13. <script type="text/javascript" src="js/vue.min.js"></script>
  14. <script type="text/javascript">
  15. //Mode
  16. var data={
  17. Name:"yjw",
  18. Age:100,
  19. School:"启二"
  20. }
  21. //ViewModel
  22. var vm = new Vue({
  23. el:"#app",
  24. data:data
  25. })
  26. </script>
  27. </body>
  28. </html>

其中 el:表示绑定的Dom元素,此例子中表示的是父级的Dom元素。

  data:需要绑定的数据Model。

二、双向数据绑定

通过v-model 实现双向数据绑定 如 编辑姓名:<input type="text" v-model="Name" />

三、简单的基于vuejs增删改查

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tabel</title>
  6. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  7. <style>
  8. th,td{text-align: center;}
  9. ul{margin:0; padding: 0;}
  10. .box{width: 800px; height: 600px; float: left; margin-left: 100px;}
  11. .box .breadcrumb{margin-bottom:0;}
  12. </style>
  13. </head>
  14. <body>
  15. <div id="app" class="box">
  16. <ul class="breadcrumb">
  17. <li><a href="#">用户管理</a> <span class="divider">/</span></li>
  18. </ul>
  19. <table class="table table-bordered table-striped text-center">
  20. <thead>
  21. <tr>
  22. <th>name</th>
  23. <th>age</th>
  24. <th>school</th>
  25. <th>back</th>
  26. <th>option</th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. <template v-for="row in rows">
  31. <tr>
  32. <td>{{row.Name}}</td>
  33. <td>{{row.Age}}</td>
  34. <td>{{row.School}}</td>
  35. <td>{{row.Back}}</td>
  36. <td><a href="#" v-on:click="Edit(row)">编辑</a> &nbsp;&nbsp; <a href="#" v-on:click="Del(row.Id)">删除</a></td>
  37. </tr>
  38. </template>
  39. <tr>
  40. <td><input class="form-control" type="text" v-model="rowtemplate.Name"></td>
  41. <td><input class="form-control" type="text" v-model="rowtemplate.Age"></td>
  42. <td><input class="form-control" type="text" v-model="rowtemplate.School"></td>
  43. <td><input class="form-control" type="text" v-model="rowtemplate.Back"></td>
  44. <td><button class="btn btn-primary" v-on:click="Save">保存</button></td>
  45. </tr>
  46. </tbody>
  47. </table>
  48. </div>
  49.  
  50. <script src="js/vue.min.js"></script>
  51. <script>
  52. var data = {
  53. rows:[
  54. {Id:1,Name:'asdfg',Age:20,School:'q2',Back:'asd'},
  55. {Id:2,Name:'asdfg',Age:30,School:'q2',Back:'asd'},
  56. {Id:3,Name:'asdfg',Age:40,School:'q2',Back:'asd'},
  57. {Id:4,Name:'asdfg',Age:50,School:'q2',Back:'asd'},
  58. {Id:5,Name:'asdfg',Age:60,School:'q2',Back:'asd'}
  59. ],
  60. rowtemplate:{Id:0,Name:'',Age:'',School:'',Back:''}
  61. }
  62. var v = new Vue({
  63. el:"#app",
  64. data:data,
  65. methods:{
  66. Edit:function(row){
  67. this.rowtemplate = row;
  68. },
  69. Save:function(){
  70. if(this.rowtemplate.Id === 0){
  71. this.rowtemplate.Id = this.rows.length+1;
  72. this.rows.push(this.rowtemplate);
  73. }
  74. },
  75. Del:function(id){
  76. for(var i=0; i<this.rows.length;i++){
  77. if(this.rows[i].Id == id){
  78. this.rows.splice(i,1);
  79. }
  80. }
  81. }
  82. }
  83. })
  84. </script>
  85. </body>
  86. </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. Mybatis学习记录(3)

    1.输出映射和输入映射 Mapper.xml映射文件定义了操作数据库的sql,每个sql就是一个statement,映射文件是mybatis的核心. (1)parameterType(输入类型)   ...

  2. C#算术运算符

    一.C#算术运算符 C#语言的算术运算符主要用于数学计算中. 二.示例 using System;using System.Collections.Generic;using System.Linq; ...

  3. 01_1_jdom调用xml文件

    01_1_jdom调用xml文件 1. 导入jdom.jar包 2. xml文件内容 test.xml <?xml version="1.0" encoding=" ...

  4. vscode的eslint插件不起作用

    最近在用vue进行开发,但是vsCode中的eslint插件装上之后不起作用 1.vsCode打开“设置”,选择"settings.json" 2.输入一段脚本 "esl ...

  5. 【转】LDA-linear discriminant analysis

    分类问题也可以用降维来理解,比如一个D维的数据点x,我们可以采用下面的映射进行线性的降维, y=θTx 在计算出y后,就可以选择一个阈值h,来进行分类.正如我们在前面的PCA模型中看到的,降维会有信息 ...

  6. HashMap与ArrayMap(和SparseArray)的比较与选择

    HashMap与ArrayMap(和SparseArray)的比较与选择 2017年12月26日 06:04:38 阅读数:61 标签: androidjavahashmaparraymap数据结构 ...

  7. python--字符编码理解

    一.字符编码简史: 美国:1963年 ASCII (包含127个字符  占1个字节) 中国:1980年 GB2312 (收录7445个汉字,包括6763个汉字和682个其它符号) 1993年 GB13 ...

  8. python3 连接 mysql和mariadb的模块

    是pymysql python2中是MySQL-python sudo pip install pymysql 参考博客https://www.jb51.net/article/140387.htm

  9. Altium Designer入门学习笔记2:使用原创客3D元件库

    请自行淘宝购买: 元件库列表(2018年11月27日): 问题一:在项目库或已安装的库中找不到? 将"原创客"提供的文件全部添加到libraries中!"原创客" ...

  10. python能干什么?

    python能干什么? 网络爬虫 爬虫,指的是从互联网采集数据的程序脚本 . 爬天爬地爬空气 ,无聊的时候爬一爬吃鸡数据.b站评论,能得出很多有意思的结论.知乎有个很有意思的问题——"利用爬 ...