vue 基本操作

Posted 牵只蜗牛去散步!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 基本操作相关的知识,希望对你有一定的参考价值。

vue.js的基本操作

1.message输出data数据中的message。


2.v-for="todo in todos"输出data数据中的dotos数组


3.v-on:click="aaaa"绑定methods中的aaaa()事件,可以简写为@click


4.v-model="input" 输出data数据中input的值,双向绑定。


5.this.$dispatch("aaa", this.msg)向上派发事件,aaa写在events中


6.:id="branch"表示id的值由data数据中的branch决定,通常用于for循环
<template v-for="branch in branches">
  <!--:为传入的branch值-->
  <input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch"><label :for="branch">branch</label>
</template>


7.:class="bold: isFolder"或:class="isFolder1 > 0 ? 'aaa1' : 'bbb1' "表示当isFolder为true时class=bold。


8.v-show="open"表示当open为true时显示


9.v-if="isFolder"表示当isFolder为true时显示


10.v-show与v-if的区别为当元素不显示时,v-show可以将data中的open设置为false,实现双向数据绑定


11.子组件获取数据的方式

例:在父级中设置<item class="item" :model="treeData"></item>
子级中使用
Vue.compoent("item",
props: ['model']
...
)
的方式获取


12.created:生命周期,DOM还未形成之前


13.computed:生命周期,在例如:class="bold: isFolder中的isFolder是true还是false的时候执行


14.在子级下的数据data的写法为

data:function() 
    return 
        open: false
    


以上的return值表示open的获取,不表示将open返回到父级,与双向绑定无关.

var Person = Vue.extend(
    template: "<div><span>name: </span>name<span>age: </span>age</div>",
    data: function() 
        return 
            name: "lili",
            age: 22
        
    
);


15.key | filter表示key通过filters中的filter()函数进行过滤


16.v-for="entry in data | filterBy filterKey"表示在循环中直接进行数据过滤


16.debounce="300"表示延迟执行300ms


17.v-html相当于
<div v-html="html"></div>
<!-- 相同 -->
<div>html</div>
即可以输出html的标签,在表单提交的时候不使用,防止xss攻击


18.watch表示监听
watch:
    currentBranch: 'fetchData'

当打他数据中的currentBranch发生改变时,执行fetchData函数


19.slot的使用

<div class="modal-header">
    <slot name="header">
        default header
    </slot>
</div>

<div class="modal-body">
    <slot name="body">
        default body
    </slot>
</div>
<h3 slot="header">custom header</h3>

slot会将defaut中的default header变为custom header。


20.sync实现双向数据绑定,将父级通过props传入到子级中的变量通过子级进行修改,双向绑定后会改变父级中的对应传到子级的那个变量


21.transition添加css属性实现动态效果
例一个class="expand"的属性

.expand-transition 
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
//表示正常情况下的效果
.expand-enter, .expand-leave 
    height: 0;
    padding: 0 10px;
    opacity: 0;
//元素在消失或显示的时候展示的效果
<div transition="expand"></div>直接写在html标签中
<div v-if="show" :transition="transitionName">hello</div>
new Vue(
    el: '...',
    data: 
        show: false,
        transitionName: 'expand'
    
)
//写在Vue里

 


写在Vue里
22.

   var data = a: 1;
    var vm = new Vue(
        el: '#app',
        data: data
    )
    console.log(vm.a === data.a);//true
    vm.a = 2;
    console.log(data.a);//2
    data.a = 3;
    console.log(vm.a);//3


23.v-for循环输出,点击事件可以通过设置参数获取位置
例:<button v-on:click="removeTodo($index)">X</button>
23.子级下的子级添加组件的方式
例:

    var Person = Vue.extend();
    var Contact = Vue.extend(
        template: "<person></person>",
        components: 
            'person': Person
        
    )

 24.项目实例:https://github.com/PLDaily/vuejs-project

以上是关于vue 基本操作的主要内容,如果未能解决你的问题,请参考以下文章

vue配置路由以及设置路径简写

02-vue常用指令的基本使用

02-vue常用指令的基本使用

Vue 核心

Vue 核心

vue属性绑定和属性简写