vue模板语法学习记录

vue：渐进式javaScript框架

声明式渲染—组件系统—客户端路由—集中式状态管理（vue）—项目构建
实例属性：el元素的挂载位置（值可以是css选择器或者Dom节点）
data：模型数据（值是一个对象）

vue运行原理

编译过程（vue语法—原生语法）
vue语法转换成原生语法是中间的vue框架在起作用

前端渲染方式

原生js拼接字符串：数据以字符串的方式拼接到HTML标签
缺点：代码不够规范，不利用后期维护
前端模板引擎：好维护，但是没有专门提供事件机制
模板语法：

• 插值表达式：{{}}，存在闪动的问题
• 指令：v-cloak解决闪动问题，原理：先通过影藏内容，然后在内存中进行值的替换，替换好后再显示最终的结果
• v-html：容易导致xss攻击，本网站内容数据可以使用，来自第三方的数据不可以用
• v-pre：显示原始信息，跳过编译
• v-once：显示内容后不再响应式编译
• v-on：@

数据响应式：

如何理解响应式：屏幕的变化导致样式的变化（HTML5）
数据变化导致内容变化（数据响应式）

数据绑定

将数据填充到标签，是单向的

事件修饰符

.stop 阻止冒泡
js:event.stopPropagation
.prevent阻止默认行为
js:event.preventDefault();.
self只有点击当前dom才会触发

自定义按键修饰符

全局config.keyCode.f1=112(112:event事件对象的keyCode）f1是自己起的名字
也可以不定义直接v-on:keyup.65=“函数”(65:event事件对象的keyCode）

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

数据绑定+事件绑定（v-on：input=“handle”)

样式绑定的相关语法细节

• 1、对象绑定和数组绑定可以结合使用：[activeClass,errorClass,{test:isTest}]
• 2、class绑定的值可以简化操作
• 3、默认的class如何处理?默认的class会被保留

v-show

控制元素是否显示display:none，频繁的控制显示和隐藏

v-if

是否渲染，基本上不怎么变化