作者 | 新鲜的橘子

责编 | 王晓曼

出品 | CSDN博客

VUE实例的创建

 

该实例中的内容将和和下面的例子相对应：

 var vm = new Vue({
      el:'',
    data:{
        msg:"我的信息",
        msg1:"<span>我是一个html</span>",
        mytitle:'title',
        list:[
            {id:1,name:'zhangsan'},
            {id:2,name:'lisi'},
            {id:3,name:'wangmazi'},
        ],
        obj:{
            id:1,
            name:'orange',
            age;18
        },
        flag:'true' ，
        style1:{
        color:'pink',
        'font-size':'30px'
            },
         style2:{
             font-family: monospace;
        }
    },
     methods:{
         click(){}
     }，
     filters:{
         filter1:function(data){
             //代码块
         }
     }
})

基本指令

 

1.V-Cloak

解决闪烁问题。闪烁问题原因使用插值表达式时若 VUE 还未加载完成则会直接将插值表达式当作文本内容显示。

<h1 v-cloak>{{ msg }}</h1>

2.V-Text

标签内部的文本会被 mag 变量的值所覆盖。

<h1 v-text="msg"></h1>

v-html 当作 html 页面元素解析。

如果 msg1 的值是一个 html 标签字符串，则会将其解析为 html 元素。

<h1 v-text>{{ msg1 }}</h1>

3.V-bind

绑定数据,可以简写成:

<input type="button" value="btn" v-bind:title="mytitle">

4.v-on

绑定事件可以简写成@

<input type="button" value="btn" v-on:click="click">

5.v-for

在组件中使用 v-for 循环或者在一些特殊情况中，如果 v-for 出现问题，则必须绑定唯一的 key （值为字符串或者数字）

（1）迭代数组

<ul>
    <li v-for="(item,index) in list" :key="item.id">index----{{ index }}--{{ item.id }}--{{ item.name }}</li>
<ul>

（2）迭代对象

<div v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</div>

（3）迭代数字

<p v-for="i in 10">这是第{{i}}个p标签</p>

6.v-if

如果 flag 为 false 则 dom 中不会出现这个 h1 标签。

<h1 v-if="flag">这是一个if控制的h1标签</h1>

7.v-show

如果 flag 为 false 则仅仅是将 h1 的 display 设置为 none。

<h1 v-show="flag">这是一个if控制的h1标签</h1>

如果页面中的 dom 元素需要频繁显示隐藏建议使用 v-show 指令。

8.v-model

实现数据的双向绑定常应用于表单中,在下面这个表单输入值,msg 的数据发生改变同时p标签里面的内容也会同步渲染到页面中。

<input type='text' v-model='msg'>
<p>{{ msg }}</p>

指令

1、自定义指令

VUE 中的指令都已v-开头

2、自定义全局指令

第一个参数为指令的名称，第二个参数为对象，在对象里有一些相关的钩子函数，在不同的阶段执行不同的钩子函数。

• bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可定义一个在绑定时执行一次的初始画动作。

• inserted:被绑定元素插入父节点时调用（父节点存在时即可调用，不必存在于document中）。。

• update:所在组件的VNode更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但可通过比较更新后的值来忽略不必要的模板更新

• componentUpdated:所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

• unbind:只调用一次，指令于元素解绑时调用。

3、钩子函数的参数(el, binding, vnode, oldVnode)

钩子函数参数的解释：

Vue.directive('focus',{
    bind:function(el,binding){},
    inserted:function(){el.focus()},
    update:function(){}
})

样式相关写在 bind 里面就行，于 js 行为相关的写在 inserted 里面防止其不生效，例如上面的获取焦点就写在了 inserted 中：

Vue.directive('color',{
    bind:function(el,binding){
        el.style.color=binding.value
    },

})

使用定义好的 focus 指令和 color 指令：

<input type="text" v-focus v-color="'red'">

自定义私有指令：

var vm2 = new Vue({
    el:'',
    data:{},
    directives:{
        'fontWeight':{
            bind:function(el,binding){
                el.style.fontWeight = binding.value
            }
        }
    }
})

使用定义好的 fontWeight 指令：

<input type="text" v-focus v-fontWeight="'500'">

函数简写

 

大多数情况下可能只想在 bind 和 update 钩子函数上做重复的动作，不关心其他钩子函数可以简写为：

Vue.directive('color-swatch',function(el,binding){
    el.style.backgroundColor =binding.value 
})

