vue 快速入门--快速使用vue2

最新推荐文章于 2024-05-04 23:30:03 发布

RomanBesson

最新推荐文章于 2024-05-04 23:30:03 发布

阅读量646

点赞数

分类专栏：前端文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/abaidaye/article/details/121455637

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

关于mvvm的理解

说到mvvm，就要提到vue的优点了。

vue有什么优点呢？

：更改变量很容易，具有即时性。

这是我们广泛所知道的，vue的优点。

在原来只有jquery的时候，我们改变一个元素的值的时候，我们需要深入到原代码里，重新绑定元素啦，然后再用方法获取值拉，清空原有值。。。等等，再去替换。非常麻烦！

而且，原有值也不能实时替换，每出一次都要改动dom树的代码，十分繁琐。

此时，vue就给我们提供了一种模型，mvvm模型，这种模型可以将数据和页面实时绑定，将数据和页面用一个虚拟dom层分开，然后直接操作数据，就可以改变页面，直接操纵页面，也可以改变数据。

保证即时性的同时，操作也十分便捷。

这就是mvvm模型，很好的解决了原来存在的繁琐和不即时问题，算是实现了vue的第一个优点。

2.1vue01

前提：有node.js

在你想使用vue的文件夹输入：

npm -i

npm i vue

下载vue。

当然，也可以导入依赖：

    <!-- 导入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

然后就可以开始测试了。

基本写法：（按照这个位置套，之后也一样）


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<!--这写个div（其他元素也行） -->
      

        
     

    <script>
//写个vue对象和上面元素绑定    
     

    </script>
</body>

</html>

2.2.基本操作

单向绑定元素

元素

    <div id="app">
         <h1> {{name}} ,非常帅</h1>
    </div>

vue对象

     let vm = new Vue({ 
            el: "#app",
            data: {  
                name: "张三",  
             
            }
        });

运行之后，你修改name，元素里的name值也跟着变换

双向绑定

元素

<h1> {{name}} ,非常帅，有{{num}}个人为他点赞</h1>  
<input type="text" v-model="num">

vue对象

     let vm = new Vue({ 
            el: "#app",
            data: {  
                name: "张三",  
                num: 1
            }
        });

双向绑定后，你修改num，

的值也会变

输入框里输入值，num值就会随着输入变化。

事件绑定

元素

        <button v-on:click="num++">点赞</button>

        <button v-on:click="cancel">取消</button>

vue对象

        let vm = new Vue({ 
            el: "#app",
            data: {  
                name: "张三",  
                num: 1
            },
            methods:{  
                cancel(){
                    this.num -- ;
                }
            }
        });

点击点赞按钮num会增加，点击取消按钮，会运行函数，num会减少

RomanBesson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 快速入门--快速使用vue2

关于mvvm的理解说到mvvm，就要提到vue的优点了。vue有什么优点呢？：更改变量很容易，具有即时性。这是我们广泛所知道的，vue的优点。在原来只有jquery的时候，我们改变一个元素的值的时候，我们需要深入到原代码里，重新绑定元素啦，然后再用方法获取值拉，清空原有值。。。等等，再去替换。非常麻烦！而且，原有值也不能实时替换，每出一次都要改动dom树的代码，十分繁琐。此时，vue就给我们提供了一种模型，mvvm模型，这种模型可以将数据和页面实时绑定，将数据和页面用一个虚拟dom层分开，然后
复制链接

扫一扫

专栏目录