Vue基础入门（vue组件化的使用和vue-cli组件化的使用）

最新推荐文章于 2022-07-16 21:27:06 发布

康立志

最新推荐文章于 2022-07-16 21:27:06 发布

阅读量325

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/weixin_44011306/article/details/107187235

版权

vue组件化的使用和vue-cli组件化的使用

效果展示
不使用用组件化
使用组件
使用vue-cli

效果展示

输入数字后点击提交自动生成一列显示输入内容，点击该列该列消失
在这里插入图片描述

不使用用组件化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src=vue.js></script> 
    </head>
    <body>
        <div id="root">
            <input type="text" v-model="inputValue">
            <button @click="handleClick">提交</button>
            <ul>
                <li v-for="(item, index) of list" :key="index" @click="handleDelete">{
   {
   item}}</li>
            </ul>
        </div>
        <script>
            new Vue({
   
                el: "#root",
                data: {
   
                    inputValue: "",
                    list: []
                },
                methods: {
   
                    handleClick: function() {
   
                        this.list.push(this.inputValue)
                        this.inputValue = ""
                    },
                    handleDelete: function(index) {

最低0.47元/天解锁文章

康立志

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门（vue组件化的使用和vue-cli组件化的使用）

vue组件化的使用和vue-cli组件化的使用效果展示不使用用组件化使用组件使用vue-cli效果展示输入数字后点击提交自动生成一列显示输入内容，点击该列该列消失不使用用组件化<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src=vue.js></
复制链接

扫一扫