第一章 Vue语法初探

最新推荐文章于 2024-06-05 16:31:26 发布

qiandfeng

最新推荐文章于 2024-06-05 16:31:26 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shuati2000/article/details/125364909

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一章 Vue语法初探

1.定时器

实现功能每隔一秒自动加一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>定时器</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                context:1
            }
        },
        mounted(){
            setInterval(() => {
                this.context += 1;
            },1000)
        },
        template:
        `
        <div>
            <span>{{context}}</span>
        </div>
        `
    }).mount("#root")
</script>
</html>

mounted：当页面加载完成时，自动执行

2.编写字符串反转

实现功能点击反转按钮能进行反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>字符串反转</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                context:"hello vue"
            }
        },
        methods:{
            handle(){
                const newContext = this.context.split('').reverse().join('');
                this.context = newContext;
            } ,
        },

        template:
        `
        <div>
            <span>{{context}}</span>
            <button v-on:click="handle">反转</button>
        </div>
        `
    }).mount("#root")
</script>
</html>

3.内容隐藏小功能

实现功能点击隐藏/显示按钮能进行隐藏/显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>neiron</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                context:"hello vue",
                show:"true"
            }
        },
        methods:{
            handle(){
                this.show = !this.show;
            } ,
        },

        template:
        `
        <div>
            <span v-if="show">{{context}}</span>
            <button v-on:click="handle">显示/隐藏</button>
        </div>
        `
    }).mount("#root")
</script>
</html>

4.自定义增加列表元素

输入框添加内容，且能在列表中显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>自定义增加列表元素</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                context:'',
                list:['hello','vue'],
            }
        },
        methods:{
            handle(){
                this.list.push(this.context);
                this.context = '';
            } ,
        },

        template:
        `
        <div>
            <input v-model="context"/>
            <button v-on:click="handle" v-bind:title="context">新增</button>
            <ul>
                <li v-for="item of list">{{item}}</li>
            </ul>
        </div>
        `
    }).mount("#root")
</script>
</html>

5.进行组件拆分

将列表li进行拆分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>组件拆分</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                context:'',
                list:['hello','vue'],
            }
        },
        methods:{
            handle(){
                this.list.push(this.context);
                this.context = '';
            } ,
        },

        template:
        `
        <div>
            <input v-model="context"/>
            <button v-on:click="handle" v-bind:title="context">新增</button>
            <ul>
                <todo-item v-for="(item,index) of list" v-bind:context="item" v-bind:index="index"></todo-item>
            </ul>
        </div>
        `
    });

    app.component('todo-item',{
        props:['context','index'],
        template:
        `
        <li>{{context}}--{{index}}</li>
        `
    });

    app.mount("#root");
</script>
</html>