vue语法汇总

[Narutocc]

demo.vue文件模板

<template>
    <div id="app">
        <div>{{msg | capitalize}}</div>
        千米：<input type="text" v-model='kilometers'>
        米：<input type="text" v-model='meters'>
    </div>
</template>

<script>
    export default{
        name: 'app',
        data () {
            return {
                msg:'test',
                kilometers:0,
                meters:0
            }
        },
        methods: {
            aa () {
                console.log(111)
            }
        },
        mounted () {

        },
        //自定义过滤器
        filters: {
            capitalize (value) {
                return value.toUpperCase()
            }
        },
        //计算属性
        computed: {
            reverseData () {
                return this.msg.split().reverse().join('')
            },
            site: {
                //getter
                get () {
                    return this.name + ' ' + this.url
                },
                //setter
                set (newValue) {
                    this.name = ...
                    this.url = ...
                }
            }
        },
        //监听属性
        watch: {
            kilometers (val) {
                this.kilometers = val;
                this.meters = val * 1000
            },
            meters (val) {
                this.kilometers = val / 1000;
                this.meters = val;
            }
        },
        props: {

        }
    }
    //假定vm是实例化出来的new Vue
    vm.$watch('kilometers',function(newValue,oldValue){
        ...
    })
</script>
<!-- 
v-model:双向绑定数据
v-if:条件判断,元素是否显示 v-else
模板写法：{{#if OK}}YES{{/if}}
v-show：元素是否显示
v-for：循环语句
<li v-for="site in sites">{{site.name}}</li>
添加索引循环写法：<li v-for="(site,index) in sites"></li>
循环整数：<li v-for="n in 10">{{n}}</li>

v-bind缩写（一般采用缩写）
v-bind:class ==> :class 显示与否
v-bind:href ==> :href
v-on缩写（一般采用缩写）
v-on:click="dosomething" ==> @click="dosomething"

过滤器接受链式调用，支持传入多个参数
{{msg | filterA | filterB}}
{{msg | filterA('params2',params3)}}

计算属性：computed
反转字符串：{{msg.split('').reverse().join('')}}
属性有：getter/setter

监听属性：watch  监听数据改变页面更改数据显示

样式绑定
:class 不会覆盖原先的class名
:class='{active:isActive}'  ==> isActive判断为true or false
如果出现class名是两个单词的，则加上引号，如下：
:class='{'text-danger':hasError}'

:style
:style="{color:activeColor,fontSize:fontSize + 'px'}"
如果出现两个单词的话使用驼峰写法

:id
:disabled

v-model用在表单控件上，用于实现双向数据绑定，所以如果是用在除了表单控件以外的标签是没有任何效果的。

事件处理器：
写法：@click.stop="doThis"
    @submit.prevent="onSubmit"
    @click.stop.prevent="doThat"
事件修饰符 ==>
.stop  阻止单击事件冒泡
.prevent 提交事件不再重载页面
.capture 修饰符可以串联
.self    只当事件在该元素本身（而不是子元素）触发时回调
.once   事件只能点击一次
.capture 添加事件侦听器时使用事件捕获模式

表单：
修饰符：
.lazy   在'change'而不是'input'事件中更新
.number 转为Number类型
.trim   自动过滤用户输入的首尾空格
 -->

[Narutocc]

增加的备注...

:class 三元表达式

新增加的class名跟标签原有的class名称不冲突，三元判断的名称最好不要是变量，如wrapBg直接在css里面定义.wrapBg的样式。

<div class="wrap" :class="{wrapBg:isShowWrapBg}"></div>
<div :class="{'wrapBg':showBg === 'bg-1'}"></div>

:src跟v-if写法

<img :src="data.icon" v-if="imgName === data.showImg">

v-for尽量把index加上，以免数据没有更新

<div v-for="(man, index) in characterBigMen">

props定义

当有数据传递的时候，使用了props定义的变量就不要在data里面定义了，双重定义的话虽然程序可以正常运转，但是控制台会报错===use prop default value instead

.vue文件中监听input输入事件 oninput

<input type="text"  v-model="initData" :input="updateName(initData)">

或者直接用@input 也可以