Vue实例

创建Vue实例

一个简单的vm实例

let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                message2: '页面加载于' + new Date().toLocaleDateString(),
                seen: true,
                todos: [
                    { text: '学习JavaScript' },
                    { text: '学习Vue' },
                    { text: '整个项目' },
                ],
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });

数据与方法

viewModel的数据和方法

生命周期

viewModel生命周期方法，created，mounted,destroyed,updated等，以及生命周期图例

模板语法

插值

文本

绑定message数据

<span>Message: {{message}}</span>

仅一次绑定

<span v-once>Message: {{message}}</span>

html

双括号仅输出文本,v-html输出html

<p>{{rawHtml}}</p>
<p><span v-html="rawHtml"></span></p>

属性

不能直接作用与html属性上，需要通过v-bind:attr进行绑定

<span v-bind:title="spanTitle"></span>

简单JS语句

注意不是语句

{{number + 1}}
{{ok ? 'YES' : 'NO'}}
{{message.split('').reverse().join('')}}

指令

以v开头的特殊属性

<p v-if="seen"></p>

参数

传递参数绑定到html属性

<a v-bind:href="url">链接</a>

事件

<a v-on:click="doSomething">...</a>

动态参数

类似JS属性表达式，避免使用大写，浏览器会默认转换为小写匹配。

<a v-bind:[attrname] = "url"></a>

修饰符

以.后面加修饰，比如.prevent触发的事件调用event.preventDefault()

<form v-on:submit.prevent="onSubmit">

</form>

缩写

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<a :href="url"></a>

<a :[attrname]="url"></a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

<a @[event]="doSomething"></a>

计算属性和侦听器

计算属性，用于对数据进行复杂加工

例子

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

添加计算属性

let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                rawHtml: '<span style="color:red;">原始html</span>',
                attrname: 'href',
                attrNameValue: 'http://www.example.com',
            },
            computed: {
                reversedMessage: function() {
                    return this.message.split('').reverse().join('');
                }
            }
        });

计算属性vs方法

计算属性响应式依赖某个属性，会缓存。即如果依赖没有变，或者没有依赖，那么多次调用的结果还是原来的值

computed: {
    now: function() {
        return Date.now();//无依赖，多次调用还是第一次的结果
    }
}

而方法则是每次都会执行计算

计算属性默认只有getter但是也可设置setter

fullName: {
    set(value) {
        console.log('xxxaaa');
    },
    get() {
        return "hello";
    }
}

监听器

watch: {
    //监听message属性
    message: function(newValue, oldValue) {
        console.log({newValue, oldValue});
    }
}

class 与 style绑定

绑定class

传入对象

<button class="default" v-bind:class="{btn: isBtn, 'btn-like': isLike, open: isOpen}"></button>

对应着数据或计算数据

let vm = new Vue({
   data: {
       isBtn: true,
       isLike: true,
       open: true
   },
   computed: {
       isOpen() {
           return !open;
       }
   }
});

传入数组

<button v-bind:class="[btnClass, likeClass]"></button>

let vm = new Vue({
    data: {
        btnClass: 'btn',
        likeClass: 'btn-like'
    }
})

其实也就是将双引号内的当初正常的js代码理解就行了

绑定style

style的话就基本很接近css的写法了

属性可以用驼峰式和短线式，短线式的话要用单引号括一下。

<!-- 分个绑定 -->
<button v-bind:style="{color: textColor, fontSize: textFontSize + 'px', 'backgound-color':'red'}"></button>

<!-- 直接绑定对象 -->
<span v-bind:style="textStyle"></span>

<!-- 数组 -->
<span v-bind:style="[textStyle, bgStyle]"></span>

let vm = new Vue({
    data: {
        textColor: '#000',
        textFontSize: 15,
        textStyle: {
            color: 'red',
            fontSize: '14px'
        },
        bgStyle: {
            display: 'block',
            backgroundColor: 'red',
            padding: '10px'
        }
    }
});

hujiejeff / hujiejeff.github.io

Vue笔记 #1

概览