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

关于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会减少

你可能感兴趣的:(前端,java,开发语言,后端)