前端主流框架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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
node.js基础知识小结
Feb 26 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
pandas如何处理缺失值
2019/07/31 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python原始套接字编程实例解析
2020/01/29 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
体育教师自我鉴定
2014/02/12 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
体育课外活动总结
2014/07/08 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
高中生学习计划书
2014/09/15 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
《分数的意义》教学反思
2016/02/20 职场文书