Vue全家桶之 Vue基础

冷不防 2022-11-22 10:28 368阅读 0赞

### 目录 ###

*  1. Vue 概述
 *  2. Vue 基本使用
 *   *  2.1 Vue安装
     *   *  2.1.1 直接用 script 标签 引入
         *  2.1.2 NPM
         *  2.1.3 其它安装方式（略...）
     *  2.2 与传统开发模式对比
     *  2.3 Vue.js 之 HelloWorld 细节分析
     *   *  2.3.1 Vue实例参数
         *  2.3.2 插值表达式的用法
         *  2.3.3 Vue代码运行原理
 *  3. Vue模板语法
 *   *  3.1 模板语法概述
     *   *  3.1.1 理解前端渲染
         *  3.1.2 前端渲染方式
         *  3.1.3 \*\*Vue模板语法概览\*\*
     *  3.2 指令
     *   *  3.2.1 什么是指令
         *  3.2.2 v-cloak指令用法
         *  3.2.3 数据绑定指令
         *  3.2.4 数据响应式
     *  3.3 双向数据绑定指令
     *   *  3.3.1 什么是双向数据绑定
         *  3.3.2 v-model 指令用法
         *  3.3.3 MVVM设计思想
     *  3.4 事件绑定
     *   *  3.4.1 Vue如何处理事件？

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

# 1. Vue 概述 #

![watermark_image_d2F0ZXIvYmFpa2U4MA_g_7_xp_5_yp_5][]

##### 　　尤雨溪：Vue.js 的创建者 #####

2014 年 2 月， Vue.js 正式发布  
　 　2015 年 10 月 27 日，正式发布 1.0.0  
　 　2016 年 4 月 27 日，发布 2.0 的预览版本

### Vue是什么 ？ ###

*  **Vue**(读音 `/vjuː/`，类似于 view) 是一套用于构建用户界面的 渐进式框架 ；
 *  vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

使用 Vue 将 helloworld 渲染到页面上：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]

### Vue：渐进式 JavaScript 框架 ###

![logo.png][]

声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建

官网：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]

*  易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue；
 *  灵活：在一个库和一套完整框架之间自如伸缩；
 *  高效： 20kB 运行大小，超快虚拟 DOM。

# 2. Vue 基本使用 #

## 2.1 Vue安装 ##

### 2.1.1 直接用 script 标签 引入 ###

