Vue入门（一）—— 模板语法_vue模板语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_43344890/article/details/113486574

本文是Vue.js初学者的入门教程，深入探讨Vue模板语法，包括插值表达式、指令、事件绑定、数据响应式和双向数据绑定。通过Hello World案例分析，解释Vue实例参数、插值表达式的用法以及Vue代码的运行原理。此外，文章还涵盖了v-cloak、v-text、v-html等指令的使用，以及如何通过v-model实现MVVM模式。最后，通过选项卡案例展示了Vue在实际场景中的应用。

摘要由CSDN通过智能技术生成

Vue.js 是什么？

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

什么是渐进式框架？

渐进式框架，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。

使用Vue将Hello World渲染到页面上

<body>
		<div id="app">
			<div>{
  {msg}}</div>
			<div>{
  {1+2}}</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm = new Vue({
    
				el: '#app',
				data: {
    
					msg: 'Hello World'
				}
			});
		</script>
</body>

上述步骤：

需要提供标签用于填充数据
引入Vue.js库文件
使用Vue语法做功能
把Vue提供的数据填充到标签里面

Vue之Hello World细节分析

1.实例参数分析

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

2.插值表达式用法

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

3.Vue代码运行原理分析

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

在这里插入图片描述

如何理解前端渲染？

前端渲染，简单来说就是把数据填充到HTML标签中。

在这里插入图片描述
前端渲染方式

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

Vue模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

简单来说，就是使用了Vue的模板语法，在js中就不需要操作DOM了，而是直接通过操作Vue实例中的data对象中的数据来控制DOM。

模版语法概览

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

插值表达式

插值表达式，就是用固定的语法，在根据实例接管的范围内的标签中使用Vue中定义的数据。这样说有点拗口，我们拿上述的Hello World的例子来看一下，在Vue的实例中可以看到，我们在data对象中定义了一个msg的变量。

var vm = new Vue({
   
				el: '#app',
				data: {
   
					msg: 'hello world'
				}
			});

那么我们在HTML标签中就可以使用这个变量。

<div id="app">
	<div>{
  {msg}}</div>
	<div>{
  {1+2}}</div>
</div>

其中{ { msg }}就是插值表达式，表示显示msg这个变量，插值表达式只显示Vue实例中data对象下的变量，插值表达式还支持基本的计算，如加、减、乘、除、取余。

指令

指令本质上就是自定义属性
Vue中指令都是以 v- 开始的（如：v-cloak）

v-cloak

防止页面加载时出现闪烁问题

为什么会有闪烁问题？
代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，当加载完JS后才把插值语法替换掉，所以我们会看到闪烁问题。

<style>
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让它隐藏
 */
  [v-cloak]{
    
    /* 元素隐藏    */
    display: none;
  }
</style>
<body>
  <div id="app">
    <!-- 2、 让带有插值语法的标签添加 v-cloak 属性， 
         在数据渲染完成之后，v-cloak 属性会被自动去除，
         v-cloak 一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，
		 也就是对应的标签会变为可见-->
    <div  v-cloak  >{
  {msg}}</div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
    
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
    
        msg: 'Hello Vue'
      }
    });
</script>
</body>

背后原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终结果。

v-text

v-text 指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将HTML标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">
    <!--  
		注意:在指令中不要写插值语法，直接写对应的变量名称， 
        在 v-text 中赋值的时候不要在写插值语法，
		一般属性中不加 {
   {}}  直接写对应的数据名 
	-->
    <div v-text="msg"></div>
    <div>
        <!-- Vue 中只有在标签的 内容中 才用插值语法 -->
        {
  {msg}}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el: '#app',
        data: {
    
            msg: 'Hello Vue.js'
        }
    });
</script>

v-text 相比插值表达式更加简洁。

v-html

用法和 v-text 相似，但是它可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与 v-text 区别在于 v-tex t输出的是纯文本，浏览器不会对其再进行html解析，但 v-html 会将其当html标签解析后输出。

<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    <p>{
  {msg}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　var vm = new Vue({
    
　　el: "#app",
　　data: {
    
　　　  html: "<span>html标签在渲染的时候被解析</span>",
　　　　msg: "<span>通过双括号绑定</span>",　　　
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

v-pre

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程
一些静态的内容不需要编译加这个指令可以加快渲染

    <span v-pre>{
  { this will not be compiled }}</span>    
	<!--  显示的是{
   { this will not be compiled }}  -->
	<span v-pre>{
  {msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{
   {msg}}  -->
<script>
    new Vue({
    
        el: '#app',
        data: {
    
            msg: 'Hello Vue.js'
        }
    });
</script>

v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

 <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
<span v-once>{
  {msg}}</span>    
<script>
    new Vue({
    
        el: '#app',
        data: {
    
            msg: 'Hello Vue.js'
        }
    });
</script>

数据响应式

如何理解响应式？
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）

什么是数据绑定？
① 数据绑定：将数据填充到标签中

双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model 是一个指令，限制在<input>、<select>、<textarea>、components中使用，v-model 可用于双向数据绑定。

 <div id="app">
      <div>{
  {msg}}</div>
      <div>
         <!-- 当输入框中内容改变的时候，  页面上的 msg 会自动更新 -->
        <input type="text" v-model='msg'>
      </div>
 </div>

MVVM

在这里插入图片描述

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
M（model）：数据层，Vue 中数据层都放在 data 里面（普通的javascript数据对象）
V（view）：视图层，Vue 中 view 即我们的HTML页面（前端展示页面）
VM（ViewModel）：控制器，将数据层和视图层建立联系，Vue中的实例（Vue实例对象）

v-on（事件绑定）

用来绑定事件
形式如：v-on:click 缩写为 @click（v-on可以简写@）

<body>
    <div id="app">
        <div>{
  {num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle'>点击2</button>
            <button @click='handle()'>点击3</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type