Vue学习(1) :Vue基本知识

最新推荐文章于 2023-05-14 17:55:37 发布

idol_watch

最新推荐文章于 2023-05-14 17:55:37 发布

阅读量437

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/qq_41957257/article/details/105285626

版权

Vue学习专栏收录该内容

7 篇文章 10 订阅

订阅专栏

使用：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第一个Vue页面:显示Hello World：

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>第一个Vue页面</title>
    </head>
    <body>
        <div id="app">{{message}}</div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
               el:"#app",
               data:function(){
                  return{
                    message:"Hello World"
                  }
               }
        </sctipt>
    </body>
</html>

使用指令:

1.v-if 用于元素的条件显示,配合v-else

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>第一个Vue页面</title>
    </head>
    <body>
        <div id="app">
            <span v-if="!item.del">{{item.title}}</span>
            <span v-else style="text-decoration: line-through">{{item.title}}</span>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: function () {
                    return {
                        item: {
                            title: "Hello World",
                            del: false
                        }
                    }
                }
            })
        </script>
    </body>
</html>

效果:

2. v-for 遍历数组,如下，可以看到<ul>标签下有两个<li>,一个被划了线

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>第一个Vue页面</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in list">
                    <span v-if="!item.del">{{item.title}}</span>
                    <span v-else style="text-decoration: line-through">{{item.title}}</span>
                </li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: function () {
                    return {
                        list:
                            [{
                                title:"Hello World",
                                del:false
                            },
                            {
                                title:"Hello World",
                                del:true
                            }]
                    }
                }
            })
        </script>
    </body>
</html>

效果:

3. v-show 也是控制元素的显示，只不过它false的时候dom里已经添加了这个元素，只不过display:none

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>第一个Vue页面</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in list">
                    <span v-show="!item.del">{{item.title}}</span>
                </li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: function () {
                    return {
                        list:
                            [{
                                title:"Hello World",
                                del:false
                            },
                            {
                                title:"Hello World",
                                del:true
                            }]
                    }
                }
            })
        </script>
    </body>
</html>

效果：

组件使用：

组件主要是为了能够进行复用。现在我们就做一个todo_list组件，显示要做的事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <todo-item v-for="item in list" :name="item.name" :del="item.del">
        </todo-item>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item',{
        props:{
            name:String,
            del:{
                type:Boolean,
                default:false
            }
        },
        template: `
                <li>
                    <span v-if="!del">{{name}}</span>
                    <span v-else style="text-decoration: line-through">{{name}}</span>
                </li>
                `,
        data:function () {
            return {
                
            }
        }
    });
    let vm = new Vue({
        el:'#app',
        data:{
            list:[
                {
                    name:"课程1",
                    del:false
                },
                {
                    name:"课程2",
                    del:true
                }
            ]
        }
    })
</script>
</body>
</html>

效果：

现在把todo-list也进行组件化，效果也一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <todo-list></todo-list>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item',{
            props:{
                name:String,
                del:{
                    type:Boolean,
                    default:false
                }
            },
            template: `
                    <li>
                        <span v-if="!del">{{name}}</span>
                        <span v-else style="text-decoration: line-through">{{name}}</span>
                    </li>
                    `,
            data:function () {
                return {
                }
            }
        });
        Vue.component('todo-list',{
             template: `
                 <ul>
                     <todo-item v-for="item in list" :name="item.name" :del="item.del"></todo-item>
                 </ul>
             `,
            data:{
                list:[
                    {
                        name:"课程1",
                        del:false
                    },
                    {
                        name:"课程2",
                        del:true
                    }
                ]
            }
        });
    
        let vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        name:"课程1",
                        del:false
                    },
                    {
                        name:"课程2",
                        del:true
                    }
                ]
            }
        })
    </script>
</body>
</html>

使用插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div id="app">
         <todo-list>
             <todo-item  @delete="handleDelete" v-for="item in list" :name="item.name" :del="item.del">
                 <template v-slot:pre-icon="{value}">
                     <span>前置图标{{value}}</span>
                 </template>
                 <template v-slot:next-icon>
                     <span>后置图标</span>
                 </template>
             </todo-item>
         </todo-list>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         Vue.component('todo-item',{
             props:{
                 name:String,
                 del:{
                    type:Boolean,
                    default:false
                 }
             },
             template: `
                <li>
                    <slot name="pre-icon" :value="value"></slot>
                    <span v-if="!del">{{name}}</span>
                    <span v-else style="text-decoration: line-through">{{name}}</span>
                    <slot name="next-icon"></slot>
                    <button @click="handleClick">删除</button>
                </li>
                `,
             data:function () {
                 return {
                     value:22
                 }
             },
             methods:{
                 handleClick(){
                     console.log("处理删除按钮点击");
                     this.$emit('delete',this.name)
                 }
             }
         });

         Vue.component("todo-list",{
             template: `
                <ul>
                   <slot></slot>
                </ul>
             `,
             data:function () {
                return{}
             },
         });
         let vm = new Vue({
             el:'#app',
             data:{
                 list:[
                     {
                         name:"课程1",
                         del:false
                     },
                     {
                         name:"课程2",
                         del:true
                     }
                 ]
             },
             methods:{
                 handleDelete:function (val) {
                     console.log("删除的名字叫"+val);
                 }
             }
         })
     </script>
</body>
</html>

效果：

idol_watch

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(1) :Vue基本知识

使用：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>第一个Vue页面:显示Hello World：<!DOCTYPE html><html lang="en"> <head> <meta charset=...
复制链接

扫一扫

专栏目录