组件化

  1. Vue.component('todo-items',{
  2.  
  3. });

定义组件，首先是标签的名字todo-items，然后里面还要配置一些选项，首先是我们的模板template，里面需要填入的内容使我们原生的html，这里我们中的是script标签添加，但是要注意它的type="text/x-template":

  1.     <script type="text/x-template" id="todo-items-template">
  2.         <ul class="list-group">
  3.             <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
  4.                 {{todo.title}}
  5.                 <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
  6.                 <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
  7.             </li>
  8.         </ul>
  9.     </script>

然后在组件定义中以id的方式声明：

  1.         Vue.component('todo-items',{
  2.             template:'#todo-items-template',
  3.         });

这样我们就可以使用todo-items这个标签了，刷新浏览器之后会报错

这是因为我们在组件里面没有获取到我们初始化的todos，这里可以通过属性传递进来：

  1. <todo-items :todos="todos"></todo-items>

这里的‘：’是必须的，这就是v-bind:的缩写，如果没有的话 这个todos就相当于字符串。还要去告诉我们的组件这个属性

  1. 　　　　　Vue.component('todo-items',{
  2.             template:'#todo-items-template',
  3.             props:['todos']
  4.         });

最后把我们组件的方法放进来，不然不可用

  1.     　　Vue.component('todo-items',{
  2.             template:'#todo-items-template',
  3.             props:['todos'],
  4.             methods:{
  5.                 deleteTodo(index){
  6.                     this.todos.splice(index,1);//删除下标为index的元素
  7.                 },
  8.                 toggleCompletion(todo){
  9.                     todo.completed = !todo.completed;
  10.                 }
  11.             }
  12.         });

这样就可以了，现在我们把我们的form也做成组件，创建x-template跟上面的一样，定义组件

  1.         Vue.component('todo-form',{
  2.             template:"#todo-add-form-template",
  3.         });

这样也是会报错

这里newTodo找不到事因为我们没有在组件中定义：

  1.         Vue.component('todo-form',{
  2.             template:"#todo-add-form-template",
  3.             props:['todos'],
  4.             data(){
  5.                 return {
  6.                     newTodo:{id:null,title:"",completed:false}
  7.                 }//定义一个obj;
  8.             },
  9.             methods:{
  10.                 addTodo(newTodo){//es6
  11.                     this.todos.push(newTodo);//把新的obj添加在数组中，
  12.                     this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
  13.                 },
  14.             }
  15.         });

这里跟我们在初始化vue中的data定义的不一样，这里是用一个函数定义的。这里依然也用到了我们的todos。在template中除了使用x-template也可以把html以字符串的形式传入。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>vue2.0</title>
  6.     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
  7.     <style type="text/css">
  8.         .completed{
  9.             color: green;
  10.             font-style: italic;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <nav class="navbar navbar-default navbar-static-top"></nav>
  16.     <div class="container" id="app">
  17.         <div class="row">
  18.             <div class="col-md-8 col-md-offset-2">
  19.                 <div class="panel panel-default">
  20.                     <div class="panel-heading">welcome Vue 2.0</div>
  21.                     <div class="panel-body">
  22.                         <input type="text" name="" v-model="message" class="form-control">
  23.                         <h1>{{message}} ({{todoCount}})</h1>
  24.                         <todo-items :todos="todos"></todo-items>
  25.                         <todo-form  :todos="todos"></todo-form>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31.     <script type="text/x-template" id="todo-items-template">
  32.         <ul class="list-group">
  33.             <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
  34.                 {{todo.title}}
  35.                 <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
  36.                 <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
  37.             </li>
  38.         </ul>
  39.     </script>
  40.     <script type="text/x-template" id="todo-add-form-template">
  41.         <form v-on:submit.prevent="addTodo(newTodo)">
  42.             <div class="form-group">
  43.                 <input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">
  44.             </div>
  45.             <div class="from-group">
  46.                 <button class="btn btn-success" type="submit">add todo</button>
  47.             </div>
  48.         </form>
  49.     </script>
  50.     <script type="text/javascript" src="js/vue.js"></script>
  51.     <script type="text/javascript">
  52.         Vue.component('todo-items',{
  53.             template:'#todo-items-template',
  54.             props:['todos'],
  55.             methods:{
  56.                 deleteTodo(index){
  57.                     this.todos.splice(index,1);//删除下标为index的元素
  58.                 },
  59.                 toggleCompletion(todo){
  60.                     todo.completed = !todo.completed;
  61.                 }
  62.             }
  63.         });
  64.         Vue.component('todo-form',{
  65.             template:"#todo-add-form-template",
  66.             props:['todos'],
  67.             data(){
  68.                 return {
  69.                     newTodo:{id:null,title:"",completed:false}
  70.                 }//定义一个obj;
  71.             },
  72.             methods:{
  73.                 addTodo(newTodo){//es6
  74.                     this.todos.push(newTodo);//把新的obj添加在数组中，
  75.                     this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
  76.                 },
  77.             }
  78.         });
  79.         new Vue({
  80.             el:'#app',
  81.             data:{
  82.                 message:'this is todos',
  83.                 todos:[
  84.                     {id:1,title:"learn vuejs",completed:false},
  85.                 ],
  86.             },
  87.             computed:{
  88.                 todoCount(){
  89.                     return this.todos.length;
  90.                 }
  91.             },
  92.         });
  93.     </script>
  94. </body>
  95. </html>

vue.js 2.0开发(3)的更多相关文章

  1. vue.js 2.0开发(2)

    如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...

  2. vue.js 2.0开发

    创建一个工程文件: css中引用的是bootstrap的css,js中就是vue,index页面: <!DOCTYPE html> <html> <head> &l ...

  3. vue.js 2.0开发(4)

    使用vue-cli,首先安装: npm install -g vue-cli 安装完了执行vue命令,会出现 vue init <template-name> <project-na ...

  4. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  5. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  6. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  7. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  8. 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...

  9. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

随机推荐

  1. 实现PageProcessor

    4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...

  2. Intent中的四个重要属性——Action、Data、Category、Extras

    Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的 ...

  3. c语言结构体&常指针和常量指针的区别

    结构体: 关系密切但数据类型不尽相同, 常指针和常量指针的区别: char * const cp : 定义一个指向字符的指针常数,即const指针,常指针. const char* p : 定义一个指 ...

  4. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  5. 托管到github上的网页图片在百度浏览器中显示不全

    这几天做了个较完整的网页放到github上,上传后看网页效果. 在Firefox浏览器中,显示正常. 在百度浏览器中,空了一大块位置(图片位置),偏偏只空了这一块,其它地方的图片都好好的. 点击f12 ...

  6. struts2 数据校验

    通过struts2中延续自xwork框架的validation.xml配置方式进行数据校验,因struts2 下存在三种请求参数的注入方式,固按照不同注入方式对validation.xml的配置进行总 ...

  7. 条件随机场(CRF) - 1 - 简介（转载）

    转载自:http://www.68idc.cn/help/jiabenmake/qita/20160530618222.html 首先我们先弄懂什么是"条件随机场",然后再探索其详 ...

  8. 99乘法表(bash)

    awk方式: # awk 'BEGIN{for(i=1;i<=9;i++){for(j=1;j<=i;j++){printf j"x"i"="i*j ...

  9. 【NOIP2009 T3】 最佳贸易 （双向SPFA）

    C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通行的道 ...

  10. 『U3D学习』破坏神回忆图<二>技能系统