vue入门指南

责编:menVScode 2017-11-06 22:49 阅读(965)

1、v-for指令

        根据一数组的选项列进行渲染;语法:

value,key in items
value,key of items

        变异方法:vue提供一组方法,对数组进行操作时候,会触发试图更新;

push()  pop()  shift()  unshift()  splice()  sort()  reverse()


2、v-on指令

        用来监听DOM事件触发的代发;语法:

v-on:eventName="eventHandle"
//指令简写
@eventName="eventHandle"

        事件处理函数,写在methods中统一管理。

        事件对象,在事件处理函数中获取;内联事件处理函数执行,传入事件对象 $event。

<div id="demo" @click='change(123,$event)'></div>
var vm = new Vue({
    el:"#demo",
    methods:{
        change(num,ev){
            console.log(ev)
        }
    }
})

        事件修饰符:事件处理函数只有纯粹的逻辑判断,不处理DOM事件的细节;例如:阻止冒泡、取消默认行为、判断按键。

        修饰符的位置:

v-on:eventName.修饰符

        修饰符

.stop(阻止冒泡)  .prevent(取消默认行为)  .capture  .self  .once(只触发一次事件)

        按键修饰符

.enter  .tab  .delete  .esc  .space  .up  .down  .left  .right  .ctrl  .alt  .shift  .meta  .键值 


3、条件渲染,v-show指令

        根据表达式的值,用来显示/隐藏元素。元素会被渲染在页面中,只根据表达式的值进行css切换。语法:

v-show=" 表达式 "

        

4、动态绑定 class

        class也为元素的属性,可以使用 v-bind:class。语法:

:class = "{ className:表达式 }"
//表达式为true,添加className;false不添加。
//如:<input type="checkbox" v-model="item.isChecked" />


5、自定义指令

        除了vue内置的指令,可以自己设置指令,选项对象的directives属性;

{
    directives:{}
}

         钩子函数:

        update 被绑定元素所在的模板更新时调用;

        钩子函数中的参数:el 表示指令所绑定的元素,可以用来直接操作DOM;binding 表示一个对象;value 表示指令的绑定值。

<input type="text" v-focus="表达式" />
new Vue({
    directives:{
        "focus":{
              update(el,binding){
                  console.log(binding);
                  if(binding.value){
                      el.focus();
                  }
              }
         }
    }
})

        打印 binding 的结果如下,value 是表示返回的结果(true/false);

QQ截图20171108214446


6、计算属性 computed

        为什么要使用计算属性?模板是为了描述试图的结构,模板中放入太多逻辑,导致模板过重且难以维护。

        在计算一个计算属性时,Vue.js更新它的依赖列表并缓存结果,只有当其中一个依赖发生了改变,缓存的结果才无效。语法如下:

{
    computed:{}
}

        例子

<li>{{ noCheckeLength }}个任务未完成</li>
new Vue({
    computed:{
	noCheckeLength:function(){
	    return this.list.filter(function(item){
                 return !item.isChecked
            }).length
	}
    }
})


7、watch深度监控数据

//存取localStorage中的数据
var store = {
	save(key,value){
		localStorage.setItem(key,JSON.stringify(value));
	},
	fetch(key){
		return JSON.parse(localStorage.getItem(key)) || [];
	}
}
//取出所有的值
var list = store.fetch("miaov-new-class");
var vm = new Vue({
    el:".main",
    data:{
        list:list,
    },
    watch:{
        /*
        list:function(){  //监控list这个属性,当这个属性对应的值发生变化就会执行函数
            store.save("miaov-new-class",this.list);
         } //这种方式只能监控list长度变化,不能监控到list值发生改变;下面这种方式可以做到。
        */
        list:{//这种方式是深度监控
            handler:function(){
                store.save("miaov-new-class",this.list);
            },
	    deep:true
        }
    }
})


8、利用hash过滤数据

function watchHashChange(){
    var hash = window.location.hash.slice(1);
    console.log(hash);
}
watchHashChange();
window.addEventListener("haschange",watchHashChange);
标签: vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码