Vue入门---安装及常用指令介绍

1、安装

BootCDN----官网https://www.bootcdn.cn/

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

//或者

<script src="https://unpkg.com/vue/dist/vue.js"></script>

npm
```
npm i vue --save-dev
```
bower
```
bower i vue --save-dev
```

2、数据绑定

语法：采用了 “Mustache” 语法（标签） ----- 即 “文本插值” ----- {{ }}（双大括号）

3、指令

定义：v-*，其值限定为绑定表达式
作用：当表达式值变化的时候，可以将变化反应到DOM上

内部指令：

v-if：根据表达式的值在DOM中生成或移除一个元素（false：不渲染对应元素；true：渲染元素，将对应元素的克隆插入DOM中）----- 真正的 “条件渲染”

当为true时：

<template>

    <div class="text">

        <p v-if="isSee">{{text}}</p>

    </div>

</template>

<script>

export default {

    name : "test",

    data(){

        return{

            text : "你可以看到我吗？",

            isSee : true,

        }

    },

}

</script>

<style lang="scss" scoped>

</style>

结果为：

当为false时：

<template>

    <div class="text">

        <p v-if="isSee">{{text}}</p>

    </div>

</template>

<script>

export default {

    name : "test",

    data(){

        return{

            text : "你可以看到我吗？",

            isSee : false,

        }

    },

}

</script>

<style lang="scss" scoped>

</style>

结果为：

v-show：根据表达式的值显示或者隐藏HTML元素（false：元素隐藏，内联样式出现 style="dispaly:none" ）

当为true时：

<template>

    <div class="text">

        <p v-show="isSee">{{text}}</p>

    </div>

</template>

<script>

export default {

    name : "test",

    data(){

        return{

            text : "这次是隐藏还是显示？",

            isSee : true,

        }

    },

}

</script>

结果为：

当为false时：

<template>

    <div class="text">

        <p v-show="isSee">{{text}}</p>

    </div>

</template>

<script>

export default {

    name : "test",

    data(){

        return{

            text : "这次是隐藏还是显示？",

            isSee : false,

        }

    },

}

</script>

结果为：

- - v-if与v-show的区别：
    - v-if是惰性的，如果初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块（局部编译，编译会被缓存起来）；

相比之下v-show 就简单得多——不管初始条件是什么，元素始终被编译并保留，只是简单地基于 CSS 进行切换；

总结：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

- - 遍历数组：item in/of items 的形式
    <template>
    <div class="text">
    <ul>
    <li v-for="(tap,tapIndex) of taps" :key="tapIndex">{{tapIndex}}---{{tap}}</li>
    </ul>
    </div>
    </template>
    <script>
    export default {
    name : "test",
    data(){
    return{
    taps : ["西红柿","冬瓜","茄子"]
    }
    }, }
    </script>
    结果为：

遍历对象（Object.keys()的结果进行遍历）

<template>

  <div class="text">

    <ul>

      <li v-for="(value,key,index) of Person" :key="index">{{index}}---{{key}}---{{value}}</li>

    </ul>

  </div>

</template>

<script>

export default {

  name: "test",

  data() {

    return {

      Person: {

        name: "Jane Doe",

        age: "22",

        sex: "女"

      }

    };

  },

  methods: {}

};

</script>

结果为：

v-text（相当于插值表达式）

<template>

  <div class="text">

    <p v-text="text"></p>

    <p>{{text}}</p>

  </div>

</template>

<script>

export default {

  name: "test",

  data() {

    return {

     text : "插值表达式"

    };

  },

  methods: {}

};

</script>

结果为：

v-html（渲染html标签）Vue1.x版本的{{{ html标签表达式}}}写法已经被移除

<template>

  <div class="text">

    <p>我是原来的p标签</p>

    <!-- <div>{{{text}}}</div> -->

    <div v-html="text"></div>

  </div>

</template>

<script>

