前端主流框架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添加String.Format方法
Aug 11 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
javascript实用方法总结
Feb 06 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
nodejs开发环境配置与使用
2014/11/17 NodeJs
js+jquery常用知识点汇总
2015/03/03 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python版本单链表实现代码
2018/09/28 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
怎样写好自我评价呢?
2014/02/16 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
古诗之感恩老师
2019/10/24 职场文书