Vue菜鸡逆袭基础教程

01Vue菜鸡逆袭基础教程

1、首先来认识一下发明它的伟人：尤雨溪

2、其次官网：https://cn.vuejs.org

3、步入正题：Vue它是渐进式JavaScript 框架

什么是渐进式？
渐进式：主张最少
jquery:主要用来处理动画
bootstrap:ui框架(响应式、组件)
数据请求:ajax、axios

4、优点：

易用、灵活、搞笑、模块化友好、SPA(单页面应用)
多页面应用：一个url–>1个HTML，多个url–>多个HTML，有利于SEO优化，出现白屏
单页面应用：多个url–>1个HTML，不利于SEO优化、首屏加载慢，不会出现白屏

5、缺点：

不利于SEO优化
首屏加载慢
不支持IE 6 7 8

6、核心：

数据驱动
组件系统

7、引入方式：

1、cdn：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、npm(推荐)：npm i vue –save
3、脚手架

使用

1、el挂载点

    new Vue({
      // 挂载点会根据css选择器来选择对应的挂载位置
      // 如果匹配到多个挂载点，只有第一个生效，后面的不生效
      // 不要将vue挂载到html或者body上
      // 我们推荐使用id，直接挂载到这个id上，因为id具备唯一性
      el: "#app"
    })

2、data、methods

    new Vue({
      el:'#app',
      // data用来存放数据、变量
      data:{
        name:'孙尚香'
      },
      // methods用来存放函数
      methods: {
        // fn:function(){
        //   console.log(111);
        // }
        fn(){
          console.log(111);
        }
      }
    })

3、数据绑定

{{}}	优点：方便	缺点：不能识别标签，首屏会出现{{}}
v-html	优点：可以识别标签，首屏不会出现{{}}		缺点：写法麻烦
v-text  优点：首屏不会出现{{}}		缺点：不能识别标签并且写法麻烦

4、v-bind:

动态数据绑定

<img v-bind:src="imgSrc" v-bind:imgTitle="title">	//正常写法
<img :src="imgSrc1">	//简写

注意：1、v-bind: 不仅可以绑定已经存在的属性，还可以绑定自定义属性
2、v-bind: 可以简写成:

5、v-model

双向数据绑定

//视图部分
{{name}}
<input type="text" v-model="name">
//模型部分
new Vue({
  el:'#app',
  data:{
    name:'妲己'
  }
})

6、v-if和v-show

//显示与隐藏
<p v-if="true">{{name}}</p>
<p v-show="true">{{name}}</p>

区别：v-if采用的是惰性加载(根本就不加载这个DOM节点)。而v-show是添加了display这个样式。
使用场景：如果频繁切换的话建议使用v-show

7、v-else

v-else一定要紧挨着v-if

8、v-for

 <p v-for="(item,index) in arr" :haha="item.title">
   {{item}}---{{index}}
 </p>

指令

v-html
v-text
v-bind:
v-model
v-if
v-show
v-else
v-for

面试题

1、vue与其它框架对比的优势和劣势？
答：优势：擅长处理数据的增删改差。劣势：不利于SEO优化、不支持IE6 7 8、首屏加载慢
2、很重要的面试题
mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：M-model模型 V-view视图 VM-view model视图模型，通过view model来改变，它是模型和视图的中间桥梁。mvvm擅长处理数据的增删改查，而jquery擅长处理动画
3、vue等单页面应用及其优缺点
答：多页面应用：一个url–>1个HTML，多个url–>多个HTML，有利于SEO优化，出现白屏
单页面应用：多个url–>1个HTML，不利于SEO优化、首屏加载慢，不会出现白屏
4、说出至少4种vue当中的指令和它的用法
笔记中不止四种哦，自取哦！
5、v-if 和 v-show 区别
v-if采用的是惰性加载(根本就不加载这个DOM节点)。而v-show是添加了display这个样式。
使用场景：如果频繁切换的话建议使用v-show

Home作业

利用今天学到的知识来练习一下叭~ 需要源码的可以留言哦~