export default {

  name: "test",

  data() {

    return {

     text : "<p>我是新来的p标签</p>"

    };

  },

  methods: {}

};

</script>

结果为：

v-bind（可以简写为 “：”）绑定表达式到标签的属性上，常绑定属性有class、style、src等

绑定class支持变量

<template>

  <div id="example">

    <p :class="classA ? 'ok' : 'not'">绑定表达式</p>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

     classA : true

    };

  },

  methods: {}

};

</script>

结果为：

绑定class支持对象

<template>

  <div id="example">

    <p  :class="{'classA' : data.isA , 'classB' : data.isB }">绑定对象</p>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

     data : {

       classDedault : 'classD',

       isA : true,

       isB : true

     }

    };

  },

  methods: {}

};

</script>

结果为：

当然，绑定class可以与普通的class特性共存，也可以直接绑定一个对象；

也可以绑定一个计算属性：

<template>

  <div id="example">

    <p class="classA"  :class="classOther">过滤器：{{ time | timeFormatter}}</p>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

     time :  new Date().getTime(),

     className : {

       'classB' : 20,

       'classC' : 3

     }

    };

  },

  computed: {

    classOther : {

      get : function(){

        return {

          'classB' : this.className.classB > 20 ? true : false,

          'classC' : this.className.classC < 4  ? true : false

        }

      }

    }

  },

  methods: {}

};

</script>

绑定class支持数组

<template>

  <div id="example">

    <p  :class="[data.classA,data.classB]">绑定对象</p>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

     data : {

      classA : 'class-a',

      classB : 'class-b'

     }

    };

  },

  methods: {}

};

</script>

结果为：

- 绑定内联样式style：跟class一样，对象、数组、计算属性都支持，但是采用的是 “ 驼峰式命名 ”

v-on：（监听DOM事件）可以简写为 “ @ ”

内联处理器中的方法：

<template>

  <div id="example">

    <p

      @click="test('你传事件$event了吗',$event)"

      style="width:200px;height:200px;background:red"

    >v-on的内联传事件及参数的方法</p>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

      test(message, event) {

        if (event) {

          console.log(event)

          event.preventDefault()

        } else {

          console.log(message);

        }

      }

    };

  },

  methods: {}

};

</script>

$event是指原生的DOM事件，默认可以传递；

结果为：点击发生

- - - 事件修饰符
      - .stop（阻止单击事件继续传播，即停止冒泡）
      - .prevent（阻止元素的默认行为，相当于e.preventDefault() ）
      - .capture（添加事件监听器时使用事件捕获模式）
      - .self（事件只在该元素本身（而非子元素）触发时执行函数）
      - @keyup.enter || @keyup.enter.native（@keyup.13一样）点击回车时进行调用 ----- native后缀可以在父组件在子组件上绑定一个原生的事件，从而转化为一个普通的HTML标签（.native在普通标签上不起作用）
      - @keyup.esc（回撤）@kuyup.delete（删除或者退格等）
  - v-ref：（建立索引，用this.$refs.someRef访问元素元素用v-ref="some-ref"标记）
  - v-el：（获取当前元素的内容）Vue2.x已经废除
    <template>
    <div id="example">
    <p v-el:some-data>我的内容是：你</p>
    </div>
    </template>
    <script>
    export default {
    name: "example",
    data() {
    return { };
    },
    methods: {},
    mounted(){
    console.log(this.$els.someData.textContent)//我的内容是：你
    }
    };
    </script>
  - v-once：数据只能绑定一次，后续数据的变化不在关心（vue2.x新增的指令）
  - v-pre：（显示原始的Mustache标签）
    <template>
    <div id="example">
    <p v-pre>{{number}}</p>
    </div>
    </template>
    <script>
    export default {
    name: "example",
    data() {
    return {
    number : "2222"
    };
    },
    methods: {}, };
    </script>
    结果为：

