侧边栏壁纸
博主头像
这就是之谦博主等级

我们的征途是星辰大海

  • 累计撰写 182 篇文章
  • 累计创建 3 个标签
  • 累计收到 16 条评论
标签搜索

目 录CONTENT

文章目录
前端

Vue-狂神入门

这就是之谦
这就是之谦
2021-12-25 / 0 评论 / 0 点赞 / 697 阅读 / 13,096 字
温馨提示：
本文最后更新于 2021-12-25，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

Vue-狂神入门

1、前端体系

前端三要素

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
  • JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

CSS预处理器

什么是 CSS 预处理器?
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的
特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易
懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文
件，以供项目使用”。
常用的 CSS 预处理器有哪些：

  • SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
  • LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

Vue

一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态
管理等新特性。其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点；

Axios

前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额
外使用一个通信框架与服务器交互；当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能；

UI框架

Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架
Layui：轻量级框架

MV*模式

此处的 MV* 模式如下：
MVC（同步通信为主）：Model、View、Controller
MVP（异步通信为主）：Model、View、Presenter
MVVM（异步通信为主）：Model、View、ViewModel

2、MVVM

image-20210906171507990

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

  • 低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
  • 可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
  • 独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
  • 可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

image-20210906171556389

View：
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。
Model：
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则
ViewModel：
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的。
比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）
视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。
MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就
会自动得到相应更新，真正实现 事件驱动编程 。

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

idea 安装 Vue 插件没有Vue component选项
\1. 点击 file 打开设置 settings，展开 Editor 找到 file and code templates
\2. 找到 Vue single file component 并选中它，然后点击copy
\3. 复制后底部出现了一个新的文件
\4. 把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了

image-20210906171444925

3、第一个Vue程序

MVVM 模式的实现者

  • Model：模型层，在这里表示 JavaScript 对象

  • View：视图层，在这里表示 DOM（HTML 操作的元素）

  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel就是定义了一个 Observer 观察者。

  • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

CDN

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

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue"
        }
    });
</script>

</body>
</html>

4、基础语法

4.1、v-bind

v-bind可以简化为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-bind:title="message">111</h1>
    <h1 :title="message">222</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue"
        }
    });
</script>

</body>
</html>

4.2、v-if 系列

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1 v-if="ok==='A'">ok=A</h1>
  <h1 v-else-if="ok==='B'">ok=B</h1>
  <h1 v-else>ok=error</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
      ok: 'A'
    }
  });
</script>
</body>
</html>

4.3、v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  <li v-for="(item, index) in items">
    {{item.message}}->{{index}}
  </li>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
      items: [
        {message: '岩弟弟'},
        {message: 'yaya'},
        {message: 'lxw'}

      ]
    }
  });
</script>
</body>
</html>

4.4、v-on

v-on 监听事件：

v-on可以简化为@

事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的methods 中的方法事件！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  <button v-on:click="sayHi">点击</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "lxw"
    },
    methods: {
      sayHi: function (event) {
        alert(this.message);
      }
    }

  });
</script>

</body>
</html>

4.5、v-model

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发
生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向
绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  输入的：<input type="text" v-model="message">{{message}}<br>

  输入的：<textarea type="text" v-model="message2"></textarea>{{message2}}<br>

  <input type="radio" name="sex" value="男" v-model="message3">男
  <input type="radio" name="sex" value="女" v-model="message3">女<br>
  <p>
    选中了：{{message3}}
  </p>

  <select v-model="message4">
    <option value="" disabled>请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>选中了{{message4}}</span>


</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "123",
      message2: "123",
      message3: '',
      message4: ''
    }

  });
</script>
</body>
</html>

5、组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、
Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式
来组织：

image-20210906190731554

注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
 <lxw v-for="item in items" v-bind:lxwitem="item"></lxw>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  Vue.component('lxw',{
    props:['lxwitem'],
    template: '<li>{{lxwitem}}</li>'
  })

  var vm = new Vue({
    el: "#app",
    data: {
      items: ['java','Linux','web']
    }

  });
</script>
</body>
</html>

6、计算属性

