Vue.js简介和入门使用

vuejs 简介

• Vue.js (vuejs.org)
• 渐进式 JavaScript 框架
• vuejs 是基于MVVM 思想的框架
• vuejs 是以数据驱动为主的框架
• vuejs 是以组件化进行开发的框架
• vuejs 是国人尤雨溪（尤大大，尤小石）进行开发的。

什么是渐进式？（vuejs）破坏性小，上手简单

渐进式是相对于另外一种开发思想（侵入式）来说。
渐进式指的是在使用该产品做开发的时候，不需要完全的去重构之前的代码结构，可以非常方便将该产品集成到自身的项目中。

什么是侵入式？（react）脚手架（命令行）封装性明显

侵入式指的是如果要使用这种产品去维护之前的老项目的话，没办法直接引入使用，必须要破坏老项目的结构。
意思就是以前的老项目必须要进行重构，没办法直接使用这种侵入的产品。

什么是 MVVM 开发思想？

MVVM 开发思想是前端近几年借鉴后端的 MVC 的开发思想引进的。

• M 是 Model 的简写，负责数据，在前端其表现形式就是一个js对象，一般称之为模型变量（数据）

• V 是 View 的简写，负责数据的展示和收集，在前端的表现形式就是一个 DOM 区域。

• VM 是 ViewModel 的简写，负责业务逻辑，在前端的表现形式就是当前的产品本身的一个实例对象，它以数据驱动作为指导思想，通过双向数据绑定进行数据的操作。

什么是 MVC 思想？

• M Model的简写，翻译 模型，负责对数据的操作
• V View的简写，翻译 视图（模板），负责页面的展示和数据的收集
• C Controller的简写 翻译 控制器，负责业务逻辑代码

之前做后端的某个功能开发的时候，第一步定义路由（url-----》控制器的方法----》是否调用模型----》是否调用视图----》模板引擎–》响应（HTML页面（前后端不分离 ssr）、json格式(前后端分离 bsr)））

一般把 MVC 这种开发思想也称之为 分层思想。主要是为了便于后期的维护和新功能的扩展。（分而治之）

什么是数据驱动？

数据驱动是相较于传统 web 开发里面的 dom 操作来说的，以前的web开发某个功能的时候，我们都是先进行dom选取，然后在进行业务代码，最后做dom更新。但是其实对开发本身来说，我们不应该关系dom操作，我们只需要去关心我们数据的流向，现在的一些新的框架基于数据流向进行实现，对于开发来说，无须关心底层的dom实现，我们只需要提供数据，框架本身会给我们进行dom操作。这种思想就是数据驱动思想。这种开发思想在目前的各类前端框架，乃至小程序产品里面都有体现。

什么是组件化开发思想？

组件化指的是在开发过程中，把一些可以复用的代码高度的抽象、提取出来，封装成一个一个的代码块，然后在其他的地方进行复用。这种思想叫做组件化。有点类似于乐高积木。并且基于该思想衍生出来非常多的前端的组件化ui库（vantui elementUI mintUI antd iview uview…）

vuejs 入门使用

vuejs 是一个js库，也可以叫做一个框架。

vuejs 目前来说出现过3个版本

• vuejs 1.x 过时（不使用）
• vuejs 2.x 大规模使用中（√）
• vuejs 3.x 新秀 （2020 9 正式发布）
  • 底层架构使用 Proxy api改写
  • 组合api
  • 函数式编程

安装

下载vue.js包

安装 — Vue.js (vuejs.org)

npm

npm install vue

CND

最新版本:

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

稳定版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

使用

入门使用

main.js
只要运行vue项目，main.js就会执行

index.html > mian.js>App.vue

html

<! --1引入vuejs框架-->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    // 需要编译器
const vm = new Vue({
     
    el: '#app',// eL是eLement的简写，属性值是一个选择器，选择vuejs,管理的dom区域
    /*data 代表是我们开发中的业务数据*/
	data: {
     
        title: 'hi vuejs!'
	}
})

</script>

<!--2．需要在html区域定义一个 vuejs管理的dom区域，在该区域内我们可以使用vuejs语法-->
<div id="app">
<! --这个区域会交给vuejs管理插值表达式指令-->
< ! --4．使用的vues语法-->
<!--双大括号一般我们称之为插值表达式”语法，里面可以写vue构造函数 data对象属性里面的哪些属性信息--><h1>{
  {title}}</h1>
</ div>

插值表达式

<div id="app">
    <!--这个区域会交给vuejs管理 插值表达式 指令-->
    <!--4. 使用的 vuejs语法-->
    <!--双大括号一般我们称之为 插值表达式 语法，里面可以写Vue构造函数 data对象属性里面的哪些属性信息-->
    <!-- 插值表达式里面到底可以写什么？-->
    <h1>{
  { title }}</h1>
    <hr>
    <h2>1. data对象里面的属性</h2>
    <p>{
  { version }}</p>
    <hr>
    <h2>2. 四则运算 </h2>
    <p>{
  { (1 + 1) + 3 * 4 - 4 }}</p>
    <p>{
  { 10 - 1 }}</p>
    <p>{
  { 2 * 3 }}</p>
    <p>{
  { 20 / 4 }}</p>
    <p>{
  { 20 % 3 }}</p>
    <hr>
    <h2>3. 比较运算</h2>
    <p>{
  { 10 > 9 }}</p>
    <p>{
  { 3 >= 9 }}</p>
    <hr>
    <h2>4. 逻辑运算</h2>
    <p>{
  { true && true }}</p>
    <p>{
  { true && false }}</p>
    <p>{
  { true || false }}</p>