*  **开发环境** 版本（包含了有帮助的命令行警告）
    
        // 制作原型或学习，可以使用最新版本：
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 *  **生产环境** 版本（优化了尺寸和速度）
    
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
      
    
    
    对于 **生产环境**，推荐 链接 到 明确的**版本号** (避免新版本造成不可预期的破坏）：
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

### 2.1.2 NPM ###

构建 大型应用 时推荐使用 NPM 安装：

#最新稳定版
    $ npm install vue

### 2.1.3 其它安装方式（略…） ###

更多 >> 访问 官方文档 ：[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]

## 2.2 与传统开发模式对比 ##

*  **原生JavaScript**
    
        <div id="msg"></div>
        <script type="text/javascript">
        	var msg = 'Hello World'
        	var div = document.getElementById('msg')
        	div.innerHTML= msg
        </script>

*  **jQuery**
    
        <div id="msg"></div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
        	var msg = 'Hello World';
        	$('#msg').html(msg);
        </script>

*  **Vue**
    
        <div id="app">
        	<div>{ {  msg }}</div>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
        new Vue({ 
           el: '#app',
           data: { 
           	  msg: 'HelloWorld'
        	}
        })
        </script>

## 2.3 Vue.js 之 HelloWorld 细节分析 ##

### 2.3.1 Vue实例参数 ###

*  **el** ：元素的挂载位置（值可以是 CSS 选择器 或 DOM 元素）；
 *  **data** ：模型数据（值是一个 对象）
    
    **示例1：**
    
        var app = new Vue({ 
          el: '#app',
          data: { 
            message: 'Hello Vue!'
          }
        })

### 2.3.2 插值表达式的用法 ###

*  将数据填充到 HTML 标签中；
    
    **示例2：**
    
        <div id="app">
          {
             { message }}
        </div>
        
        
 *  插值表达式支持基本的计算操作

### 2.3.3 Vue代码运行原理 ###

概述编译过程的概念（ Vue 语法 → 原生语法）

Vue 代码

Vue框架

原生JavaScript

# 3. Vue模板语法 #

## 3.1 模板语法概述 ##

### 3.1.1 理解前端渲染 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]

### 3.1.2 前端渲染方式 ###

*  原生 js 拼接字符串；
 *  使用前端模板引擎；
 *  使用 vue 特有的模板语法。

1.  **原生js拼接字符串**
    
    基本上就是将数据以字符串的方式拼接到 HTML 标签中，前端代码风格大体如下示。
    
        var d = data.weather;
        var info = document.getElementById('info');
        info.innerHTML = '';
        for(var i=0;i<d.length;i++){ 
        	var date = d[i].date;
        	var day = d[i].info.day;
        	var night = d[i].info.night;
        	var tag = '';
        	tag += '<span>日期：'+date+'</sapn><ul>'
        	tag += '<li>白天天气：'+day[1]+'</li>'
        	tag += '<li>白天温度：'+day[2]+'</li>'
        	tag += '<li>白天风向：'+day[3]+'</li>'
        	tag += '<li>白天风速：'+day[4]+'</li>'
        	tag += '</ul>';
        	var div = document.createElement('div');
        	div.innerHTML = tag;
        	info.appendChild(div);
        }
    
    **缺点**：不同开发人员的代码风格差别很大，随着业  
    务的复杂，后期的维护变得逐渐困难起来。  
      
    
2.  **使用前端模板引擎**
    
    以下是基于模板引擎 `art-template` 的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
    
        <script id="abc" type="text/html"> { { if isAdmin}} <h1>{ { title}}</h1> <ul> { { each list as value i}} <li> 索引 { { i + 1}}:{ { value}}</li> { { /each}} </ul> { { /if}} </script>
    
    **优点**： 大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
    
    **缺点**： 没有专门提供事件机制。

### 3.1.3 **Vue模板语法概览** ###

*  差值表达式；
 *  指令；
 *  事件绑定；
 *  属性绑定；
 *  样式绑定；
 *  分支循环结构。

## 3.2 指令 ##

### 3.2.1 什么是指令 ###

**指令** 的 **本质** 就是 **自定义属性**。

Vue 中指令都是以 `v-` 开头（比如：`v-cloak`）

官网：[https://cn.vuejs.org/v2/api/\#指令][https_cn.vuejs.org_v2_api]

### 3.2.2 v-cloak指令用法 ###

*  **`v-cloak`**：防止页面加载时出现闪烁
    
    1）插值表达式存在的问题：“闪动”；  
    2）如何解决该问题：使用 v cloak 指令；  
    3）解决该问题的原理：先隐藏，替换好值之后再显示最终的值。
    
    **示例如下**：
    
        <style type="text/css"> /*1、通过属性选择器 选择带有属性 v-cloak的标签，使其隐藏*/ [v-cloak]{ display: none; /* 元素隐藏 */ } </style>
        
        <body>
        	<div id="app">
        		
        		<div v-cloak> {
             {msg}} </div>
        	</div>
        
        	<script type="text/javascript" src="js/vue.js"></script>
        	<script type="text/javascript"> var vm = new Vue({ el: '#app', // 指定挂载位置：元素id 为 app 的元素 data: { // data 里存储的模型数据 msg: 'Hello Vue' } }); </script>
        </body>
        </html>

### 3.2.3 数据绑定指令 ###

*  **`v-text` 填充纯文本** ；
    
    用于将数据填充到标签中，作用与插值表达式类似，但没有闪动问题。相比插值表达式更加简洁。
    
    如果数据中有HTML标签会将html标签一并输出。
    
    > **注：** 此为 单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
    
        <div id="app">
        	
        	<p v-text="msg"></p>
        	<p>
        		
        		{
             {msg}}
        	</p>
        </div>
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>

*  **`v-html`填充 HTML 片段**；
    
    用法和`v-text`相似，但是它可以将 HTML 片段填充到标签中。
    
    ① 存在安全问题；
    
    ② 本网站内部数据可以使用（一般只在可信任内容上使用 `v-html`），永不用在用户提交的内容上（来自第三方的数据不可以用）。
    
    **示例**：
    
        <div id="app">
        	<p v-html="html"></p> 
        	<p>{
             {message}}</p> 
        	<p v-text="text"></p> 
        </div>
        
        <script> let app = new Vue({ el: "#app", data: { message: "<span>通过双括号绑定</span>", html: "<span>html标签在渲染的时候被解析</span>", text: "<span>html标签在渲染的时候被源码输出</span>", } }); </script>
    
    `v-html`与`v-text`区别在于，`v-text`输出的是纯文本，浏览器不会对其再进行html解析，但`v-html`会将其当 html 标签解析。  
    后输出。  
      
    
 *  **`v-pre`填充原始信息**；
    
     *  显示原始信息跳过编译过程；
     *  跳过这个元素和它的子元素的编译过程；
     *  一些静态的内容不需要编译时，加这个指令可以加快渲染。  
          
        
    
    **示例**：
    
        <span v-pre>{
             { this will not be compiled }}</span>
        
        <span v-pre>{
             {msg}}</span>
        
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>

### 3.2.4 数据响应式 ###

*  **如何理解响应式**
    
    ① html5 中的响应式（屏幕尺寸的变化导致样式的变化）
    
    ② 数据的响应式（数据的变化导致页面内容的变化）  
      
    
 *  **什么是数据绑定**
    
    **数据绑定**：将数据填充到标签中  
      
    
 *  **`v-once` 只编译一次**
    
    即，显示内容之后不再具有响应式功能；
    
    执行 一次性 的插值【当数据改变时，插值处的内容不会继续更新】
    
         
         
        <span v-once>{
             { msg}}</span>
        
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>

## 3.3 双向数据绑定指令 ##

### 3.3.1 什么是双向数据绑定 ###

*  当数据发生变化的时候，视图也就发生变化；
 *  当视图发生变化的时候，数据也会跟着同步变化。  
      
    
    
    **图示**：
    
    ![在这里插入图片描述][20201106152608440.gif_pic_center]

### 3.3.2 v-model 指令用法 ###

**注：** `v-model`指令限制在 `<input>`、`<select>`、`<textarea>`、`components` 中使用。

### 3.3.3 MVVM设计思想 ###

*  **M**(model)
 *  **V**(view)
 *  **VM**(View Model)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]

`MVC` 是后端的分层开发概念； `MVVM`是前端视图层的概念，主要关注于 视图层分离，也就是说：`MVVM`把前端的视图层，分为了 三部分 `Model`, `View` , `VM ViewModel`：

*  m（model）  
    数据层，Vue 中 数据层都放在 `data` 里面；
 *  v（view / 视图）  
    Vue 中 view 即 我们的 HTML 页面；
 *  vm （view-model） 控制器 将数据和视图层建立联系  
    `vm` 即 **Vue** 的 **实例** ，就是 `vm`。

## 3.4 事件绑定 ##

### 3.4.1 Vue如何处理事件？ ###

*  **`v-on` 指令**：用来绑定事件
    
    形式如：`v-on:click` 简写为 `@click`;
    
    **用法**：
    
        <input type='button' v-on:click='num++'/>
    
    **简写形式**：
    
        <input type='button' @click='num++'/>
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]
    
      
    
    
    **`v-on`事件函数中传入参数**
    
        <div id="app">
                <div>{
             {num}}</div>
                <div>
                    
                    <button v-on:click='handle1'>点击1</button>
                    
                    <button v-on:click='handle2(123,456,$event)'>点击2</button>
                </div>
            </div>
            <script type="text/javascript" src="js/vue.js"></script>
            <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { console.log(event.target.innerHTML) }, handle2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) this.num++; } } }); </script>

[watermark_image_d2F0ZXIvYmFpa2U4MA_g_7_xp_5_yp_5]: /images/20221120/9658dc1884ef401795b4bb9e02d637b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f54206535b8f425a87b581be070a2ce4.png
[logo.png]: /images/20221120/a225caf10c9c4c8da99eeae7bfff6ad8.png
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/98aa915437f34ead9175322e7d8a1c3b.png
[https_cn.vuejs.org_v2_api]: https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
[20201106152608440.gif_pic_center]: /images/20221120/9fb915c547f349ec816b575ebe7edd1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/640a2452a23d4ca59b99f662f3fcb827.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/c2f5ed46d1d34a37887fe6459e69838d.png