目录
最近网站项目前端用到VUE,需要入门一下下。选择了哔哩哔哩的视频:https://www.bilibili.com/video/BV12J411m7MG?p=1,黑马程序员前端基础教程-4个小时带你快速入门vue。
说是4小时,可能用了两个半天看完的,每个视频都很短,10分钟左右,非常便于回放和做笔记,推荐一波。
下面对VUE做一个简单的总结。
1、开发工具:
Visual Studio code
可以直接刷新页面的浏览器插件:Live Server
2、Vue基础知识
VUE是java script 框架,简化了dom操作,响应式数据驱动(这一点,看视频的例子才能更直观的感受到)。
三个重要的点:el:挂载点,data:数据对象,methods:各种方法。
三种绑定:
(1)内容绑定、事件绑定:
v-text 为标签元素绑定显示的内容。v-html为标签元素绑定下层元素。v-on绑定事件(简写为@事件名=“事件处理函数”)
(2)显示切换,属性绑定
v-show 根据表达式真假,切换元素的显示与隐藏,本质相当于style="display:none"。
v-if 根据表达式真假,切换元素的显示与隐藏,本质是操纵dom元素,把元素从dom树中插入和删除。
v-bind 设置元素的属性,src,title,class,v-bind:属性名=“表达式”,简写为:bind="表达式"
特殊类名切换,<img v-bind:class={active:isActive}> ,这是对象式的写法,是否绑定calss=“active”取决于isActive的值。
(3)列表循环,表单事件绑定
v-for 根据data生成列表循环结构。
(此图片来自 菜鸟教程 VUE :https://www.runoob.com/vue2/vue-forms.html)
v-model 为表单元素绑定data,双向绑定,也就是说data值改变的话,表单元素的value值就改变成一样的,用户直接输入或选择表单元素值后,data的值同时就改变了。
v-model就是获取和设置表单元素的值,完成数据双向绑定。
一个网络请求库:axois。
3、VUE总结
VUE与原来的jquery,最大的不同,就是vue是基于数据的开发方式,这点在v-for和v-model的双向绑定上表现的最明显,为什么这么说呢,对于v-for,只要绑定的list内容改变了,v-for绑定的dom元素会自动重新渲染,生成新的dom结构,不需要写js去操纵dom或者通过重新加载页面template模板方式来重新渲染页面。对于v-model也是一样的,表单元素的value值就改变成一样的,用户直接输入或选择表单元素值后,data的值同时就改变了,不需要写js去获取dom元素获取表单元素的值。
很直观的能感受到,原来的js是操作dom元素,来设置或获取value,而vue是基于数据的方式,浏览器通过跟踪数据来实现页面的渲染和获取值。
4、VUE开发组件
PC:https://element.faas.ele.me/#/zh-CN/component/tabs
企业微信:https://youzan.github.io/vant/#/zh-CN/collapse
声明:截图来自于课程:https://www.bilibili.com/video/BV12J411m7MG?p=1,黑马程序员前端基础教程-4个小时带你快速入门vue。