VUE入门总结

   

目录

  1、开发工具：

  2、Vue基础知识

 3、VUE总结

 4、VUE开发组件

---

最近网站项目前端用到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。