- - v-cloak：（元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了-----防止在渲染页面时，用户首先看到Mustache标签）
```
<style>

p[v-cloak]{visibility:hidden}//display:none

</style>

<p  v-cloak>{{msg}}</p>
```
自定义指令
- 格式：Vue.directive(id，definition) 注册全局自定义指令
- 提供的钩子函数
  - bind/unbind-----只执行一次，指令第一次被绑定(解绑)时调用
  - inserted-----被绑定的元素插入父元素时调用
  - update-----在bind之后立即以初始值为参数第一次调用，之后绑定值发生变化调用，参数为新值与旧值update（newValue，oldValue）
  - componentUpdated-----所在组件以及他的子组件全部更新后调用

　　　　　　　　（注意：除了update和componentUpdated之外，每个钩子函数都有el、binding、vnode三个参数，而oldValue只有在update和componentUpdated中有效，并且除了el，其他两者都只有只读）

指令实例属性（即钩子函数的参数）——只读，不可修改

el——指令绑定的DOM元素
binding包括以下属性
- name——指令的名字，不包括前缀
- value——新值
- oldValue——旧值
- expression——指令的表达式，不包括指令和过滤器 v-load="1 + 1" 结果为1+1
- arg——指令的参数 v-load:foo 结果为foo
- modifiers——一个对象，包含指令的修饰符 v-load.literal 结果为 { literal : true }
- vm——拥有该指令的上下文ViewModel（废除）
- descriptor——一个对象，包含指令的解析结果（废除）
注意：

使用步骤

建立一个js文件，此处命名为module.js 不支持 箭头函数

import Vue from 'vue'

Vue.directive('load', {

    bind(el, binding) {//准备工作

        if (binding.value) {

            console.log(el)

            console.log("name---" + binding.name)

            console.log("value---" + binding.value)

            console.log("oldValue---" + binding.oldValue)

            console.log("expression---" + binding.expression)

            console.log("arg---" + binding.arg)

            let div = document.createElement("div");

            div.className = "loading-parent";

            div.innerHTML = `

          <div class="loading-spinner"><i class='el-icon-loading'></i></div>

        `;

            el.appendChild(div);

        }

    },

    update(el, binding) {//值更新时的工作

        if (binding.value) {

            console.log(el)

            console.log("name---" + binding.name)

            console.log("value---" + binding.value)

            console.log("oldValue---" + binding.oldValue)

            console.log("expression---" + binding.expression)

            console.log("arg---" + binding.arg)

            let div = document.createElement("div");

            div.className = "loading-parent";

            div.innerHTML = `

        <div class="loading-spinner"><i class='el-icon-loading'></i></div>

      `;

            el.appendChild(div);

            el.load = div;

        } else {

            el.load && el.load.parentNode && el.load.parentNode.removeChild(el.load);

        }

    },

    unbind: function () {//清理工作

    }

})

结果为：

我们可以看到代码重复率太高，因此规定了简写方式，只有bind和update时，可以简写为

import Vue from 'vue'

Vue.directive('load', function (el, binding) {//值更新时的工作

    if (binding.value) {// 1

        let div = document.createElement("div");

        div.className = "loading-parent";

        div.innerHTML = `

        <div class="loading-spinner"><i class='el-icon-loading'></i></div>

      `;

        el.appendChild(div);

        el.load = div;

    } else {

        el.load && el.load.parentNode && el.load.parentNode.removeChild(el.load);

    }

}

)

app..js文件中引入 import module from './module.js'

使用

<template>

  <div id="example" @click="up" style="width:100px;height:100px;background:pink">

    <div id="demo" v-load="msg"></div>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

      msg: 1

    };

  },

  methods: {

    up() {

      this.msg += 1;

    }

  },

  mounted() {}

};

</script>

结果为：首次执行bind函数，每次点击执行update

点击时，值变化

局部定义指令（例子：实现图片的一定div内的拖拽功能）

html

