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. write/read/send/receive函数比较

    建立好TCP连接后,就可以把得到的套接字当做文件描述符来使用,由此,联系到网络程序里的基本读写函数,write.read: l write函数: Ssize_t write(int fd,const ...

  2. Java Web系列：Spring MVC基础

    1.Web MVC基础 MVC的本质是表现层模式,我们以视图模型为中心,将视图和控制器分离出来.就如同分层模式一样,我们以业务逻辑为中心,把表现层和数据访问层代码分离出来是一样的方法.框架只能在技术层 ...

  3. jenkins修改时区

    查看jenkins目前的时区 访问http://your-jenkins/systemInfo,查看user.timezone变量的值 默认是纽约时间 修改时区 查https://wiki.jenki ...

  4. 10.05 最初对Linux的了解，对Shell的认识

    linux的起源:UNIX,代码开源,可以得到源代码,然后自己编译,通过以后可以运行程序. 特点:免费的;兼容POSIX1.0标准;多用户,多任务系统;良好的用户界面;提供了图形界面;支持多种文件系统 ...

  5. Linq与数据库的连接显示查询(一)

    使用linq查询sql数据库是首先需要创建一个 linq  to  sql 类文件 创建linq  to  sql的步骤: 1在Visual  Studio 2015开发环境中建立一个目标框架 Fra ...

  6. leetcode 移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  7. 数据库工具SQLite Expert Personal的简单使用

    官方网站: sqliteexpert官方网址 - SQLite administration | SQLite Expert 先使用SQLite Expert Personal熟悉SQLite语句 插 ...

  8. Spring-初识Spring框架-IOC控制反转（DI依赖注入）

    ---恢复内容开始--- IOC :控制反转 (DI:依赖注入)使用ioc模式开发 实体类必须有无参构造方法1.搭建Spring环境下载jarhttp://maven.springframework. ...

  9. Windows Python Extension Packages

    备注: 1.先要安装wheel库:pip install wheel 2.下载wheel,切换至下载路径,然后安装:pip install wheel库名.whl Windows Python Ext ...

  10. Chrome 中删除单条浏览记录

    悲伤...之前用非隐私窗口观看了小电影.于是打开 chrome://settings/ ...... 现在才知道 windows 上使用 shift + del 即可删除该浏览记录 ....... 以 ...