Vue简单介绍 | 易学教程

Vue（Vue.js的简称）是前端的主流框架之一，和Angular.js、React.js一起，成为前端三大主流框架，Vue.js是一套构建用户界面的框架，只关注视图层，它不仅容易上手，还便于与第三方库或既有项目整合（Vue有配置的第三方类库，可以整合起来做大型项目的开发）。

先来说明几个概念：

框架和库的区别：

框架是一套完整的解决方案，对项目侵入性大，项目如需更换框架，则需重新架构整个项目
库（插件）提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易的切换到其他库来满足需求

MVC和MVVM：

MVC（模型(model)－视图(view)－控制器(controller)），model是数据管理者，要么是数据库中存储的数据，要么是从服务器中获取的数据；view是用户在屏幕上看到的结构、布局和外观；将两者联系起来的是controller，通过controller将model里的数据放到view中，或从view中获取数据存入model。
MVVM（Model-View-ViewModel），model是与view界面对应的数据对象，view是用户在屏幕上看到的结构、布局和外观，ViewModel是一个绑定器，在view和model之间进行通信。
vue基本代码与MVVM之间的对应关系：

<body>
    <!--vue实例所控制的这个元素区域，就是MVVM的V-->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    
    <script>
        //创建一个vue实例，当导入包之后，在浏览器内存就多了一个vue构造函数
        //new出来的vm对象即为MVVM的VM绑定器
        var vm = new Vue({
            el: '#app', //el属性表示控制的是页面上哪个区域
            //这里的data就是MVVM的M，专门用来保存每个页面的数据
            data: {
                msg: '欢迎学习vue'
                    //通过vue提供的指令，很方便的把数据渲染到页面上，不需要手动操作DOM元素
            }
        })
    </script>
</body>

MVC和MVVM一样，都是为了将view和model分离，但MVC需要对DOM进行操作，这样页面就有大量DOM绑定与监听类的操作；MVVM通过数据双向绑定让数据自动地双向同步，V修改数据自动同步M、M修改数据自动同步到V，无需手动操作DOM。
两者详细的比较可参考https://www.jianshu.com/p/b0aab1ffad93

vue的几种指令：

v-cloak：解决插值表达式（即上面例子中的“{{msg}}”）闪烁的问题。在上面的例子中，当网速很慢时，页面会出现‘{{msg}}’闪烁而过的一瞬间，带给用户不好的体验，可用v-cloak来解决这个问题，在css样式中设置其为不可见，当加载完时，msg中的数据也能正常显示。

[v-cloak] {
	display:none;
}

<div id="app">
   <p v-cloak>{{msg}}</p>
</div>

v-text：用来渲染普通文本（即无法解析出文本中的html代码），默认v-text无闪烁问题，v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

<body>
    <div id="app">
        <p>+++{{msg}}---</p>//插值表达式前后的内容不会被覆盖，会显示出来
        <h4 v-text="msg">======</h4>//里面的======会被覆盖，不会显示出来
    </div>
    
    <script>
       var vm = new Vue({
            el: '#app', 
            data: {
                msg: '欢迎学习vue'
            }
        })
    </script>
</body>

v-html：和v-text类似，不同之处在于v-html可将文本中的html代码解析出来

<body>
    <div id="app">
        <p v-cloak>{{msg2}}</p>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎学习vue',
                msg2: '<h1>hello world</h1>'
            }
        })
    </script>
</body>

页面显示：
在这里插入图片描述

v-bind：提供的用于绑定属性的指令，v-bind：可简写为“：要绑定的属性值”

<body>
    <div id="app">
        <input type="button" value="按钮" title="mytitle">
        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle + '123'">
        <!--第一个title为“mytitle”，第二个title为“这是一个自己定义的title”，第三个title为“这是一个自己定义的title123”，
        因为v-bind将“”里面的内容作为js代码解析，所以字符串变量加上一个字符串并不会报错-->
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: '这是一个自己定义的title'
            }
        })
    </script>
</body>

v-on：事件绑定机制，v-on：的缩写为@

<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="show">
        <input type="button" value="按钮" v-on:mouseover="show">
        <input type="button" value="按钮" @mouseover="show">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: '这是一个自己定义的title'
            },
            methods: {
                //这个methods属性中定义了当前vue实例所有可用的方法
                show: function() {
                    alert("今天要好好学习呀")
                }
            }
        })
    </script>
</body>

跑马灯效果：

<!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>跑马灯效果</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="demo">
        <input type="button" value="跑起来" @click="go">
        <input type="button" value="立定" v-on:click="stop">
        <h3>{{mes1}}</h3>
    </div>
    <script>
        //在VM实例中，如果想获取data上的数据或想调用methods中的方法，必须通过this来进行访问
        var lang = new Vue({
            el: '#demo',
            data: {
                mes1: '向左转，跑步走~~！',
                intervalid: null //在data上定义定时器id
            },
            methods: {
                go: function() {
                    if (this.intervalid != null) return;
                    //此时应该用箭头函数，如果用function就会出现this指向问题，用箭头函数，this还是指向外部实例
                    this.intervalid = setInterval(() => {
                        //获取第一个字符
                        var start = this.mes1.substring(0, 1);
                        //获取后面所有字符
                        var end = this.mes1.substring(1);
                        //进行新的字符串连接
                        this.mes1 = end + start;
                        //注意：VM实例会监听自己身上的data所有数据改变，只要数据发生了变化，就会自动把最新数据同步到页面中去
                    }, 400)
                },
                stop: function() {
                    //停止定时器
                    clearInterval(this.intervalid);
                    this.intervalid = null;
                }
            }
        })
    </script>
</body>

</html>

来源：oschina

链接：https://my.oschina.net/u/4368132/blog/4419055

标签

mvvm

bind

Vue.js