AddItemComponent.vue

   <template>

   <div id="add-item-template">

     <div class="input-group">

       <input @keyup.enter="addItem" v-model="newItem" placeholder="add    shopping    list    item" type="text" class="form-control">

       <span class="input-group-btn">

         <button @click="addItem" class="btn    btn-default" type="button">Add!</button>

       </span>

     </div>

   </div>

   </template>

   <script>

   export default {

   props:['items'],

   data: function () {

     return {

       newItem: ''

     }

   },

   methods: {

     addItem: function () {

       console.log(this.items)

       var text;

       text = this.newItem.trim();

       if (text) {

         this.items.push({

           text: text,

           checked: false

         });

         this.newItem = "";

       }

     }

   }

   }

   </script>

ChangeTitleComponenet.vue

   <template >

     <div id="change-title-template">

       <em>Change the title of your shopping list here</em>

       <input :value="value" v-on:input="onInput" />

     </div>

   </template>

   <script>

   export default {

   props: ['value'],

   methods: {

     onInput: function (event) {

       this.$emit('input', event.target.value)

     }

   }

   }

   </script>

ItemComponent.vue

 <template>

   <div id="item-template">

     <li :class="{    'removed':    item.checked    }">

       <div class="checkbox">

         <label>

           <input type="checkbox" :checked='item.checked'   v-on:change="onInput">

           <span>

             {{ item.text }}</span>

         </label>

       </div>

     </li>

   </div>

 </template>

 <script>

 export default {

   model: { props: 'checked', event: "change" },

   props: ["item",'checked'],

   methods: {

     onInput() {

       this.$emit("change", event.target.checked);

     }

   }

 };

 </script>

 <style scoped>

 .removed {

   color: gray;

 }

 .removed span {

   text-decoration: line-through;

 }

 </style>

ItemsComponent.vue

   <template id="items-template">

   <div id="items-template">

     <ul>

       <item-component v-model="item.checked" v-for="(item, index)    in    items" :item="item" :key="index">

       </item-component>

     </ul>

   </div>

   </template>

   <script>

 import ItemComponent from "./ItemComponent";

 export default {

   props: ["items"],

   components: {

     ItemComponent

   }

 };

 </script>

 <style scoped>

 ul li {

   list-style-type: none;

 }

 ul li span {

   margin-left: 5px;

 }

 </style>

App.vue

 <template>

   <div id="app" class="container">

     <h2>{{ title }}</h2>

     <add-item-component :items="items"></add-item-component>

     <items-component :items="items"></items-component>

     <div class="footer">

       <hr/>

       <change-title-component v-model="title"></change-title-component>

     </div>

   </div>

 </template>

 <script>

 import AddItemComponent from './components/AddItemComponent'

 import ItemsComponent from './components/ItemsComponent'

 import ChangeTitleComponent from './components/ChangeTitleComponent'

 export default {

   components:{

     AddItemComponent,

     ItemsComponent,

     ChangeTitleComponent

   },

   data() {

     return {

         items: [

           {

             text: "Bananas",

             checked: true

           },

           {

             text: "Apples",

             checked: false

           }

         ],

         title: "My Shopping List",

         newItem: ""

     };

   }

 };

 </script>

 <style>

 .container {

   width: %;

   margin: 20px auto 0px auto;

 }

 .footer {

   font-size: .7em;

   margin-top: 40vh;

 }

 </style>

main.js

 // The Vue build version to load with the `import` command

 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

 import Vue from 'vue'

 import router from './router'

 //import ElementUI from 'element-ui'

 //import 'element-ui/lib/theme-chalk/index.css'

 import App from './App'

 Vue.config.productionTip = false

 //Vue.use(ElementUI)

 new Vue({

   el: "#app",

   components:{

     App

   },

   template:"<App />"

 });

index.html

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width,initial-scale=1.0">

   <title>learn1</title>

 </head>

 <body>

   <div id="app"></div>

 </body>

 </html>

Vue单文件模板实例的更多相关文章

  1. vue单文件组件实例2：简单单文件组件

    ​ Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...

  2. vue单文件组件实例1：简单单文件组件

    ​ HelloWorld.vue: <template> <div class="hello"> <h1>{{msg}}</h1> ...

  3. 基于VSCode的vue单文件组件模板设置---一次设置，可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  4. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  5. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  6. 如何手动解析vue单文件并预览？

    开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...

  7. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  8. VUE2 第六天学习--- vue单文件项目构建

    阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...

  9. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

随机推荐

  1. 企业搜索引擎开发之连接器connector（二十六）

    连接器通过监视器对象DocumentSnapshotRepositoryMonitor从上文提到的仓库对象SnapshotRepository(数据库仓库为DBSnapshotRepository)中 ...

  2. Ansible运维自动化工具

    1>Ansible 1>ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabri ...

  3. Android-自定义联系人快速索引

    效果图: 布局去指定 view.custom.shangguigucustomview.MyCustomIndexView 自定义View对象 <!-- 自定义联系人快速索引 --> &l ...

  4. Spring 事务管理案例

    事务管理简介   Spring 事务管理有两种方式:一种是编程式事务管理,即通过编写代码实现事物管理,包括定义事务的开始,程序正常执行后的事物提交,异常时进行的事务回滚.另一种是基于AOP技术实现的声 ...

  5. eclipse-->run as --> maven test 中文乱码

    其有一个配置参数forkMode,默认为once,即表示每次运行test时,新建一个JVM进程运行所有test. 这可能会导致乱码问题.首先将forkMode设置为never,即不新建.再运行mvn ...

  6. C#学习（1）：类型约束

    where T : class泛型类型约束 类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class T必须是一 ...

  7. SQL Server 数据库的分类和用户数据库文件组成

      数据库的分类       数据库分为两大类,一类是系统数据库:另一类是用户数据库,系统数据库我们一般使用的时候较少, 下面我们看看系统数据库包含哪些并分别有什么作用,如下图所示 用户数据库文件组成 ...

  8. Sql语法高级应用之六：如何在Sql语句中如何使用TRY...CATCH

    TRY...CATCH使用范例 BEGIN TRY //逻辑语句块 END TRYBEGIN CATCH //Catch异常处理块 SET @msg = ERROR_MESSAGE(); PRINT ...

  9. k8s service

    Service也是k8s的最小操作单元,是真实应用服务的抽象 Service通常用来将浮动的资源与后端真实提供服务的容器进行关联 Service对外表现为一个单一的访问接口,外部不需要了解后端的规模与 ...

  10. SQL语句优化 (二) （53）

    接上一部分 (4)如果不是索引列的第一部分,如下例子:可见虽然在money上面建有复合索引,但是由于money不是索引的第一列,那么在查询中这个索引也不会被MySQL采用. mysql> exp ...