zoukankan      html  css  js  c++  java
  • Vue学习笔记(二)

    1.引入组件需要注意的事项说明和步骤:

     第一步,引入对应的组件:

    import Hello2 from './components/Hello2'

    第二步:

    需要注册该组件才可以使用
    <script>
    import Store from './store'
    import Hello2 from './components/Hello2'
    export default {
    data: function () {
    return {
    title: 'this is todo list',
    items: Store.fetch(),
    newItem: ''

    }
    },
    components: {Hello2},//进行组件注册
    watch: {
    items: {
    handler: function (items) {
    console.log(items)
    Store.save(items)
    },
    deep: true
    }
    },
    methods: {
    toggleFinish: function (item) {
    console.log(item)
    },
    addNew: function () {
    console.log(this.newItem)
    this.items.push({
    label: this.newItem,
    isFinished: false
    })
    this.newItem = ''
    Store.save()
    }
    }
    }
    </script>

    第三步:模板中需要载人对应的组件,需要转成对应的驼峰格式

    <template >
    <div id="app">
    <h1 v-text="title"></h1>

    <input type="text" v-model="newItem" @keyup.enter="addNew">

    <ul>
    <li v-for="(list,index) in items" :class="{finished: list.isFinished}" @click="toggleFinish(list)" :key="index" :id="index">
    {{list.label}}
    </li>
    </ul>

    <hello2>引入组件</hello2>
    <img src="./assets/logo.png">
    <router-view></router-view>
    </div>
    </template>
  • 相关阅读:
    进行代码复审训练
    源代码管理工具调查
    一、实现模块判断传入的身份证号码的正确性
    15100364杨舒雅
    20180320作业2:进行代码复审训练
    20180320作业1:源代码管理工具调查
    软工作业02-PSP与单元测试训练
    软工课后作业01
    hello
    代码复审训练 15100360
  • 原文地址:https://www.cnblogs.com/zxyun/p/6796466.html
Copyright © 2011-2022 走看看