Vue---Vue基础

一.Vue概述

二.Vue的基本使用

2.1Vue.js之hello world 基本实例

    
    
    



    

        {{message}}
    

2.2Vue.js之hello world 细节分析

 1.实例参数分析

* el :  元素的挂载位置（值可以是CSS选择器或者DOM元素）

* data : 模型数据 （值是一个对象）

2.插值表达式（{{}}）的用法 

* 将数据填充到HTML标签中

* 插值表达式支持基本的计算操作

3.Vue代码运行原理分析

* 概述编译过程的概念（Vue语法--->原生语法） 

三.Vue模板语法

3.1.模板语法概述 

1.如何理解前端渲染

2.前端渲染方式

• 原生js拼接字符串

• 使用前端模板引擎

• 使用Vue特有的模板语法

 3.2.指令

1.什么是指令

• 什么是自定义属性

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

• 指令的格式：以v-开始（比如：v-cloak）

2.v-cloak指令用法

• 插值表达式（{{}}）存在的问题：“闪动”

• 如何解决该问题：使用v-cloak指令

• 原理：先隐藏，替换好值之后再显示最终的值

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

3.数据绑定指令

*  v-text 填充纯文本

        ①相比插值表达式更加简洁 

*  v-html 填充Html片段

        ①存在安全问题

        ②本网站内部数据可以使用，来自第三方的数据不可以用

*  v-pre 填充原始信息

        ①显示原始信息，跳过编译过程（分析编译过程）

！注意：v-text没有闪动问题 

4.数据响应式

*  如何理解响应式

       ①   html5中的响应式 （屏幕尺寸的变化导致样式的变化） 

       ②   数据的响应式    （数据的变化导致页面内容的变化）

*  什么是数据绑定

       ①   数据绑定 ： 将数据填充到标签中

*  v-once 只编译一次

       ①   显示内容之后不再具有响应式功能 

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

3.3.双向数据绑定 

1.什么是双向数据绑定

* v-model指令

2.双向数据绑定分析

    

         {{message}}
    

 

• 双向数据绑定（（页面渲染的数据改变会影响vue代码里面的数据，反过来，vue代码的数据改变也会影响页面数据的改变））

• 双向数据绑定主要用于输入框

 3.MVVM设计思想

①M(model)

②V(view)

③VM(View-Model)

M（data里面的数据）（提供数据）

V（页面展示效果）

 

* Model（模板数据）通过ViewModel的数据绑定（data binding）把数据绑定到View（视图）

*  View（视图）通过ViewModel的事件监听（DOM listeners）修改Model（模板数据）

3.4事件绑定 

1.Vue如何处理事件

* v-on指令用法

* v-on简写形式

2.事件函数的调用方式

* 直接绑定函数名称

* 调用函数

3.事件函数参数传递

* 普通参数和事件对象

1.事件绑定-参数传递

①如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

②如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

2.事件绑定-自定义按键修饰符 

规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode的值

 

3.5.属性绑定

1.Vue如何动态处理属性

* v-bind指令用法

跳转

* 缩写形式

跳转

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

3.6.样式绑定

1.class样式处理 

* 对象语法

hello

例子：

    
    
    
    



    

        hello

*  数组语法

hello

例子：

    
    
    
    



    

        hello

注意：样式绑定相关语法细节

①对象绑定和数组绑定可以结合使用

②class绑定的值可以简化操作

③默认的class会保留，当给class样式绑定时，相当于给元素新添加一个classl类名

2.style样式处理

* 对象语法

    
    
    
    



    

        hello

注意：样式中属性名需要驼峰命名

数组语法

 

    
    
    
    



    

        hello

3.7.分支循环结构

1.分支结构

①v-if

②v-else

③v-else-if

④v-show 

 2.v-if与v-show的区别

①v-if控制元素是否渲染到页面

②v-show控制元素是否显示（已经渲染到了页面）

注意：当我们需要频繁切换显示组件时，为了考虑页面性能，应该采用v-show，反正则使用v-if 

3.循环结构（数组）

*  v-for遍历数组

{{item}}

  
{{item}}{{index}}

*key的作用：帮助Vue区分不同的元素，从而提供性能

{{item}}{{index}}

 3.循环结构（对象）

 * v-for遍历对象

{{value}}{{key}}{{index}}

* v-if和v-for结合使用

{{value}}{{key}}{{index}}