zoukankan html css js c++ java

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>

View Code

结果为：

当为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>

View Code

结果为：

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>

View Code

结果为：

当为false时：

<template>
    <div class="text">
        <p v-show="isSee">{{text}}</p>
    </div>
</template>
<script>
export default {
    name : "test",
    data(){
        return{
            text : "这次是隐藏还是显示？",
            isSee : false,

        }
    },

}
</script>

View Code

结果为：

- - 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>
    View Code
    结果为：

遍历对象（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>

View Code

结果为：

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>

View Code

结果为：

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>

View Code

结果为：

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>

View Code

结果为：

绑定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>

View Code

结果为：

当然，绑定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>

View Code

绑定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>

View Code

结果为：

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

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

内联处理器中的方法：

<template>
  <div id="example">
    <p
      @click="test('你传事件$event了吗',$event)"
      style="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>

View Code

$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>
    View Code
  - 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>
    View Code
    结果为：

- - 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 () {//清理工作

    }
})

View Code

结果为：

我们可以看到代码重复率太高，因此规定了简写方式，只有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);
    }
}
)

View Code

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

使用

<template>
  <div id="example" @click="up" style="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>

View Code

结果为：首次执行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: 0;
            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;
        }
}

View Code

directives: {
    drag(el, binding) {
      el.onmousedown = function(e) {
        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
        var divx = e.clientX - document.getElementsByClassName("currentImg")[0].offsetLeft;
        var divy = e.clientY - document.getElementsByClassName("currentImg")[0].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")[0].style.left = l + "px";
          document.getElementsByClassName("currentImg")[0].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);
    }
}
)

View Code

使用

<template>
  <div id="example" @click="up" style="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>

View Code

结果为：

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

<template>
  <div id="example" @click="up" style="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>

View Code

结果为：

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); } })
    View Code
    结果为：

- - deep
  - twoWay
  - acceptStatement
  - Terminal
  - priority

4、常见问题解析

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

查看全文

相关阅读:
饿了么P7级前端工程师进入大厂的面试经验
 前端程序员面试的坑，简历写上这一条信息会被虐死！
这次来分享前端的九条bug吧
 移动端开发必会出现的问题和解决方案
 创建一个dynamics 365 CRM online plugin (八)
创建一个dynamics 365 CRM online plugin (七)
创建一个dynamics 365 CRM online plugin (六)
创建一个dynamics 365 CRM online plugin (五)
使用User Primary Email作为GUID的问题
 怎样Debug Dynamics 365 CRM Plugin

原文地址：https://www.cnblogs.com/wxh0929/p/11162017.html