vue.js基础

文章目录

• vue.js基础
• vue实例的创建
• 基本指令
• 自定义指令
• 自定义全局指令
• 自定义私有指令
• 事件修饰符
• 按键修饰符
• 在vue中使用样式
• 使用class样式
• 使用style样式
• 过滤器
• 生命周期
• 动画
• 组件

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>

自定义指令

Vue中的指令都已v-开头

自定义全局指令

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

• bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可定义一个在绑定时执行一次的初始画动作
• inserted:被绑定元素插入父节点时调用（父节点存在时即可调用，不必存在于document中）
• update: 所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可通过比较更新后的值来忽略不必要的模板更新
• componentUpdated: 所在组件的VNode及其孩子的VNode全部更新时调用。
• unbind: 只调用一次，指令于元素解绑时调用。

钩子函数的参数(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 
})

事件修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身触发时触发回调
• .once 事件只触发一次

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

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

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

按键修饰符

.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中使用样式

使用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>
	<!-- 也可以是对象对象键为类名，值为布尔值-->

使用style样式

1.直接在元素上设置

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

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

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

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

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

过滤器

过滤器的定义

全局过滤器的定义：Vue.filter('filterName',(data)=>{//代码块})

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

私有过滤器的定义

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

过滤器的调用{{mag | filterName}}

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

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

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

生命周期

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

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

动画

组件