前端主流框架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>

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

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

Javascript 相关文章推荐
JavaScript运算符小结
Jun 03 Javascript
Node.js学习入门
Jan 03 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
JS中移除非数字最多保留一位小数
May 09 Javascript
vuex入门最详细整理
Mar 04 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
关于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
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python 连连看连接算法
2008/11/22 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python循环语句中else的用法总结
2016/09/11 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python实现函数极小值
2019/07/10 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
小学三年级学生评语
2014/04/22 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL