vue2.0教程

第一步永远是下载 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现同一页面多tab时的状态同步

    不同tab的js执行环境是不同的,因此变量不会共享,watcher也不会互相影响。

    lilugirl
  • 一个奇怪的absolute层被遮挡的问题

    后来发现原因很扯竟然是 父父级div 设置了 overflow: hidden;

    lilugirl
  • JavaScript模式 读书笔记二

    可以使用自己的构造函数,或使用一些类似Object(),Date(),String()的内置构造函数创建对象

    lilugirl
  • 码农西游 | 为啥有些大公司技术弱爆了

    代码写的一团糟,全是复制粘贴,连作者都没改,大家普遍不写注释,也不格式化,代码歪歪扭扭。

    良月柒
  • LTE参数-PA/PB总结

    LTE系统中可以配置RS功率、PDSCH功率,以达到优化性能、降低干扰的目的:

    用户6184845
  • 每天一算:Reverse String

    我们会在每天早上8点30分准时推送一条LeetCode上的算法题目,并给出改题目的动画解析以及参考答案,每篇文章阅读时长为五分钟左右。

    五分钟学算法
  • 《Java从入门到放弃》JavaSE入门篇:网络编程(入门版)

    十方上下
  • Echarts饼状图修改图例legend文字颜色和字体大小

    在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,需要将图例文字调成白色或者其他颜色,那么,修改这些的还是一句话,修改某个...

    祈澈菇凉
  • Python中萌新不知道的小魔法(一)

    萌新重新撸一遍基础,看看有哪些已经忘了的,顺便留下记录。 01 三引号 使用三重引号-("""或''')指定多行字符串。在三重引号中可以自由使用单引号和双...

    小歪
  • 在Email中的HTML规范

    目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

    javascript.shop

扫码关注云+社区

领取腾讯云代金券