vue是一个渐进式框架,非常适合独立开发人员和中小型web项目
什么是渐进式呢,就是你先用vue的主框架开发,等到你突然需要某个功能时,直接添加vue提供的相应组件即可,走到哪开发到哪,非常简单,好上手。
本教程使用开发工具HBuilderX:https
目录
Vue插件都有哪些
- 1、vue-cli:vue脚手架
- 2、vue-resource(axios):ajax请求
- 3、vue-router:路由
- 4、vuex:状态管理
- 5、vue-lazyload:图片懒加载
- 6、vue-scroller:页面滑动开关
- 7、mint-ui:基于vue的UI组件库(移动端的)
- 8、element-ui:基于vue的UI组件库(PC端)
一、Vue概念介绍
- MVVM:
- model:模型,vue中是数据对象data
- view:视图,模板页面
- viewModel:视图模型,Vue的实例(通过new Vue得来的实例)
- 生命周期(来源于vue官方文档)
二、如何使用Vue(没有学过node.js和npm需要看完这个后,去快速入门vue学习)
- 构建目录并编写package.json文件
- 编写html文件
- 安装Vue Devtools插件,学习vue神器,参考https://blog.csdn.net/weixin_39150852/article/details/88181482
三、快速入门vue,请将上面入门看完后,学完以下基础知识点
- 使用vue需要你了解以下知识点
- 1、ES5、ES6、ES7的基本语法,可以参考https://blog.csdn.net/grd_java/article/details/105384601
- 2、快速对vue有一个简单了解,可以参考https://blog.csdn.net/grd_java/article/details/105307177
- 3、webpack自动化构建工具,可以参考https://blog.csdn.net/grd_java/article/details/105397169
四、解析Vue对象
五、指令练习
声明式文本(v-text , v-html)
- v-text :以普通文本形式处理数据
- v-html:以html形式解析数据
属性单向绑定练习(v-bind:)
- v-bind: 将普通html属性换成vue属性,使html属性能使用vue变量,只能使用变量,但不能修改原变量(简写形式是一个冒号)
动态双向绑定数据(v-model)
- v-model:可以使普通html属性使用vue数据,并且,是双向的,可以获取也可以修改
绑定事件(v-on)
- v-on:将普通html事件换成vue事件,可以使用vue方法(简写形式@)
- 操作样式
- 使用生命周期操作样式(如果想使用生命周期,需要配合相应生命周期函数,详细请看上面的Vue概念介绍中,官方图片,这里使用了mounted生命周期阶段)
- 绑定表单元素
事件绑定中使用$event参数,传递节点对象给vue
- 事件修饰符
- .stop:阻止事件冒泡
- .prevent:阻止默认事件发生(a标签,不想让其跳转,就可以使用,阻止标签默认事件跳转的发生)
- .capture:使用事件捕获模式
- .self:只有元素自身触发事件才执行(冒泡或捕获都不执行)
- .once:只执行一次
条件分支指令(v-if v-else-if v-else v-show)
- 根据条件决定页面内容
- 和编程语言的if -else if—else一模一样
- v-show与v-if的区别
- v-show操作样式,节省资源,v-if操作标签
- 两个指令视觉上功能相同,不同点在于,v-if控制标签是否存在,v-show控制标签的display属性,条件不成立将设置为none,不可见,但还存在
循环指令(v-for)
- 可以重复渲染指定标签
- 每当某条数据发生变动,会重新渲染整个for,这太浪费资源了。如果可以给for中每条数据都添加一个唯一标识,那么我们修改for中指定数据时,就不用重新渲染其它内容了,节省资源。vue对此提供了:key,而我们数组名一般是唯一的,对象每个属性名也是唯一的,所有我们一般将这些字段作为唯一标识(唯一标识是指,每条数据都有的属性,但属性值都不相同)
- 删除数据(这里数组中每个对象都有name属性,而且name都不相同,所以用它做唯一标识最合适不过,所有这里指定key为person.name)
- 过滤数据(筛选年龄大于5岁的person)
特殊的ref指令(操作html节点)
- 用来标识一个html标签,并将节点返回给父组件(VUE对象)的refs对象上
六、属性练习
计算属性(computed)
- 计算属性computed的属性值是一个对象,对象中可传入方法,然后return计算结果,这些方法最后会被运算成一个属性,属性名为方法名,属性值为return的结果
- 如果多次调用自己定义的计算属性,它只会执行函数一次,也就是说,函数执行一次后,就将值存储在缓存中了,不会多次调用,所有不需要担心多次调用会浪费存储资源
- 第二种使用方式,在其中定义一个属性,属性值是对象,在里面添加get和set回调函数
监视(watch)
- watch属性值是一个对象,它用来监视某个属性值,如果发生改变,就调用绑定的函数
- 绑定的回调函数有两个主要参数,第一个参数是新值(改动后的值),第二个参数是旧值(改之前的值),如果只写一个参数,表示新值