zoukankan      html  css  js  c++  java
  • Vue2.5入门-3

    安装和使用

    全局安装vue

    npm install --global vue-cli
    

    创建基于webpack模板的新项目

    vue init webpack my-project
    

    安装依赖

    cd my-project
    npm run dev
    
    测试代码

    父组件可以通过属性的方式向子组件传值,:content

    App.vue

    <template>
    <div>
     <div>
       <input v-model="inputValue"/>
       <button @click="handleSubmit">提交</button>
     </div>
     <ul>
       <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
     </ul>
    </div>
    </template>
    
    <script>
    import TodoItem from './components/TodoItem.vue'
    export default {
    components: {
     'todo-item': TodoItem
    },
    data () {
     return {
       inputValue: '',
       list: []
     }
    },
    methods: {
     handleSubmit () {
       this.list.push(this.inputValue)
       this.inputValue = ''
     },
     handleDelete (e) {
       // delete this.list[e]
       this.list.splice(e, 1)
     }
    }
    }
    </script>
    
    <style>
    
    </style>
    
    
    

    components/TodoList.vue,子组件可以通过this.$emit向父组件传递事件

    <template>
    <div @click="handleClick">{{content}}</div>
    </template>
    
    <script>
    export default {
    props: ['content', 'index'],
    methods: {
     handleClick () {
       this.$emit('delete', this.index)
     }
    }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    
    
    全局样式与局部样式

    scoped起限制作用域的作用

  • 相关阅读:
    QButton
    注入
    SpringBoot热重启配置
    centos7 安装 tomcat
    centos 安装jdk
    spring boot (6) AOP的使用
    spring boot (5) 自定义配置
    spring boot (4) 使用log4 打印日志
    SpringBoot (3)设置支持跨域请求
    spring boot (2) 配置swagger2核心配置 docket
  • 原文地址:https://www.cnblogs.com/TomAndJerry/p/10611595.html
Copyright © 2011-2022 走看看