首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

前端主流框架vue学习笔记第一篇

Posted in Javascript onJuly 26, 2017

vue应该是前端主流框架中的集大成者，它吸取了knockout，angular，react设置avalon的经验，支持各种模式写法，入门很简单，从本章开始，会记录学习vue中的点点滴滴，以笔记的形式形成博文。

1、Hello World

和任何框架一样，使用前必先引入，我们这里直接使用cdn资源,创建index.html,编写如下代码：

<!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>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
  </script>
</body>
</html>

双击文件运行：

前端主流框架vue学习笔记第一篇

咱们分析一下上述代码，一句简单的{{message}}，就把数据绑定到到了dom中，我不会说好神奇，因为我熟悉angular，我知道angular也是简单一个指令就可以做到，这里和angular在使用上做一个类比，可以看到，在当前的代码中创建Vue对象的时候，传递的参数{el:'#id',data:{message:'hellow'}},其中el是vue挂载的元素，也就是作用的范围和anglar中ng-app的概念类似，都是创建一个根作用域，data对象可以类比angular中的$scope,$scope对象在angular中是连接controller和view的桥梁，那么data对象就是代理vue对象中数据和template的桥梁。

2、TODO LIST

由于有angular的经验，不会按部就班的过vue的文档，那样也没什么意思，这里以todolist作为Hello world的延伸，由于和angular类似的数据驱动的特点，我们不需要关注如何操作dom，我们只要设计viewmode即可，todolist，首先我们要有todo item ，所以

var todoItem=function(title,desc){
      this.title=title;
      this.desc=desc;
    }

另外todolist 是包含CURD的，所以我们需要一个表单，用来新增todoItem，基于此修改index.html,添加表单部分：

<div id="app">
    <form>
      <input type="text" v-model="title"> <br>
      <input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
  </div>

对上述代码做一下简单说明：v-model类似angular中ng-model，实现双向数据绑定，当然这里都是语法糖，vue内部做了很多工作，和angular2+中的[(ngModel)]类似，通过属性和事件实现了双向绑定效果，v-on:click="addItem()" ,其中v-on:是事件绑定指令，后面click是参数，可以缩写为@click="addItem()" ,可以类比angular中ng-click。

接下来，继续完善我们的viewmodel，todoitem已经设计完成，现在我们增加todolist结构，todolist中包含多个todoitem，是todoitem集合，在javascript中，体现为Array，基于此修改我们的代码，如下：

<!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>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>

<body>
  <div id="app">
    <form>
      title:<input type="text" v-model="title"> <br>
      desc:<input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
  </div>
  <script>
    var TodoItem = function (title, desc) {
      this.title = title;
      this.desc = desc;
    }
    new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

          console.log(JSON.stringify(this.todolist));
        }
      }
    })
  </script>
</body>

</html>

上述代码中出现了新的属性methods，和angular中不同，angular中事件也是绑定在$scope对象中的，只不过值是function而已，在vue中，对事件绑定和属性绑定进行了区分，分别使用data和methods代理，这样也在逻辑上更清晰，指责上更单一，所以事件绑定的回调函数都代理在methods中。

刷新页面，输入表单项，打开控制台可以看到输出项，运行结果入下图所示：

前端主流框架vue学习笔记第一篇

结果和我们预期的一样，接着我们把结果以列表的形式渲染出来，在angular中，我们一般通过ng-repeat指令，实现列表渲染，那么在vue中，有没有类似的指令呢，查文档发现的确有一指令叫做v-for，用法和作用都和ng-repeat类似，基于ng-repeat经验，我们使用v-for对todolist进行渲染，修改代码如下：

<table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
      </tr>
      <tr v-for="todoItem in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
      </tr>
    </table>

刷新运行，在表单中输入后，点击add todo item，向数组添加元素，及动态刷新了列表：

前端主流框架vue学习笔记第一篇

有添加就有删除，接下来，我们列表中，增加删除操作，和所有mvvm框架一样，我们考虑的出发点一定要规避dom，一定要从数据驱动UI的方式来思考，如果删掉UI项，那么根据数据驱动UI的理念那么就是删掉数组项，框架会自动帮我们处理dom，基于此修改代码如下：

<table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
        <th></th>
      </tr>
      <tr v-for="(todoItem,index) in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
        <td><input type="button" value="remove" @click="remove(index)" /></td>
      </tr>
    </table>

如果按照我们以前angular的使用经验，这里增加的方式有些区别，angular在ng-repeat中有内置变量$index,所以在事件处理上，我们就会通过$index作为数组项索引，事件绑定也会类似ng-click="remove($index)",在vue中就有些区别了，但是却符合数组遍历的方式，大家应该知道数组方法，比如map等，参数是一个function，其中包含两个参数，第一个参数是value，第二个参数是index是一个道理，从这一点上说，这样写很符合道理，因为这本身就是一个循环遍历，同样vue对象methods中添加remove方法。

new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

        },
        remove:function(index){
          this.todolist.splice(index,1);
        }

      }
    })

刷新运行页面：

前端主流框架vue学习笔记第一篇

完整代码如下：

<!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>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
  <style>
    table{
      margin-top: 5px;
      width:300px;
      border-collapse: collapse;
      border: 1px solid #ccc; 
    }
    table > tr>th,table>tr>td{
      height: 25px;
      line-height: 25px;
    }

  </style>
</head>

<body>
  <div id="app">
    <form>
      title:<input type="text" v-model="title"> <br>
      desc:<input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
    <table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
        <th></th>
      </tr>
      <tr v-for="(todoItem,index) in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
        <td><input type="button" value="remove" @click="remove(index)" /></td>
      </tr>
    </table>
  </div>
  <script>
    var TodoItem = function (title, desc) {
      this.title = title;
      this.desc = desc;
    }
    new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

        },
        remove:function(index){
          this.todolist.splice(index,1);
        }

      }
    })
  </script>
</body>

</html>

今天就先到这里，增删改查，查询和修改还没有，放在（二）中进行添加吧，敬请期待。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

前端主流框架vue学习笔记第一篇

- Author -

JerremyZhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JS异步文件上传（兼容IE8+）
Apr 02 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
关于vue.js组件数据流的问题
Jul 26 #Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 #Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 #Javascript
node实现简单的反向代理服务器
Jul 26 #Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 #Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
TextInputLayout(1) filter(1) reduce(2) Django(9) openEuler(1) EditText(1) Spring JPA(1) Spring Bean(1) Selenium(1) Tsmoothie(1)
You might like
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python异常学习笔记
2015/02/03 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python实现学生管理系统开发
2020/07/24 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
JAKO-O德国野酷台湾站：德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
员工自我鉴定
2013/10/09 职场文书
技术总监管理职责范本
2014/03/06 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
商场消防安全责任书
2014/07/29 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python