VUE指令

1、作者：尤雨溪

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

3、渐进式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