Vue框架---Vue入门

最新推荐文章于 2022-12-13 22:13:45 发布

你七哥哥

最新推荐文章于 2022-12-13 22:13:45 发布

阅读量576

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_59218114/article/details/124513712

版权

Vue概述

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

vue.js的核心特点—响应的数据绑定

传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑

响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中

为什么要学习vue
通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提倡手动操作DOM元素。

MVVM模式
概述：

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

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

V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)

 $('#btn_login').click(function(){
         通过ajax将页面中的数据通过json格式传递到后端服务器
      });

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

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

注：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型

它有两个方向：

M -> VM -> V

V -> VM -> M

一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个方向都实现的，就是数据的双向绑定。

MVVM的特点：

在MVVM的框架下，视图和模型是不能直接通信的，它们通过ViewModal来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM的优点：

低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写
双向数据绑定，它实现了View和Model的自动同步，当Model的属性改变时，不需要手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变
库和框架的区别
库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。
库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。

Vue引入
1、手动下载
Vue官网下载vue.js（开发版本）

起步

下载开发版本

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>
 
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>

2、cdn下载(需连接网络)
CDN简介
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

CDN的全称：Content Delivery Network，即内容分发网络。

CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。

CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备

CDN基本原理：将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率

CDN网址

找到版本复制标签或者链接

v-html
这个指令主要在需要操作原始HTML的时候使用。

v-bind
该指令在需要绑定HTML标签属性的时候使用。为了方便，该指令还有一个缩写:，例如:class="myClass"就相当于v-bind:class="myClass"。

v-on
该指令主要用于绑定事件处理程序。该指令有缩写@，例如@click="onClick"就相当于v-on:click="onClick"。

v-show、v-if、v-else和v-else-if
这几个指令主要用于条件渲染，将在后面进行介绍。

v-for
该指令用于渲染整个列表，将在后面进行介绍。
v-model
该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的，使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>

       <div id="app">

           <h1>{{title}}</h1>

       </div>
   </body>

       <script>
       //每一个Vue实例都是从new构造函数开始!!
           var vm=new Vue({
               el:"#app",       // DOM 元素，挂载视图模型，
               data:function(){
                   return{
                       title:'hellow Vue！！',
                       data:new Date().getTime()
                   }
               },
               methods:{       // 定义方法，用于事件交互时使用的函数

               }
           })
       </script>
</html>

你七哥哥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue框架---Vue入门

Vue概述Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架vue.js的核心特点—响应的数据绑定传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中为什么要学习vue通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上..
复制链接

扫一扫