Vue的学习经验

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

1、Vue简介

1.1 Vue是一套用于构建用户界面的渐进式框架：声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建

1.2 优点：

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kB运行大小，超快虚拟DOM

2、Vue的基本使用

2.1 Vue使用的基本步骤

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、可以使用vue的语法做功能了

4、把vue提供的数据填充到标签里面

2.2 Hello World实例

    
    



    

        
{{msg}}
        
{{1+1}}
        
{{msg+'-----'+123}}
    
    
    

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解析差值表达式是先将差值表达式显示在页面
中，然后迅速替换为对应的内容；
原理：先通过样式隐藏内容，然后在内存中进行值的替换,替换好之
后再显示最终的结果；

指令用法：

    
    
    
    



    

        
{{msg}}
    
    
    

运行结果如图：

3）数据绑定指令

v-text：填充纯文本(单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值)。
特点：相比差值表达式更加简洁，没有“闪动”问题
v-html：填充HTMl片段
特点：
1、存在安全问题
2、本网站内部数据可以使用，来自第三方的数据不可以用
v-pre：填充原始信息
特点：显示原始信息，跳过编译过程(分析编译过程)

运行结果如图：

4）数据响应式

响应式：
1、html5中的响应式：屏幕尺寸变化导致样式的变化
2、数据的响应式：数据的变化导致页面内容的变化
数据绑定：将数据填充到标签中，用指令或差值表达式默认就是响应式的
v-once：只编译一次，显示内容之后不再具有响应式功能
v-once使用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能

3.3 双向数据绑定

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

2）双向数据绑定分析
v-model指令用法