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. TOAD连接ORACLE而不装ORACLE 客户端的方法

    TOAD连接ORACLE而不装ORACLE 客户端的方法 原来连接ORACLE总是要装ORACLE客户端,挺麻烦得,一方面要带ORACLE得盘,另一方面,装这么大得东西也让人很不爽. ORACLE好像 ...

  2. 配置ssh使用socks代理

    ssh -o ProxyCommand='nc -x 127.0.0.1:1080 %h %p' username@server

  3. asp:Repeater数据源为空时处理方式

    当Repeater的数据源为空时,会显示空白,界面不友好,以下方式可以简单处理. <asp:repeater runat="server" id="rplist2& ...

  4. 杭州.Net 相关大公司，希望对大家有帮助

    本人目前大四,还在实习.北京工作辞职后,打算回杭州看看.发现杭州的大公司相对北京好少啊,招.Net相关的公司就更少了... (我认为刚毕业生还是去大公司比较靠谱,一方面也是实力的体现)大学生,而且之前 ...

  5. WPF透明窗体不支持缩放解决方案

    方案一 WPF中的无边框透明窗体,由于没有边并且透明,窗体无法进行缩放操作,今天来讲解如何解决这个问题. 先说一下思路,我们先手为该窗体添加4个边,4个角用于缩放操作,然后再为他们写事件,完成拖放操作 ...

  6. java线程池(一)

    自JDK5之后,Java推出了一个并发包,java.util.concurrent,在Java开发中,我们接触到了好多池的技术,String类的对象池.Integer的共享池.连接数据库的连接池.St ...

  7. python--基础数据类型 set集合

    一.set集合 set集合是python的一个基本数据类型,一般不是很常用.set中的元素是不重复的.无序的.里面的元素必须是可hash的(int, str, tuple, bool) 注意:   s ...

  8. docker的介绍以及常用命令

    一.docker的介绍 1. Docker是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚 ...

  9. Nginx + uWSGI 配置django---终极版

    好开森,配置了差不多一天的项目,终于成功了,写一篇博客庆祝一下 我们先来了解下nginx与uwsgi的概念,再去配置 磨刀不误砍柴工. nginx 是一个开源的高性能的 HTTP 服务器和反向代理:1 ...

  10. ElasticSearch5.0——IK词库加载

    Dictionary ConfigurationIKAnalyzer.cfg.xml can be located at {conf}/analysis-ik/config/IKAnalyzer.cf ...