VUE 基础语法

Posted 2020-09-19 微笑代表淡定的心

 <script>
        //构造器
        new Vue({
            el: "#apps",
            data: {
                MSG: ‘THIS IS A TEST Pages‘,
                h2test: ‘<h5>this.page is h2 test.</h5>‘,
                class1: true,
                ok: true,
                message: ‘thisatest‘,
                id: 23,
                url: "http://www.baidu.com",
            },
            methods: {
                ReverseMsg: function () {
                    this.message = this.message.split(‘‘).reverse().join(‘‘)
                }
            },
            filters: {
                cap: function (value,val1,val2) {
                    if (!value) return ‘‘;
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.slice(1)+val1+val2;
                }
            }
        })     
    </script>

　　

1.绑定文本( v-model=‘MSG‘)

{{MSG}}

2.绑定html(v-html=‘‘)

 <div v-html="h2test"></div>

3.绑定标签属性（v-bind:属性名（如：href | class等）=‘‘），简写形式：@属性名=‘‘

<label for="i1">修改颜色：</label>

<input type="checkbox" v-model="class1" id="i1" /><br />

<div v-bind:class="{‘cls1‘:class1}">this is update background color div!</div>
4.表达式的应用

{{5+9}}<br />
{{ok?‘yes‘:‘no‘}}<br />@*三元运算符*@
{{message.split(‘‘).reverse().join(‘‘)}}<br />@*字符串反转*@
<div v-bind:id="‘list-‘+id">ID test</div>@*字符拼接*@

5.指令

<template v-if="ok">@*根据ok的值判断下面是否显示*@
<h1>使用指令进行判断是否显示</h1>
</template>

6.参数的使用 （v-on:事件=‘‘,简写：@事件=‘‘）

  <a v-bind:href="url" v-on:click="alert(url);">百度</a>@*url参数的使用*@

7.方法的调用

{{message}}

<button v-on:click="ReverseMsg">反正字符串</button>@*调用ReverseMsg方法*@

8.过滤器的使用

 {{message | cap(‘123‘,‘456‘) | cap(‘|‘,‘789‘)}}

9.VUE的属性和方法

var vm=new VUE({

 el:‘#app1‘,

data:{}

})

属性：

vm.$el    -->$(‘#app1‘)对象

vm.$data  -->包含所有自定义的字段的集合

.....

方法：

vm.$watch(‘da‘,function(newVal,oldVal){

console.log(newVal+‘|‘+oldVal);

})

当vm中data中包含的变量da值变化时触发这个事件