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. in操作符

    // Arrays,数组:下标 in array,length也可以 var trees = new Array("redwood", "bay", " ...

  2. [leetcode] 7. Binary Tree Level Order Traversal II

    这次相对来讲复杂点,题目如下: Given a binary tree, return the bottom-up level order traversal of its nodes' values ...

  3. JKS与P12证书互转

    keytool -importkeystore -srckeystore cacerts -srcstoretype JKS -deststoretype PKCS12 -destkeystore k ...

  4. EAS 最大单据号获取

    BaseService using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...

  5. sqlcmd 执行SQL语句或没有足够的内存来执行脚本

    win+r命令提示框里面输入cmd sqlcmd -S . -U username -P password -d database -i url -S 数据库地址 -U 登录名称 -P 密码 -d 数 ...

  6. 开源一款强大的文件服务组件（QJ_FileCenter）（系列二 安装说明）

    系列文章 1. 开源一款强大的文件服务组件(QJ_FileCenter)(系列一) 2. 开源一款强大的文件服务组件(QJ_FileCenter)(系列二 安装说明) 3. 开源一款强大的文件服务组件 ...

  7. 数据与任务的并行---Parallel类

    Parallel类是对线程的抽象,提供数据与任务的并行性.类定义了静态方法For和ForEach,使用多个任务来完成多个作业.Parallel.For和Parallel.ForEach方法在每次迭代的 ...

  8. Android 文件读写高级

    往设备里写文件有几种选择,写在内存中,或SD卡中. 往内存里写好处是,可以写在 data/data/包名 文件夹里,而此文件是不可访问的(除非 root).这样可以增加文件的安全性,避免被误删.缺点也 ...

  9. [iOS笔试600题]一、语法篇（共有147题）

    [A]1. @property 的作用是申明属性及真特性?［判断题］ A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?［判断题］ ...

  10. 「工具」三分钟了解一款在线流程绘制工具：Whimsical

    Whimsical 是一款在线流程绘制工具,只需要一个浏览器就随时随地绘制精美的流程图.除了流程图(Flowcharts)功能,官方还推出了线框图(Wireframes).便利贴(Sticky Not ...