计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>currentTime1={{currentTime1()}}</h2>
  <h2>currentTime2={{currentTime2}}</h2>

</div>

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

  var vm = new Vue({
    el: "#app",
    data: {
      message: "hello,vue"
    },
    methods: {
      currentTime1: function () {
        return Date.now();
      }
    },
    computed: { //计算属性
      currentTime2: function () {
        return Date.now();
      }
    }

  });
</script>
</body>
</html>

如果在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用
vm.message="qinjiang" 改变下数据的值，再次测试观察效果！

image-20210906193500028

结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

7、插槽

插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  <!--静态页面-->
  <p>列表</p>
  <ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>Web</li>
  </ul>

  <!--插槽-->
  <todo>
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
      <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>

  </todo>

</div>

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

  Vue.component('todo',{
    template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                  <slot name="todo-items"></slot>\
                </ul>\
               </div>'
  });

  Vue.component('todo-title',{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })
  Vue.component('todo-items',{
    props: ['item'],
    template: '<li>{{item}}</li>'
  })

  var vm = new Vue({
    el: "#app",
    data: {
      title: 'lxw-Title',
      todoItems: ['lxw','ydd','yy']
    }

  });
</script>
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  <!--静态页面-->
  <p>列表</p>
  <ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>Web</li>
  </ul>

  <!--插槽-->
  <todo>
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
      <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                  v-bind:item="item" :index="index" @remove="removeItem(index)" :key="index"></todo-items>

  </todo>

</div>

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

  Vue.component('todo',{
    template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                  <slot name="todo-items"></slot>\
                </ul>\
               </div>'
  });

  Vue.component('todo-title',{
    props: ['title'],
    template: '<div>{{title}}</div>'
  });

  Vue.component('todo-items',{
    props: ['item','index'],
    template: '<li>{{index}}->{{item}}<button @click="remove">删除</button></li> ',
    methods: {
      remove: function (index) {
        this.$emit('remove',index);
      }
    }
  });

  var vm = new Vue({
    el: "#app",
    data: {
      title: 'lxw-Title',
      todoItems: ['lxw','ydd','yy']
    },
    methods: {
      removeItem: function (index) {
        console.log("删除了"+this.todoItems[index]);
        this.todoItems.splice(index,1);
      }
    }
    
  });
</script>
</body>
</html>

image-20210906204357344

8、axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API [ JS中链式编程 ]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决模板闪烁问题 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="vue" v-clock>
  <h2>{{info.name}}</h2>
    <h2><a :href="info.url">{{info.url}}</a> </h2>
  <h2>{{info.page}}</h2>
  <h2>{{info.address}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue',

    data(){
      return{
        //请求的返回参数必须和json字符串一样
        info:{
          name: null,
          url: null,
          page: null,
          address: {
            street: null,
            city: null,
            country: null
          }
        }
      }
    },
    mounted(){ //钩子函数,链式编程，ES6新特性
        axios.get('data.json').then(response=>(this.info=response.data));
    }

  });

</script>

</body>
</html>

9、真正的第一个Vue-cli程序

安装nodejs

官网下载，安装

验证：

node -v
npm -v

安装淘宝镜像加速器

# -g 全局安装
npm install cnpm -g
# 或使用以下语句解决npm速度慢
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

npm install vue-cli -g

第一个 vue-cli 应用程序
1、我们新建一个文件夹 vue-cli；
2、创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue
# 一路都选择no即可;

初始化并运行

cd myvue
npm install
npm run dev

idea打开

可以在idea中用terminal执行npm run dev

也可以像配置tomcat一样添加npm，然后启动

10、webpack

webpack是一个打包工具，打包成ES5

安装webpack

npm install webpack -g
npm install webpack-cli -g

11、vue-router路由

基于第一个 vue-cli 进行测试学习;先查看node_modules中是否存在 vue-router
vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你
的项目目录，输入下面命令。

npm install vue-router --save-dev

12、Element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

安装

npm i element-ui -S

13、未完待续（不续了）

...

0
版权归属： 这就是之谦
本文链接： https://badwei.xyz/archives/vue--kuang-shen-ru-men
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区