Vue 前端

以你之姓@ 2022-10-13 12:46 102阅读 0赞

**目录**

什么是Vue

什么是渐进式框架？

Node.js  和npm是什么

HTML DOM 教程

Vue 教程

vue $ 作用：

DIV是什么

Vue.js 模板语法

HTML 属性中的值应使用 v-bind 指令,v-module。lable for

v-if

v-bind

缩写

v-bind 缩写

v-on 缩写

v-else-if

for 循环

--------------------

#  #

# 什么是Vue #

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

# 什么是渐进式框架？ #

就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情

# Node.js  和npm是什么 #

Node.js是一个构建在谷歌V8引擎的js运行环境。Node.js的事件驱动、非阻塞IO模型使其轻量、高效。npm是Node.js的包管理系统，是全世界最大的开发库生态系统。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：  
1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。  
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。  
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

*npm（node package manager）* ：是 JavaScript世界的包管理工具,并且是 Node.js平台的默认包管理工具。通过 *npm*可以安装、共享、分发代码,管理项目依赖关系。从包管理的角度上来看，npm应该算是类似iOS中的CocoaPods，Java中的Maven。这样看起来就好理解多了。详细使用和原理还待深究。

cnpm，：[使用淘宝 NPM 镜像][NPM]。

# HTML DOM 教程 #

DOM (Document Object Model) 译为**文档对象模型**，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

# Vue 教程 #

![20210707091035450.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1][]

<body>
    	<div id="vue_det">
    		<h1>site : {
       {site}}</h1>
    		<h1>url : {
       {url}}</h1>
    		<h1>{
       {details()}}</h1>
    	</div>
    	<script type="text/javascript">
    		var vm = new Vue({
    			el: '#vue_det',
    			data: {
    				site: "菜鸟教程",
    				url: "www.runoob.com",
    				alexa: "10000"
    			},
    			methods: {
    				details: function() {
    					return  this.site + " - 学的不仅是技术，更是梦想！";
    				}
    			}
    		})
    	</script>
    </body>
    </html>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue\_det，在 div 元素中：

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

**data** 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。\{ \{ \}\} 用于输出对象属性和函数返回值。

# vue $ 作用： #

通过$访问new vue的属性；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2][]

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3][]

# *DIV是什么* #

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4][] #

# Vue.js 模板语法 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5][]

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

DOM (Document Object Model) 译为**文档对象模型**，是 HTML 和 XML 文档的编程接口。

使用 v-html 指令用于输出 html 代码：

<div id="app">
        <div v-html="message"></div>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>菜鸟教程</h1>'
      }
    })
    </script>

### HTML 属性中的值应使用 v-bind 指令,v-module。lable for ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    </head>
    <style>
    .class1{
      background: #444;
      color: #eee;
    }
    </style>
    <body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    
    <div id="app">
      <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
      <br><br>
      <div v-bind:class="{'class1': use}">
        v-bind:class 指令
      </div>
    </div>
        
    <script>
    new Vue({
        el: '#app',
      data:{
          use: false
      }
    });
    </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7][]

点击汉字不管用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8][]

点击汉字管用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10][]

### v-if ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11][]

# v-bind #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 12][]

## 缩写 ##

### v-bind 缩写 ###

Vue.js 为两个最为常用的指令提供了特别的缩写：

<a v-bind:href="url"></a>
    
    <a :href="url"></a>

### v-on 缩写 ###

<a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>

# v-else-if #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 13][]

# for 循环 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 15][]

[https://www.runoob.com/vue2/vue-loop.html][https_www.runoob.com_vue2_vue-loop.html]

[Link 1]: https://v3.cn.vuejs.org/guide/single-file-component.html
[Link 2]: https://github.com/vuejs/awesome-vue#components--libraries
[NPM]: https://www.runoob.com/nodejs/nodejs-npm.html#taobaonpm
[20210707091035450.png]: https://img-blog.csdnimg.cn/20210707091035450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70]: /images/20221005/520acf2c076042e1b286071676edaf61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1]: /images/20221005/375d418f48a94af5be057a359c83f5aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2]: /images/20221005/625167f6db3944a2a307a677dbc2a59e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3]: /images/20221005/c6bfa6d6bb774dbfa0df6442c84ed801.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4]: /images/20221005/4005b3b111e04dfa9489d6aedd0ee347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5]: /images/20221005/ac68a4fc2f864d50a3dfd07d2842d998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6]: /images/20221005/ea3025c3ac5a4aba9fedb203f63ef746.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7]: /images/20221005/4e50611e6e5543e6a51d2fb2f41294d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8]: /images/20221005/5e49f3f727e64015bdeaf2814d25722b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9]: /images/20221005/bc3ec83d698e487baf6dcc773dbae675.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10]: /images/20221005/8d08797de4ab4d02a55a6dbd14dc3b22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11]: /images/20221005/080e7a6db38b46ecbd395c3302650e75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 12]: /images/20221005/e9434d1caf364956b1620e1414051c05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 13]: /images/20221005/031d22c257b94f50b0e92a9cc52c3fdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 14]: /images/20221005/b1661d3a418848c29433077f943bae8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 15]: /images/20221005/a829525d2dfe44468c6d4b078664baeb.png
[https_www.runoob.com_vue2_vue-loop.html]: https://www.runoob.com/vue2/vue-loop.html