一、Vue的基本使用及模板语法

1、Vue简介

1.1 Vue是一套用于构建用户界面的渐进式框架：

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

1.2 优点：

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

2、Vue的基本使用

2.1 Vue使用的基本步骤

1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法做功能了
4、把vue提供的数据填充到标签里面

2.2 Hello World实例

<!DOCTYPE html> 
<html lang="en">  
  <head>  
  <meta charset="UTF-8">
  <title>Hello World</title> 
  </head> 
<body>  
  <div id="app">  
    <div>{{msg}}</div>  
    <div>{{1+1}}</div>  
    <div>{{msg+'-----'+123}}</div>  
  </div>  
<script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        })
    </script> 
</body>  
</html>

1、实例参数分析：

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

2、差值表达式用法：

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

3、Vue代码运行原理分析

概述编译过程的概念(Vue语法—>原生语法)

在这里插入图片描述

3、Vue的模板语法

3.1 前端渲染

(1）定义：把数据填充到HTML标签中

在这里插入图片描述

(2）前端渲染方式

原生js拼接字符串

使用前端模板引擎

使用vue特有的模板语法

(3）模板语法概览：

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构

3.2 指令

(1）指令定义

本质就是自定义属性

指令的格式：Vue中都是以v-开头的

(2）v-cloak指令

v-cloak：防止页面加载时出现闪烁问题；

“闪动”产生原因：Vue解析差值表达式是先将差值表达式显示在页面中，然后迅速替换为对应的内容；

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

指令用法：

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

<head>
    <meta charset="UTF-8">
    <title>数据绑定指令</title>
</head>

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

</html>

运行结果如图：

（4）数据响应式

响应式：

1、html5中的响应式：屏幕尺寸变化导致样式的变化

2、数据的响应式：数据的变化导致页面内容的变化

数据绑定：将数据填充到标签中，用指令或差值表达式默认就是响应式的
v-once：只编译一次，显示内容之后不再具有响应式功能

v-once使用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能

3.3 双向数据绑定

（1）定义：数据内容的变化会导致显示发生变化

后续会继续更新.......

Vue学习总结（更新中）