1、事件修饰符

• .stop阻止冒泡

• .prevent阻止默认事件

• .capture添加事件侦听器时使用事件捕获模式

• .self只当事件在该元素本身触发时触发回调

• .once事件只触发一次

2、事件冒泡：触发子元素的事件时，父级元素相同事件也会依次向上触发 -孙子-父亲-爷爷。

3、事件捕获：在冒泡之前会有一个事件捕获过程和冒泡顺序相反 -爷爷-父亲-孙子。

使用方式：

<input type="button" value="btn" v-on:click.once="click">

4、按键修饰符

.enter 当按下 enter 键时才调用 click 方法，enter 也可以用相应的字符编码代替。

只有少数的按键才可以写按键名称 enter tab delete esc space up down left right。

<input type="button" value="btn" @keyup.enter="click">

当然也可以自定义键盘修饰符：

Vue.config.keyCodes.name = code  //name为名称，code为按键编码

接着就可以使用这个自定义的按键修饰符了。

<input type="button" value="btn" @keyup.name="click">

在VUE中使用样式

 

1、使用 class 样式

（1）数组

<h1 :class="['class1','class2']"></h1>
<h1 :class="['class1','class2',flag?class3:'']"></h1>
    <!-- 三元表达式，如果flag为true则有class3 -->
<h1 :class="['class1','class2',{class3:flag}]"></h1>
    <!-- 数组中也可以嵌套对象，对象键为类名，值为布尔值-->

（2）对象

<h1 :class="{class1:true,class2:true}"></h1>
    <!-- 也可以是对象对象键为类名，值为布尔值-->

2、使用 style 样式

（1）直接在元素上设置

<h1 :style="{color:'pink','font-size':'30px'}">我是大橘子</h1>

（2）在 data 中设置，通过 :style 引用

<h1 :style="style1">我是大橘子</h1>

（3）在 :style 通过数组引用多个样式对象

<h1 :style="[style1,style2]">我是大橘子</h1>

过滤器

 

1、过滤器的定义

全局过滤器的定义：

