vue简单介绍

最新推荐文章于 2024-06-24 19:32:32 发布

MRong03

最新推荐文章于 2024-06-24 19:32:32 发布

阅读量1.8k

点赞数

文章标签： javascript html linq

本文链接：https://blog.csdn.net/Xiebo030212/article/details/124565224

版权

一、前言
在初步学习前端课程的时候，相信大家都知道Vue这个名字，至于Vue到底是什么却不得而知，又或者知道Vue是前端的一大流行框架，那么它到底是用来干啥的呢，对于其他框架而言Vue又有什么优势和特点，学习前端的人为什么都要去学习Vue呢？

对于这些答案，相信大家都想去亲自揭开它的谜底，但是如果你未学过JavaScript和jQuery那么，请先不要学习Vue，因为没有根基是非常晦涩难学的。反之学习的时候会特别轻松，所以希望大家学习Vue的时候，尽量都有javascript和jQuery库类的基础。

二、Vue是什么？
2.1、简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.2.什么是渐进式框架？
说白了，就是框架分层。那是如何分层的呢？就像《功夫》里面黄圣依手里拿的棒棒糖一样：最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具，vue和react都是如此。

Vue分层：声明式渲染>组件系统>客户端路由>集中式状态管理>项目构建

2.3、发展史
· 创始人：尤雨溪
官网：https://cn.vuejs.org/

安装：https://cn.vuejs.org/v2/guide/installation.html =》点击开发版本

1.2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
2.2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
3.2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
4.2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
5.2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
6.2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
7.2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
8.2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
9.2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

三、为什么要学习Vue？
3.1.易用：
熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue
3.2.灵活：
在一个库和一套完整框架之间自如伸缩
3.3.高效：
20kB 运行大小，超快虚拟 DOM
四. 库和框架的区别
4.1 库(Library)，
本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
JavaScript：document.getElementById()
jQuery： $('').val()

4.2 框架(Framework)，
是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

4.3前端渲染方式

五. 什么是MVVM框架
5.1介绍之前我们先介绍下什么是MVC框架
MVC是后端分层开发的思想即 Model-View-Controller 的缩写，就是模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的：

View：用来把数据以某种方式呈现给用户。

Model ：其实就是数据。

Controller ：接收并处理来自用户的请求，并将 Model 返回给用户。

5.2MVVM框架

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM
M：model数据模型（JSON）
V：view视图（HTML）
VM：ViewModel 视图模型

1) V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
$('#btn_login').click(function(){
通过ajax将页面中的数据通过json格式传递到后端服务器
});

2) M（修改数据） -> V 将后端数据（JSON）通过赋值的方式在视图层展现(后端到前端)
通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面

  $.ajax({
         url:
         data:
         dataType:
         type:
         success:function(data){
           $('#book_name').val(data....);  .text() .html()
           ...
         }
      })

共性：
不管是前端到后端，还是后端到前端，使用传统的方式都必须首先拿到
页面的Document元素，只有拿到了页面元素才能进行后续操作

六、Vue环境搭建
6.1.引入Vue.js
6.2 下载
6.2.1 cdn下载(需连接网络)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
6.2..2 手动下载

<script src="dist/vue.js"></script>


<script src="dist/vue.min.js"></script>

6.3.给HTML元素即视图添加id属性
   <!-- 指定vue管理内容区域，通常我们也把它叫做
       边界，这意味着我们接下来的改动全部在指定的div内，

   div外部不受影响 -->      
<div id="app">
            <h1>{{title}}----{{ts}}</h1>
            <!-- 
             1) javascript:
             window.addListener
             <button onclick="onclick="return confirm('wwwwww')"">安</button>

           2）jquery:
           $('选择器')。bind('click',function(){})
           -->
           <button v-on:click="doClick">有种点我</button>
       </div>
6.4.Vue实例，并搭建Vue环境

每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的

   <div id="d1">{{message}}</div>  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
   <body>
       {{title}}
       
       <div id="app">
           <h1>{{title}}----{{ts}}</h1>
           <!--
           1) javascript:

          window.addListener
             <button onclick="onclick="return confirm('wwwwww')"">安</button>
             2）jquery:
             $('选择器')。bind('click',function(){})
             -->
            <button v-on:click="doClick">有种点我</button>
        </div>
    </body>
    <script>

       //每个Vue实例都是从new构造函数开始
       //每个Vue实例都是从new构造函数开始
       //每个Vue实例都是从new构造函数开始
       var vm=new Vue({
           el:'#app', // DOM 元素，挂载视图模型(element,管理边界)，
           //方式1

   /* data:{    // 定义属性，并设置初始值
                title:'Hello Vue!!!',
                ts:new Date().getTime()
            }, */

//方式2函数方式(data在组件开发中的写法必须是一个函数)

  data:function(){    // 定义属性，并设置初始值
                return{   
                    title:'Hello Vue!!!',
                    ts:new Date().getTime()
                }
            },
            methods:{    // 定义方法，用于事件交互时使用的函数  
                doClick:function(){
                    alert('hello vue!!');
                },
                doRegister(){
                    
                }
                
            }
        });
    </script>
</html>

MRong03

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue简单介绍

一、前言在初步学习前端课程的时候，相信大家都知道Vue这个名字，至于Vue到底是什么却不得而知，又或者知道Vue是前端的一大流行框架，那么它到底是用来干啥的呢，对于其他框架而言Vue又有什么优势和特点，学习前端的人为什么都要去学习Vue呢？对于这些答案，相信大家都想去亲自揭开它的谜底，但是如果你未学过JavaScript和jQuery那么，请先不要学习Vue，因为没有根基是非常晦涩难学的。反之学习的时候会特别轻松，所以希望大家学习Vue的时候，尽量都有javascript和jQuery库类的基础。
复制链接

扫一扫