Vue简介
Vue特性
Vue学习路径
- 学习前端开发所必须的知识:html,css,js
- 学习vue的核心概念:组件、指令、数据绑定、机算属性
- 学习Vue的生命周期、钩子、事件
- 掌握Vue的路由和状态管理库
- 学习Vue如何与后端服务器进行通信,如
ajax
- 在实际开发中不断使用Vue和实践开发
创建一个Vue组件可以包含
data(){}
- 进行数据初始化,将需要展示的元素,在data中进行return
mounted(){}
- 页面进行渲染的时候的会执行的代码块
method():{}
- 进行方法声明,可以添加参数
computed:{}
- 使用方法的形式,添加一个属性计算的方法,在使用的时候使用方法名进行取值,使用computed的方式(计算属性)进行赋值的时候,会保存一个缓存值。方便大对象的使用。不会频繁调用。提高效率。只有当依赖的元素发生改变的时候才会更新缓存。提供get、set方法会在模型改变后立即更新。
声明式变量使用
- 使用
{{ msg }}
的方式进行变量绑定(在html文本中) - 使用
v-bind:id="dynamicId"
的在html元素上进行变量绑定,简写为:id="dynamicId"
常用指令
v-text
,更新文本内容v-html
,更新元素的innerHTMLv-show
,根据表达式的值来判断是否渲染某个元素v-if
,v-else
,v-else-if
作用类似于if代码块v-for
,进行列表渲染,<div v-for="item in items">
v-on
,给元素绑定事件,可以加修饰符v-bind
,绑定元素属性v-model
,表单元素和组件内容的双向绑定,可以收集表单内容向后端传递v-prop
、v-slot
用来在组件之间传递和接收数据v-pre
元素内容原样输出