Vue初体验

Vue：渐进式JavaScript框架

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

Vue基本使用

Vue基本使用步骤

• ① 需要提供标签用于数据填充
• ② 引入vue.js文件
• ③ 可以使用Vue的语法做功能了
• ④ 把Vue提供的数据填充到标签里面

vue的引用和位置

什么是前端渲染？

• 把数据填充到HTML标签中
• 模板+数据----前端渲染------>静态HTML内容；

前端渲染的方式

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法

vue模板语法

v-cloak指令

• 是为了解决插值表达式的“闪动”问题（先显示花括号在替换为正确的内容）

使用方法

• ① 提供样式[v-cloak]{display:none;}
• ②在插值表达式所在的标签中添加v-vloak指令；
  

v-text指令（数据绑定指令）

• 填充纯文本<div v-text="msg">

v-html指令（数据绑定指令）

• 在网站上不建议使用，很危险；

v-pre指令（数据绑定指令）

• 填充原始指令，不会进行编译过程；

如何理解响应式？

• 比如HTML5中的响应式（根据屏幕尺寸的变化导致样式的变化）
• 数据的响应式（数据的变化导致页面内容的变化）

v-once指令

• 数据只编译一次，更改后也不会进行相应修改
• 应用场景：如果显示的信息后续不需要在修改，可以使用

双向数据绑定（v-model）

• 也是也在标签里
  
• 体现在：用户修改msg内容，input标签中的内容也会改变，用户修改input标签中的内容，上面msg对应的内容也会被修改；

事件绑定

• 可以简写为：<button @click="num++">点击我</button>
• 这种情况下会默认传递事件对象作为函数的第一个参数

事件函数的调用方式

• ① 直接绑定函数名称（上面那种）
• ② 调用函数<button v-on:click="num（）">点击我</button>
  
• 这种情况下，事件对象必须作为最后一个参数进行传递，且事件的名称就是固定的$event
• <button v-on:click="num（参数1，参数2，$event）">点击我</button>