Vue 基础学习（1）：Vue 概述、Vue 基本使用、Vue 模板语法

_Tough_Girl

已于 2022-10-30 23:58:19 修改

阅读量219

点赞数 1

分类专栏： Vue2基础学习文章标签： vue.js

于 2021-09-26 09:41:41 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/120477026

版权

Vue2基础学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、Vue 概述

Vue：渐进式 JavaScript 框架

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

官网：https://cn.vuejs.org/v2/guide/

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

2、Vue 基本使用

2.1 传统开发模式对比

（1）原生 JS

<div id="msg"></div>

<script type="text/javascript">
	var msg = 'Hello World';
	var div = document.getElementById('msg');
	div.innerHTML = msg;
</script>

（2）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>

（3）Vue.js 之 HelloWorld 基本步骤

<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.2 Vue.js 之 HelloWorld 细节分析

（1）实例参数分析

el：元素的挂载位置（值可以是 CSS 选择器或者 DOM 元素）。
data：模型数据（值是一个对象）。

（2）插值表达式用法

将数据填充到 HTML 标签中。
插值表达式支持基本的计算操作。

（3）Vue 代码运行原理分析

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

在这里插入图片描述

3、Vue 模板语法

3.1 模板语法概述

（1）如何理解前端渲染？

把数据填充到 HTML 标签中。

在这里插入图片描述

（2）前端渲染方式

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

（3）原生 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);
}

（4）使用前端模板引擎

下面代码是基于模板引擎 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>

（5）模板语法概览

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

3.2 指令

3.2.1 什么是指令？

什么是自定义属性
指令的本质就是自定义属性
指令的格式：以 v- 开始（比如：v-cloak）

3.2.2 v-cloak指令用法

插值表达式存在的问题：“闪动”。
如何解决该问题：使用 v-cloak 指令。
解决该问题的原理：先隐藏，替换好值之后再显示最终的值。
用法：和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
让带有插值语法的添加 v-cloak 属性，在数据渲染完成之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。

官网：https://cn.vuejs.org/v2/api/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>指令 v-cloak 的用法</title>
    <style>
        /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 2、 让带有插值语法的 添加 v-cloak 属性
    在数据渲染完成之后，v-cloak 属性会被自动去除，
    也就是对应的标签会变为可见 -->
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // v - cloak指令的用法
        // 1、提供样式
        // [v - cloak]{
        //     display: none;
        // }
        // 2、在插值表达式所在的标签中添加v-cloak指令

        // 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!'
            }
        });
    </script>
</body>

</html>

3.2.3 数据绑定指令

v-text 填充纯文本
① 相比插值表达式更加简洁。
v-html 填充 HTML 片段
① 存在安全问题。
② 本网站内部数据可以使用，来自第三方的数据不可以用。
v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）

 <div id="app">
     <div>{{msg}}</div>
     <div v-text='msg'></div>
     <div v-html='msg1'></div>
     <div v-pre>{{msg}}</div>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             msg: 'Hello Vue!',
             msg1: '<h1>HTML</h1>'
         }
     });
 </script>

效果：
在这里插入图片描述

3.2.4 数据响应式

如何理解响应式

① html5 中的响应式（屏幕尺寸的变化导致样式的变化）。
② 数据的响应式（数据的变化导致页面内容的变化）。
修改响应式数据
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
① 参数1：表示要处理的数组名称
② 参数2：表示要处理的数组的索引
③ 参数3：表示要处理的数组的值
什么是数据绑定
① 数据绑定：将数据填充到标签中
v-once 只编译一次

① 显示内容之后不再具有响应式功能。
② 应用场景：如果显示的信息后续不需要再修改，可以使用 v-once，这样可以提高性能。

<div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
    <!-- v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。 -->
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            info: '你好!'
        }
    });
</script>

3.3 双向数据绑定指令

（1）什么是双向数据绑定？
1、从页面到数据
2、从数据到页面
在这里插入图片描述
（2）双向数据绑定分析

v-model 指令用法：在表单控件或者组件上创建双向绑定。

<input type='text' v-model='uname'/>

限制：<input>、<select>、<textarea>、components。

（3）MVVM 设计思想
① M(model)
② V(view)
③ VM(View-Model)

在这里插入图片描述
MVVM 分为 Model、View、ViewModel 三者。

Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
View 代表 UI 视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

3.4 事件绑定

（1）Vue 如何处理事件？

v-on指令用法：
<input type=‘button' v-on:click='num++'/>
v-on 简写形式：
<input type=‘button' @click='num++'/>

（2）事件函数的调用方式

直接绑定函数名称
<button v-on:click='say'>Hello</button>
调用函数
< button v-on:click='say()'>Say hi</button>

（3）事件函数参数传递

普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是 $event。

（4）事件修饰符

.stop 阻止冒泡（ event.stopPropagation();）
<a v-on:click.stop="handle">跳转</a>
.prevent 阻止默认行为（event.preventDefault();）
<a v-on:click.prevent="handle">跳转</a>

（5）按键修饰符

.enter 回车键
<input v-on:keyup.enter='submit'>
.delete 删除键
<input v-on:keyup.delete='handle'>

（6）自定义按键修饰符

全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
<input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'>

3.5 属性绑定

（1）Vue 如何动态处理属性？

v-bind 指令用法
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>

（2）v-model 的底层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

3.6 样式绑定

（1） class 样式处理

对象语法
<div v-bind:class="{ active: isActive }"></div>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>

（2）style 样式处理

对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

3.7 分支循环结构

（1）分支结构

v-if
v-else
v-else-if
v-show

（2）v-if 与 v-show 的区别

v-if 控制元素是否渲染到页面。
v-show 控制元素是否显示（已经渲染到了页面）（display:none）。

（3）循环结构

v-for 遍历数组

<li v-for='(item,index) in list'>
	{{item}} + '---' +{{index}}
</li>

key 的作用：用 key 管理可复用的元素，帮助 Vue 区分不同的元素，从而提高性能。
Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

<li :key='item.id' v-for='(item,index) in list'>
	{{item}} + '---' {{index}}
</li>

v-for 遍历对象。
遍历对象必须是： value,key,index (值，键，索引) 这个顺序，名称可以改，但顺序不能变。

<div v-for='(value, key, index) in object'></div>

v-if 和 v-for 结合使用
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高（vue2）。

<div v-if='value==12' v-for='(value, key, index) in object'></div>

_Tough_Girl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础学习（1）：Vue 概述、Vue 基本使用、Vue 模板语法

Vue 基础学习（1）：Vue 概述、Vue 基本使用、Vue 模板语法
复制链接

扫一扫

专栏目录