vue学习起步--Hello World 以及基础知识

最新推荐文章于 2024-02-14 16:53:09 发布

i小默

最新推荐文章于 2024-02-14 16:53:09 发布

阅读量304

点赞数

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

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_36142158/article/details/110064422

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、Hello World

"Hello Wolrd是所有开发心中的光"。

1.1 使用原生js实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
    <script>
        var dom = document.getElementById("app");
        dom.innerHTML = "Hello World!"
    </script>
</body>
</html>

1.2 使用vue.js实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>
    <script>
        // var dom = document.getElementById("app");
        // dom.innerHTML = "Hello World!"
        var app = new Vue({
            el: "#app",
            data: {
                content: "Hello World"
            }
        })
    </script>
</body>
</html>

二、开发TodoList（v-model、v-for、v-on）

2.1 v-for

使用v-for循环list里的内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TodoList</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" />
            <button>提交</button>
            <ul>
                <li v-for="item in list ">{{item}}</li>
            </ul>
        </div>
        
        <script>
                var app = new Vue({
                    el:"#app",
                    data:{
                        list:['第一课的内容','第二课的内容']
                    }
                })
        </script>
    </body>
</html>

需求：在输入框里输入内容，添加到列表

2.2 v-on

v-on主要用于绑定事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TodoList</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input 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:['第一课的内容','第二课的内容']
                    },
                    methods:{
                        handleBtnClick:function(){
                            alert('click')
                        }
                    }
                })
        </script>
    </body>
</html>

在上面的代码中，给button绑定了一个handleBtnClick的方法，在methods里定义该方法，并补充逻辑。

2.3 v-model

v-model指数据的双向绑定。

举个栗子：

与

data:{

list:[],

inputValue:''

当input框里inputValue改变时，data里inputValue值跟着改变。

测试：

可以明显看出，当input框没有值的时候，inputValue为空字符串。

当有值时，inputValue跟着改变。

针对2.1的需求，结合v-on与v-model可以实现：

当点击提交时，将data里inputValue的值赋给list，再用v-for循环。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TodoList</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue" />
            <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>

三、MVVM设计模式

model，view，viewmodel

面向数据进行编程，不涉及dom。

四、使用组件改造TodoList

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TodoList</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue" />
            <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:"#app",
                data:{
                    list:[],
                    inputValue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputValue);
                        this.inputValue = ''
                    }
                },
            })
        </script>
    </body>
</html>

Vue.component定义的是一个全局组件。

在模板里，需要用两个花括号接收变量。

定义局部组件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TodoList</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue" />
            <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 TodoItem = {
                props:['content'],
                template:"<li>{{content}}</li>"
            }
            var app = new Vue({
                el:"#app",
                //注册组件
                components:{
                    TodoItem:TodoItem
                },
                data:{
                    list:[],
                    inputValue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputValue);
                        this.inputValue = ''
                    }
                },
            })
        </script>
    </body>
</html>

五、简单的组件间传值

子组件向父组件传值：

子组件通过$emit触发父组件的状态，向上一层触发事件，上一层监听到子组件触发时，进行业务逻辑。

六、复习小结

v-on 可以简写为@

v-bind: 可以简写为:

i小默

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue学习起步--Hello World 以及基础知识

一、Hello World"Hello Wolrd是所有开发心中的光"。1.1 使用原生js实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title></head><body> <div id="app"></di...
复制链接

扫一扫