Vue.js

最新推荐文章于 2023-08-31 07:47:52 发布

刘娅�

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量83

点赞数

文章标签： Vue.js

本文链接：https://blog.csdn.net/weixin_45044049/article/details/103235832

版权

vuejs

官方网站：https://cn.vuejs.org

一、简介

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

二、学习内容

1.指令（directive） v–

2.组件（component）核心

3.路由（router）核心

4.状态管理（state）

5.和后端交互和其他第三方插件（axios、vantage、mint-ui、better-scroll…）

三、MVVM

是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

M model 模型数据的

V view 视图渲染数据的

VM viewModel 视图模型把模型里的数据渲染到视图上

四、环境搭建

vue 两种环境

（1）网页引入文件的方式简单、轻量

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
   <!-- 含有变量或表达式的html叫模板 {{}} template  --> 
    <div id="box">
        {{messsge}}
    </div>
    <script>
    	//实例化 
        var vm = new Vue({
            //选中id名为box的元素，如果是class就用.box。不能直接放body
            el:"#box",
            data:{
                //放键值对
                messsge："hello world"
            },
            //template指定的模板的优先级比代理el指定的元素高，所以这里是渲染后面的
            template:"<h2>小可爱{{messsge}}</h2>"
        });
    </script>
</body>

（2）vue-cli （脚手架）方式适合做项目热更新

数据驱动：把丰富、可变的数据印射到界面上；数据变，视图变

数据变化 —> 虚拟dom变化（diff算法） —> 真实dom变化（打补丁）

刘娅�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

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

扫一扫