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. 原创：MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目

    说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...

  2. Replication--备份初始化需要还原备份么？

    测试场景:发布服务器:SQLVM6\SQL2订阅服务器:SQLVM5\SQL2分发服务器:SQLVM3\SQL2发布数据库:RepDB2订阅数据库:RepDB2发布:RepDB2_TB1 测试步骤:1 ...

  3. web开发有那些牛逼东西可以用

    1.squid 缓存网页 2.Pingdom 我使用Pingdom来验证Superexpert.com网站是否总是处在正常运行状态之中.你可以通过浏览“Pingdom.com”的方式来注册Pingdo ...

  4. tinymce与prism代码高亮实现及汉化的配置

    简单介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成.它对IE6+和Firefox1.5+都有着非常良好的支持.功能方强大,并且功能配置灵活简单.另一特点是加 ...

  5. [C#学习笔记]分部类和分部方法

    知识在于积累. 前言 好久没写博客了,因为在看<CLR via C#>的时候,竟然卡在了分部方法这一小节几天没下去.今天重新认真阅读,有些感悟,所以在此记录. 然后. 每天早晨第一句,&l ...

  6. .net core 自制错误日志

    前言 之前.net framework用的ErrorLog帮助类,对于监控错误形成日志,内容非常清晰,想在.net core2.2中继续用,但是有很多不一样的地方,所以想总结一下. 首先需要HttpC ...

  7. PHP 代码优化测试【Benchmark数据测试】

    由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 :  --> 点击这里 Benchmark测试之前我们先来了解Benchmark.直接下载:ht ...

  8. 微信小程序——扫码后提示“打开失败缺少ID”

    解决步骤: 进入通讯录tab->点击右上角添加朋友->搜索框输入:recover,拉到最底下选择小程序进行修复操作 参考:https://developers.weixin.qq.com/ ...

  9. Substrings(SPOJ8222) (sam(后缀自动机))

    You are given a string \(S\) which consists of 250000 lowercase latin letters at most. We define \(F ...

  10. API接口文档范例