欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue简单介绍

程序员文章站 2022-03-20 23:29:39
Vue(Vue.js的简称)是前端的主流框架之一,和Angular.js、React.js一起,成为前端三大主流框架,Vue.js是一套构建用户界面的框架,只关注视图层,它不仅容易上手,还便于与第三方库或既有项目整合(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>

页面显示:
Vue简单介绍

  • 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>

本文地址:https://blog.csdn.net/qq_46469137/article/details/107461197

相关标签: js vue html