Vue入门:Vue常用的基本事件(v-for/v-on/v-model),实现Todo List项目为例

最新推荐文章于 2023-06-11 10:43:21 发布

第一段代码

最新推荐文章于 2023-06-11 10:43:21 发布

阅读量485

点赞数

分类专栏：前端 Vue

本文链接：https://blog.csdn.net/godot06/article/details/107937978

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

VUE的MVVM模式:

不涉及DOM层操作,在数据层操作,当数据的变更,Vue中会根据数据的不同自动变更.

插值:数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

使用 v-html 指令用于输出 html 代码

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

1 v-for:Vue循环取数

v-for

这里已ul->li 循环显示多个li数据为例.

<body>
    <div id="app">
        <input type="text" />
        <input type="button" value="提交">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            list:["第一课的内容","第二课的内容"]
        }
    })
</script>

v-for是vue的循环,item in list就是for循环里面的操作,item等同于i累计变量-循环中的每一次数据,list则是vue实例对象中data属性的具体属性值,获取item循环值后,使用{{item}}就可以一次将数组循环中的所有值取出.

2 v-on:Vue绑定事件

v-on

给一个dom节点绑定事件在vue中使用v-o指定,如绑定点击事件v-on:click="响应该事件的函数"(v-o:click="handleBtn");

Tips:handleBtn等被v-on:绑定的函数处理事件一定是在vue声明实例的methods属性中去实现的.

<body>
    <div id="app">
        <input type="text" />
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            list:["第一课的内容","第二课的内容"]
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                alert("Btn is Click");
            }
        }
    })
</script>

3 v-model=数据的双向绑定

数据的双向绑定,指的是html中dom节点通过v-model绑定后可以vue声明实例中data属性值双向联动,即只要任何一边改变了,另一边也会自动随着改变,这对从服务器端请求获取数据后的赋值那简直是福音.

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的.

已input输入框为例,<input type="text" v-model="inputValue"/>,这里v-model="inputValue",一定要声明到vue的data属性值下,

这样实现双向绑定,那么无论是input输入框用户输入改变,还是我们请求后端返回数据的改变,他们都会双向同步改变.

4 获取vue实例中data的属性值

我们在当前声明的vue实例中,直接通过this.属性key就可以获取指定的值,如下代码

<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                alert(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
            }
        }
    })
</script>

5 对vue实例中data的属性值赋值

this.list.push(inputValue)
this.inputValue= ''

6 MVVM模式总结

从上面我们可以看出一点,我们真个操作,其实少掉我们之前写js或jQuery常常操作的dom代码,我们完全没有看到dom操作,都是直接在操作数据,前后端数据的改变,都会相应自动双向改变,这种就是现在非常流行的MVVM模式,VUE自己原话是这样写的:"虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。"

7 Todo List 项目实例

<!DOCTYPE html>
<html>
<head>
    <title>TODO LIST</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
                this.inputValue = ''; // 点击后清空v-model绑定的输入框
            }
        }
    })
</script>

第一段代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门:Vue常用的基本事件(v-for/v-on/v-model),实现Todo List项目为例

1 v-for:Vue循环取数v-for这里已ul->li 循环显示多个li数据为例.<body> <div id="app"> <input type="text" /> <input type="button" value="提交"> <ul> <li v-for="item in list">{{item}}</li>
复制链接

扫一扫