Vue.filter('filterName',(data)=>{//代码块})

第一个参数为过滤器的名称，第二个参数为一个函数，函数的第一个参数为要处理的变量其他参数可随意指定。

2、私有过滤器的定义

在最上面的 vm 实例中的 filters 对象中定义了一个名称 filter1 的过滤器。

3、过滤器的调用

{{mag | filterName}}

如果全局和私有过滤器名称一样，则会优先调用私有过滤器。

调用时传递的第一个参数为定义时的第二个参数，因为第一个参数已经被占了。

管道符前面为传递的数据，管道符后面为过滤器的名字。

 

生命周期

 

生命周期中的钩子函数有8个每个的作用都在下面代码的注释中：

var vm2 = new Vue({
    el:'',
    data:{},
    //创建阶段
    beforeCreate(){},//实例创建之前执行
    created(){},
    beforeMount(){},//模板已经在内存中完成，打包尚未渲染到页面中
    mounted(){}, //内存中的模板已经挂载到页面中
     //运行阶段
    beforeUpdate(){},//数据被更新但尚未渲染到页面中,数据更新时才会调用
    updated(){},//数据已经渲染到页面中
    //销毁阶段
    beforeDestory(){},//data methods 过滤器都是可用的还未执行销毁过程
    destoryed(){}  //组件已经被销毁，所有的东西已不可用



})

1、动画 

过渡类动画：

<style>
    .v-enter,
    .v-leave-to{
        opacity:0;
        transform :translateX(200px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
</style>
<div>
    <input type="button" @click="flag=!flag" value="动画">
    <transition>
        <h1 v-if="flag">我是h1</h1>
    </transition>
</div>

使用v-的时候会为所有的元素动画元素都加上这个样式，如果要给特定的样式，只需要给 transition 标签加上 name 属性，然后将 **v-改为name-** 即可。

2、组件

（1）组件的定义

 组件通俗来讲就是一个个小型，独立的可复用的东西，比如我们的一个页面是由 html 标签堆积起来的，这些标签就可以理解为组件，当然这只是一个通俗的说法，具体概念还请查阅 VUE 官网。

下图展示一个应用界面被抽象为一个组件树：

（2）全局组件

第一个参数为组件的名称，我在这里定义了一个 comp4 的组件“，第二个参数为一个对象。template 模板内容只能有一个根元素(div)。

Vue.component('comph4', {
  template: '<div><h4>这是一个h4标题</h4></div>'
})

以上方法在输入模板内容时在编辑器内无任何智能提示,所以我将 template 模板内容放在外面。

template 我给他传递一个ID 选择器 cmp4，并在外部通过 template 标签定义模板内容。

<template id="cmp4">
    <div>
        <h4>这是一个h4标题</h4>
    </div>
</template>
<script>
    Vue.component('comph4', {
  template: '#cmp4'
})
</script>

（3）私有组件

下面这个 copmh4 就只能在 app1 下面调用，我还是使用了将模板内容放在外部的方法。

var vm = new Vue({
    el:'#app1',
    data:{},
    methods:{},
    components:{
        comph3:{
            template:'#cmp3'
        }
    }
})

3、组件的调用

组件调用就和写 html 标签一样,comp4 组件就可以在全局中调用，而 cmp3 只能在 app1 中调用：

<body>
    <comp4><comp4>
    <div id="app1">
        <comp3><comp3>
     </div>
    <template id="cmp4">
        <div>
            <h4>这是一个h4标题</h4>
        </div>
    </template>
    <template id="cmp3">
        <div>
            <h3>这是一个h3标题</h3>
        </div>
    </template>
</body>

4、组件中的其他知识

（1）data 的不同

组件和实例一样也可以拥有自己的data数据和 methods 方法，和实例中 data不同的是，组件中的 data 必须为一个函数，且这个函数必须返回一个对象。

Vue.component('comph4', {
  template: '#cmp4',
  data: function(){
      return{
          msg：'msg这是组件中data中的数据'
      }
  },
   methods:{}
})

（2）组件的切换

eg：在 VUE 实例的 data 中定义一个变量通过同过点击不同的按钮给 data 变量赋不同的值，根据不同的值来选择显示哪个组件。

<div id="app1">
    <input type="button" value="cmph3" @click="iscom='comph3'">
    <input type="button" value="cmph4" @click="iscom='comph4'">
    <component :is="iscom"></component>
</div>
var vm = new Vue({
    el:'#app1',
    data:{
     iscom:''   
    }
})

（3）父子组件之间的传值

原理：父组件在引用子组件的时候通过属性绑定，将父组件的数据绑定给子组件，绑定方法通过事件绑定。

注意：必须将绑定的属性在子组件的 props 数组中定义一下，且父组件传过来的值是可读的，组件自己 data 里的数据是可读可写的。

通过属性绑定将父组件的 msg 传给子组件，并且通过事件绑定，将 show 方法传递给子组件，子组件在接收父组件的值时，在 props 数组中定义。

子组件传递给父组件通过==$emit()==,第一个参数为绑定事件的名称，第二个参数为要传递的值，如果只是父组件向子组件传递方法，则不必传递第二个参数。

说白了子组件向父组件传值，其实就是父组件向子组件传递方法的同时接收子组件反馈过来的数据罢了。

<div id="app1">
    <comph4 :fromParent="msg" @fun="show"></comph4>
</div>
var vm = new Vue({
    el:'#app1',
    data:{
          msg:'我是父组件中的msg',
        fromSon:null
    },
    methods:{
        show(data){      //父组件的show方法接收一个参数
        this.fromeSon=data; //将从子组件接收过来的data赋值给父组件的fromSon
        }
    }
    compents:{
        comph4:{
        template:'<div>
                    <h4>我是一个h4---{{fromParent}}</h4>
                    <input type="button" value="调用父组件中的方法" @click=”myclick“>
                </div>'，
          props:['fromParent'],
        data:function(){
        return {
            data:{name:'orange',age:18}
            }
        },
        methods:{
                myclick(){
                this.$emit('fun',this.data)  //将子组件中的data传递给父组件
                }
            }
        }
    }
})

版权声明：本文为CSDN博主「新鲜的橘子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_45753500/article/details/106226421

更多精彩推荐
☞刘强东卖光碟，周鸿祎“电脑算命”，马云卖鲜花，盘点 IT 大佬摆过的地摊
☞从地摊看云计算：规模产业历程大揭秘
☞头条和百度“大打出手”时，微信搜索去哪儿了？
☞怒肝 8 个月源码，我成为了 Spring 开源贡献者
☞干货 | 基于SRS直播平台的监控系统之实现思路与过程
☞挖矿仍然有利可图吗？
你点的每个“在看”，我都认真当成了喜欢