<div class="previewImg">

     <img

            :src="alImgUrl"

             class="currentImg"

             :id="inner.id"

             v-drag

             style="cursor:pointer"

             :draggable="false"//拖拽必须加

       />

</div>

css ----- 必须设置定位

.previewImg {

      position: relative;

      .currentImg {

           position: absolute;

           left: 150px;

           top: ;

           width: 450px;

           height: 636px;

           margin-left: 50px;

           -moz-user-select: none; /*火狐*/

           -webkit-user-select: none; /*webkit浏览器*/

           -ms-user-select: none; /*IE10*/

           -khtml-user-select: none; /*早期浏览器*/

           user-select: none;

        }

}

directives: {

    drag(el, binding) {

      el.onmousedown = function(e) {

        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置

        var divx = e.clientX - document.getElementsByClassName("currentImg")[].offsetLeft;

        var divy = e.clientY - document.getElementsByClassName("currentImg")[].offsetTop;

        //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove

        document.onmousemove = function(e) {

          //获取移动后div的位置：鼠标位置-divx/divy

          var l = e.clientX - divx;

          var t = e.clientY - divy;

          document.getElementsByClassName("currentImg")[].style.left = l + "px";

          document.getElementsByClassName("currentImg")[].style.top = t + "px";

        };

        document.onmouseup = function(e) {

          document.onmousemove = null;

          document.onmouseup = null;

        };

      };

    }

  },

对象字面量（指令传入多个值）

定义

import Vue from 'vue'

Vue.directive('load', function (el, binding) {//值更新时的工作

    if (binding.value) {// 1

        console.log(binding.value)

        let div = document.createElement("div");

        div.className = "loading-parent";

        div.style.color = binding.value.color;

        div.style.fontSize = binding.value.fontSize

        div.innerHTML = `

        <div class="loading-spinner"><i class='el-icon-loading'></i></div>

      `;

        el.appendChild(div);

        el.load = div;

    } else {

        el.load && el.load.parentNode && el.load.parentNode.removeChild(el.load);

    }

}

)

使用

<template>

  <div id="example" @click="up" style="width:100px;height:100px;background:pink">

    <div id="demo" v-load="{msg : msg,color:'#f00',fontSize:'30px'}"></div>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

      msg: 1

    };

  },

  methods: {

    up() {

      this.msg += 1;

    }

  },

  mounted() {}

};

</script>

结果为：

字面修饰符（值按照普通字符串传递给update，update只调用一次）

<template>

  <div id="example" @click="up" style="width:100px;height:100px;background:pink">

    <div id="demo" v-load.literal="msg "></div>

  </div>

</template>

<script>

export default {

  name: "example",

  data() {

    return {

      msg: 1

    };

  },

  methods: {

    up() {

      this.msg += 1;

    }

  },

  mounted() {}

};

</script>

结果为：

console.log(binding.value)

console.log(binding.modifiers)

- 元素指令（作为一个标签出现，不接受参数与表达式）
  - 特点：终结性（只有该元素指令本身可以操作该元素及其子元素）
- 高级选项
  - params：（自定义属性）
    
    <p v-finish="msg" name="wxh">1111111111</p>
    import Vue from 'vue'
    Vue.directive("finish", function (el, binding) {
    if(binding.value){
    binding.value = 2;
    console.log(el.getAttribute("name"));
    console.log(binding.value);
    }
    })
    结果为：

- - deep
  - twoWay
  - acceptStatement
  - Terminal
  - priority

4、常见问题解析

v-on可以绑定多个方法吗？（如果绑定多个，只会执行第一个，其他的自动忽略）
一个Vue实例可以绑定多个element元素吗？
在Vue中，如何让v-for循环出来的列表的click事件只对当前元素有效 https://www.cnblogs.com/tangwanzun/p/7828317.html

巴特西

Vue入门---安装及常用指令介绍

最新文章

热门文章