文档章节

vue2.0教程

lilugirl
 lilugirl
发布于 2016/11/15 14:10
字数 636
阅读 79
收藏 3

第一步永远是下载 vue.js 

或者使用CDN <script src="https://unpkg.com/vue/dist/vue.js"></script>

第一节 简单的数据绑定

  • vue的初始化
  • el 和 data的用法
  • v-for的用法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    todo list

  <ul>
    <li v-for="todo in todos">{{todo.title}}</li>
  </ul>
  </div>

  <script>
     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit'},
           {id:2,title:'my to do lsit2'}
         ]
       }
     });
  </script>
</body>
</html>

第二节 含form表单的双向绑定

  • v-bind的用法
  • v-model的用法
  • v-on的用法
  • methods的用法
  • computed的用法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
  .completed{
    color:green;
    text-decoration:line-through;

  }
  .btn-danger{
    background:yellow;
  }
  .btn-success{
    background:green;
  }
  </style>
</head>
<body>
  <div id="app">
    <h1>my todo list {{todoCount}}</h1>

  <ul>
    <li v-for="(todo,index) in todos" v-bind:class="{'completed':todo.completed}">{{todo.title}} <button v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed? 'btn-danger':'btn-success']">{{todo.completed? 'undo':'complete'}}</button>  <button v-on:click="deleteTodo(index)">delete</button></li>
  </ul>
  <form v-on:submit.prevent="addTodo(newTodo)">
    <input type="text" v-model="newTodo.title">
    <button type="submit">add</button>
  </form>
  </div>

  <script>
     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit',completed:false},
           {id:2,title:'my to do lsit2',completed:true}
         ],
         newTodo:{id:null,title:''}
       },
       computed:{
         todoCount(){
           return this.todos.length;
         }
       },
       methods:{
         addTodo(newTodo2){
           this.todos.push(newTodo2);
           this.newTodo={id:null,title:'',completed:false}
         },
         deleteTodo(index){
           this.todos.splice(index,1);
         },
         toggleCompletion(todo2){
           todo2.completed=!todo2.completed;
         }
       }
     });
  </script>
</body>
</html>

第三节 组件的使用

  • Vue.component的定义和使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
  .completed{
    color:green;
    text-decoration:line-through;

  }
  .btn-danger{
    background:yellow;
  }
  .btn-success{
    background:green;
  }
  </style>
</head>
<body>
  <div id="app">
    <h1>my todo list {{todoCount}}</h1>

   <todo-items :todos="todos"></todo-items>
   <todo-form :todos="todos"></todo-form>

  </div>
 <script type="text/x-template" id="todo-items-template">
   <ul>
     <li v-for="(todo,index) in todos" v-bind:class="{'completed':todo.completed}">{{todo.title}} <button v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed? 'btn-danger':'btn-success']">{{todo.completed? 'undo':'complete'}}</button>  <button v-on:click="deleteTodo(index)">delete</button></li>
   </ul>
 </script>

 <script type="text/x-template" id="todo-form-template">

   <form v-on:submit.prevent="addTodo(newTodo)">
     <input type="text" v-model="newTodo.title">
     <button type="submit">add</button>
   </form>

 </script>

  <script>
     Vue.component('todo-items',{
       template:'#todo-items-template',
       props:['todos'],
       methods:{

         deleteTodo(index){
           this.todos.splice(index,1);
         },
         toggleCompletion(todo2){
           todo2.completed=!todo2.completed;
         }
       }
     });

     Vue.component('todo-form',{
       template:'#todo-form-template',
       props:['todos'],
       data(){
         return {
            newTodo:{id:null,title:''}
         }
       },
       methods:{
         addTodo(newTodo){
           this.todos.push(newTodo);
           this.newTodo={id:null,title:'',completed:false}
         }

       }

     });

     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit',completed:false},
           {id:2,title:'my to do lsit2',completed:true}
         ],

       },
       computed:{
         todoCount(){
           return this.todos.length;
         }
       }

     });
  </script>
</body>
</html>

第四节 使用 Vue 脚手架工具进行组件化开发

下载安装

github地址 https://github.com/vuejs/vue-cli

根据提示 执行命令行 

npm install -g vue-cli

然后在适当的目录下执行

vue init webpack vuejs-2.0-cli

如果你发现命令过程中遇到了错误,一时半会儿解决不了,那么就放弃命令下载吧

直接 下载文件包呗

将下载的文件解压缩移动到你合适的目录下 

进入该项目目录 执行命令

npm install

 

© 著作权归作者所有

lilugirl
粉丝 97
博文 445
码字总数 128310
作品 0
杨浦
程序员
私信 提问
Vue学习路径-轻松从基础到实战

里边全部是vue的免费视频,全算下来有100多集。希望可以帮助前端小伙伴学习Vue。 学习一直属于孤独者,任何伟大的发明家都忍受过寂寞和无助,但他们最终走了出来。也许你刚来到本站,也许你刚...

技术胖
2018/08/27
0
0
VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方
2018/01/09
0
0
晚黎/iDashboard

iDashboard - Laravel5.3基本的权限管理系统 当前分支为Laravel版本~,Vue2.0版本戳这里 ,Vue2.0只完成了部分,用户管理,权限管理以及角色管理,其他的都还没有做。本人时间有限,重复的增删...

晚黎
2016/11/07
0
0
Vue2.0学习(四)--组件的继承与扩展

如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和e...

浪里行舟
2018/08/18
0
0
十年web老兵整理的web前端视频

HTML&CSS&DIV 链接:https://pan.baidu.com/s/1nv23UT7 密码:x0xh 链接:https://pan.baidu.com/s/1boEJuRt 密码:nkif 链接:https://pan.baidu.com/s/1nuTYcGT 密码:9jwe JAVASCRIPT 链接:http......

技术金三胖
2018/01/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部