Vue入门示例，样例

最新推荐文章于 2024-07-26 11:09:07 发布

gaga-gaga

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量401

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zjl523357813/article/details/129208806

版权

一、入门示例

介绍几个入门示例，通过不同的实现方式从而体会一下 Vue

1 Hello World

helloworld/index.html

<html>
    <head>
        <!-- <script src='https://vuejs.org/js/vue.js'></script> -->
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="app">{{content}}</div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    content: 'hello world'
                }
            })
        </script>
    </body>
</html>

引入 vue.js
div 的 id 声明为 app
初始化 Vue，传入的对象属性为 el 和 data
el 绑定 dom 对象，通过 css 选择表达式
data 定义了数据对象，双向绑定

2 Todo List

todolist/index.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="app">
            <!-- 模板指令，数据双向绑定-->
            <input v-model="inputValue" type="text"/>
            <!-- 模板指令，绑定事件-->
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <!-- 标签指令，循环数据 -->
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

2.1 全局组件实现

todolist/index2.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list">
                </todo-item>
            </ul>
        </div>
        <script>
            // 全局组件
            Vue.component('TodoItem', {
                props: ['content'],
                template: '<li>{{content}}</li>'
            })

            var app = new Vue({
                el: '#root',
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

全局组件名为 TodoItem，引用时为 todo-item
props 属性，定义组件需要传入的参数
template 属性，定义组件模板，模板里可以使用变量

2..2 局部组件实现

todolist/index3.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list">
                </todo-item>
            </ul>
        </div>
        <script>
            // 局部组件
            var TodoItem = {
                props: ['content'],
                template: "<li>{{content}}</li>"
            }

            var app = new Vue({
                el: '#root',
                components: {
                    TodoItem: TodoItem
                },
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

在定义 Vue 实例时传入 components，需要的局部组件

2.3 子组件向父组件传值

todolist/index4.html

点击列表项，删除被点击的列表项

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item
                    v-bind:content="item"
                    v-bind:index="index"
                    v-for="(item, index) in list"
                    @delete="handleItemDelete">
                </todo-item>
            </ul>
        </div>
        <script>
            // 局部组件
            var TodoItem = {
                props: ['content', 'index'],
                template: "<li v-on:click='handleItemClick'>{{content}}</li>",
                methods: {
                    handleItemClick: function() {
                        this.$emit("delete", this.index)
                    }
                }
            }

            var app = new Vue({
                el: '#root',
                components: {
                    TodoItem: TodoItem
                },
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    },
                    handleItemDelete: function(index) {
                        this.list.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>

this.$emit("delete", this.index) 触发当前实例上的事件。附加参数都会传给监听器回调。
v-on:delete 可以简写为 @delete

2.3 遍历

<template>
    <div id="app">
        <ul>
            <!--遍历数组-->
            <li v-for='(todo,i) in todos'>
                {{i + 1}}-- {{todo.value}}--{{todo.done}}
            </li>
        </ul>

        <!--遍历对象属性-->
        <li v-for="(val,key) in obj">
            {{key}}:{{val}}
        </li>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                todos: [
                    {value: '写作业', done: false},
                    {value: '打游戏', done: false},
                    {value: '看电影', done: true},
                ],
                obj: {
                    name: "aaaa",
                    sex: "man",
                    score: 90
                }
            }
        }
    }
</script>