Vue框架（基础1） | 青训营笔记

无闻
53 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第15天

Vue基础

什么是Vue

Vue是一套前端框架，免除了原生JavaScript中得DOM操作，简化书写；Vue基于MVVM（Model-View ViewModel）思想，实现数据双向绑定

el挂载点

Vue实例得作用范围是什么呢？

  • Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他选择器？

  • 可以使用其他选择器，但是建议使用id选择器

是否可以设置其他的dom元素呢？

  • 可以使用其他的双标签，但是不能使用HTML和BODY image.png image.png

data数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js语法即可 image.png image.png

Vue指令

v-text

  • v-text指令的作用是：设置标签的文本值（textContent）
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
  • 内部支持写表达式 image.png image.png

v-html

  • v-html指令的作用是：设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本 image.png image.png

v-on基础

  • v-on指令的作用是：为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写成@
  • 绑定的方法定义在methods属性中 image.png image.png 更简单的写法（把v-on替换成@）： image.png 方法: image.png
avatar
文章
阅读
粉丝