Vue基础语法

vue

渐进式JavaScript框架
参考官网和API文档
库+框架（可以灵活使用）
高效

vue的基本使用

基本流程
1.提供标签用户填充数据
2.引入vue.js文件
3.使用vue的语法结构做功能
4.把vue提供的数据填充到标签里面

实例参数分析：
**el:**元素的挂载位置（值可以是css选择器或者DOM元素）
**data:**模型数据（值是一个对象，可以存放很多个键值对）
**methods:**vue中用来定义方法（函数）
调用方法中的函数，需要用this进行访问，在这里this 就是指的vue的实例对象

插值表达式：
将数据填充到标签里面
插值表达式支持基本的计算操作
运行原理
vue的语法转换为原生js代码（用过vue框架转换）

//原生JS
//jQuery

{{msg}}

Vue的模板语法

如何理解前端渲染？
后台数据和前端显示界面结合，呈现出来html页面内容

1.前端渲染方法
原生js拼接字符串：维护麻烦
**使用前端模板引擎：**没有提供专门的事件规则

模板语法

使用vue特有的模板语法：

1. **插值表达式
2. 指令：**
   什么是指令？
   什么是自定义属性？
   指令的本质就是自定义属性
   指令的格式：以V-开始（比如：v-cloak）
   v-cloak指令的使用方法：

//v-cloak
1.提供样式
[v-cloak]{
display:none;
}
2.在插值表达式所在标签中添加v-cloak指令

v-cloak指令的使用原理：
先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最后的结果，因此不会存在出现花括号的情况
v-text指令的使用方法：
在属性位置直接添加

//直接显示msg内容在html页面中

v-html指令的使用方法：
可以用类似于v-text的方法引入外部的html片段
v-pre：填充原始信息，显示原始的信息，跳过编译的过程，例如插值表达式{{msg}}可以直接显示在html页面中

数据响应式：
如何理解响应式：
1.html5的响应式就是屏幕尺寸的变化导致样式的变化
2.数据的响应式就是数据的变化导致页面内容的变化（修改数据会使页面数据立马变化）
什么是数据绑定：
数据绑定就是将诗句填充到标签中
**双向数据绑定：**页面到数据，数据到页面（表单的数据改变,v-model指令）
v-once:只编译一次，显示内容之后不再具有响应式功能//**应用场景：**如果显示的内容后期不再需要修改，不再监听该属性，可以提高性能

**3.事件绑定
前端应用必不可少的就是事件
v-on指令（简写@）：

事件的调用方式，有两种方法（绑定函数名称+直接调用函数）

》如果事件直接绑定函数名称，则默认会传递事件对象作为会见函数的第一个对象（event）
》如果事件绑定函数调用（function（）），那么事件对象必须作为最后一个参数显示传递，并且事件对象必须是$event（如果需要传递具体的参数，就是用函数调用的方式）

事件修饰符
有多个事件修饰符（官方文档）
阻止冒泡：
阻止默认行为：

可以串联书写 .stop.prevent【书写顺序会有影响】

按键修饰符

除了官方的按键修饰符，也可以自定义按键修饰符（keycode)

4.属性绑定
v-bind:href=“url”
简写可以直接用“：”，：href=“url”


5.样式绑定

样式绑定
数组绑定

class样式处理和style样式处理

v-bind：进行样式绑定，使用！进行取反

样式绑定相关语法细节：
1、数组绑定和对象绑定可以结合使用
数组里面可以放对象[,{}]

2、class绑定的值可以简化操作
3、默认的class如何处理,默认的class会保留

6.分支循环结构**
条件：
v-if
v-else
v-else if
v-show：控制元素是否显示，display:none
v-if控制的是元素是否渲染到页面，v-show控制元素是否显示到页面

循环结构：

v-for指令遍历数组：
**key的作用：**帮助vue区分不用的元素，从未提升性能

遍历对象&v-if和v-for结合使用