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