vue.js 2.0开发(3)
组件化
Vue.component('todo-items',{
});
定义组件，首先是标签的名字todo-items，然后里面还要配置一些选项，首先是我们的模板template，里面需要填入的内容使我们原生的html，这里我们中的是script标签添加，但是要注意它的type="text/x-template":
<script type="text/x-template" id="todo-items-template">
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
<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>
</li>
</ul>
</script>
然后在组件定义中以id的方式声明：
Vue.component('todo-items',{
template:'#todo-items-template',
});
这样我们就可以使用todo-items这个标签了，刷新浏览器之后会报错
这是因为我们在组件里面没有获取到我们初始化的todos，这里可以通过属性传递进来：
<todo-items :todos="todos"></todo-items>
这里的‘：’是必须的，这就是v-bind:的缩写，如果没有的话 这个todos就相当于字符串。还要去告诉我们的组件这个属性
Vue.component('todo-items',{
template:'#todo-items-template',
props:['todos']
});
最后把我们组件的方法放进来，不然不可用
Vue.component('todo-items',{
template:'#todo-items-template',
props:['todos'],
methods:{
deleteTodo(index){
this.todos.splice(index,1);//删除下标为index的元素
},
toggleCompletion(todo){
todo.completed = !todo.completed;
}
}
});
这样就可以了，现在我们把我们的form也做成组件，创建x-template跟上面的一样，定义组件
Vue.component('todo-form',{
template:"#todo-add-form-template",
});
这样也是会报错
这里newTodo找不到事因为我们没有在组件中定义：
Vue.component('todo-form',{
template:"#todo-add-form-template",
props:['todos'],
data(){
return {
newTodo:{id:null,title:"",completed:false}
}//定义一个obj;
},
methods:{
addTodo(newTodo){//es6
this.todos.push(newTodo);//把新的obj添加在数组中，
this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
},
}
});
这里跟我们在初始化vue中的data定义的不一样，这里是用一个函数定义的。这里依然也用到了我们的todos。在template中除了使用x-template也可以把html以字符串的形式传入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2.0</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style type="text/css">
.completed{
color: green;
font-style: italic;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top"></nav>
<div class="container" id="app">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">welcome Vue 2.0</div>
<div class="panel-body">
<input type="text" name="" v-model="message" class="form-control">
<h1>{{message}} ({{todoCount}})</h1>
<todo-items :todos="todos"></todo-items>
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
<script type="text/x-template" id="todo-items-template">
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
<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>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-add-form-template">
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-group">
<input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">add todo</button>
</div>
</form>
</script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('todo-items',{
template:'#todo-items-template',
props:['todos'],
methods:{
deleteTodo(index){
this.todos.splice(index,1);//删除下标为index的元素
},
toggleCompletion(todo){
todo.completed = !todo.completed;
}
}
});
Vue.component('todo-form',{
template:"#todo-add-form-template",
props:['todos'],
data(){
return {
newTodo:{id:null,title:"",completed:false}
}//定义一个obj;
},
methods:{
addTodo(newTodo){//es6
this.todos.push(newTodo);//把新的obj添加在数组中，
this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
},
}
});
new Vue({
el:'#app',
data:{
message:'this is todos',
todos:[
{id:1,title:"learn vuejs",completed:false},
],
},
computed:{
todoCount(){
return this.todos.length;
}
},
});
</script>
</body>
</html>
vue.js 2.0开发(3)的更多相关文章
- vue.js 2.0开发(2)
如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...
- vue.js 2.0开发
创建一个工程文件: css中引用的是bootstrap的css,js中就是vue,index页面: <!DOCTYPE html> <html> <head> &l ...
- vue.js 2.0开发(4)
使用vue-cli,首先安装: npm install -g vue-cli 安装完了执行vue命令,会出现 vue init <template-name> <project-na ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
随机推荐
- IOS中延迟执行的几种方法
前几天去国美在线面试,就遇到了上面的问题,当时是笔试,只写出来了第一种方法,现在整理了一下. //1.performSelector方法:在当前线程中执行的方法,使用默认模式,并延迟执行@select ...
- javascript原始数据类型compareto引用数据类型--近3天不太会的地方
ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...
- android 判断是否设置了锁屏密码
方式1:在小米note手机上测试,只能判断是否设置了图形解锁. android.provider.Settings.System.getInt(getContentResolver(), androi ...
- OpenMP编程总结表
本文对OpenMP 2.0的全部语法——Macro(宏定义).Environment Variables(环境变量).Data Types(数据类型).Compiler Directives(编译指导 ...
- 解决Android SDK Content Loader 0%的问题
在Android的开发过程中,应该说大多数人都遇到过此问题. 具体原因不得而知,在workspace中导入了太多的工程可能是其中一个原因. 网上有很多针对此问题的解决方法,对于我自己而言,下面两个方法 ...
- idea-生成key的Java代码
import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.Scanne ...
- hdu2348题解
又恬不知耻的开始写题解了,暑假到了,QAQ然而想我这样的弱逼是没有暑假的sad,还是老老实实刷题吧. 题目大意:给一个小车的宽度和长度和两条道路的宽度,判断小车能否通过. 思路:可以先看下面的图,我们 ...
- 初步认知java的方法
1.正确区分函数和方法: 面向对象的语言叫做方法,面向过程的语言叫做函数,两者的意义是一样的,只是叫法不同.java是面向对象的语言,所以用方法. 2.方法的定义: 就是有名字的代码段 3.方法的目的 ...
- 数论 UVALive 2756
这道题目考察的n个不同的数环形排列,每次相邻两个数交换位置,这样由正序转变成逆序所需操作的最小次数t. 公式:环形排列:t= n/2*(n/2 - 1)/2 + (n+1)/2* ((n+1)/2 - ...
- 在as3中使用protobuf
在最近参与开发的adobe air项目中,前后端的通信协议从XML.JSON再到protobuf,最后选择protobuf原因,主要是前后端维护protobuf协议就行了,同时还可以利用IDE做一些编 ...