Vue基础介绍

哈哈是haha

于 2020-06-15 16:40:09 发布

阅读量265

点赞数

分类专栏： 💥------Vue

本文链接：https://blog.csdn.net/ZHY_8643/article/details/106765184

版权

💥------Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js，作为前端三大主流框架之一，其主要关注视图层，提供易上手且可与其他库整合的解决方案。文章分别阐述了Vue的基本概念、框架与库的区别、Vue指令的三种用法，包括直接使用、简化指令和内容拼接，并通过跑马灯实例展示了Vue指令的应用。

摘要由CSDN通过智能技术生成

一、什么是Vue

Vue.js 是最火的一个前端框架，React是最流行的一个前端框架，（React除了开发网站，还可以开发收集APP，Vue语法也是用于进行手机App开发的，需要借助于Weex）前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

二、框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
1. 从Jquery 切换到 Zepto
2. 从 EJS 切换到 art-template

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别
MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel

三、Vue指令之`v-bind`的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

四、最基本的指令

在这里插入图片描述

五、实例——跑马灯

<!--1、导入Vue包-->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <!--2、创建一个要控制的区域-->
    <div id="app">
        <input type="button" value="跑起来" @click="lang">
        <input type="button" value="低调" @click="stop" >
        <h4>{{ msg }}</h4>
    </div>
    <script>
        // 注意：在VM实例中，如果想获取data上的数据，或者想要methods中的方法，
        //必须通过this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的VM实例对象
        var vm=new Vue ({
            el:'#app',
            data:{
                msg:'欢迎,来到王者荣耀~~',
                intervalId:null //在data上定义 定时器ID
            },
            methods:{
                lang (){

                    if (this .intervalId !=null) return;
                    //console.log(this.msg)
                   this. intervalId =setInterval(()  =>{
                        //获取到头的第一个字符
                    var start=this.msg.substring(0,1)
                    //获取到后面的所有字符
                    var end=this.msg.substring(1)
                    //重新拼接得到新的字符串，并赋值给this.msg
                    this.msg=end+start
                    },400)
                    //注意：VM实例，会监听自己身上的data中所有数据的改变，只要数据已发生变化，
                    //就会自动把最新的数据，从data上同步到页面中去
                    //【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
                },
                stop(){  //停止计时器
                    clearInterval(this.intervalId)
                    //每当清除了定时器之后，需要重新把intervalId 置为null
                    this .intervalId=null;
                }
            }
        })
        //分析：
        // 1、给【高调】按钮，绑定一个点击事件  v-on
        //2、在按钮的时间处理函数中，写相关的业务逻辑代码：拿到msg 字符串，
        //然后调用字符串的substring 来进行字符串的截取操作，把第一个字符截取出来，
        //放到最后一个位置即可
        //3、为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去。
    </script>
</body>