Vue.js 基础回顾

105 阅读1分钟

Vue.js 基础结构

以上两段代码实现的效果是一样的。

Vue.js 生命周期

Vue.js 语法和概念

  • 差值表达式 可以通过{{var}}显示data中的成员
<span>Message: {{ msg }}</span>

如果var有html字符串会被解析成普通文本,使用v-html输出html内容

<p v-html="rawHtml"></p>
  • 指令 Vue内置指令14个,还可以创建自定义指令
  • 计算属性和侦听器 当模板中有逻辑需要处理时使用计算属性,计算属性的结果会被缓存。 监听数据的变化做一些复杂的操作,使用侦听器
  • Class和Style绑定 可以绑定数组和对象
  • 条件渲染/列表渲染 v-if(为false时不会输出元素)、v-show(元素会渲染到页面,通过样式控制隐藏和显示)

v-for(为节点添加key)

  • 表单输入绑定 v-model 监听用户的输入事件以及更新数据(双向绑定)
  • 组件 可复用的Vue实例,封装了HTML、CSS、JS,可实现页面上的一个功能区域
  • 插槽 可以在一个自定义组件中挖一个坑,在使用时填坑,提高组件的灵活性。
  • 插件 vue-router、vuex,也可以开发自己的插件
  • 混入 mixin 如果多个组件有相同的选项,就可以使用混入把相同的选项进行合并,让代码重用
  • 深入响应式原理
  • 不同构建版本的Vue Vue打包之后会生成不同版本的Vue,它支持不同的模块化方式以及带编译器和不带编译器版本的Vue