vue.js 学习笔记

HTML/CSS/JS 阅读: 415

安装

下载 vue.js 或者 vue.min.js 文件,在需要的html文档中使用。下面是 vue.js 的hello world例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.js Hello World</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
var vm = new Vue({
    'el': '#app',
    'data': {
        'message': 'Hello World!',
    }
});
    </script>
</body>
</html>

其中Vue()为vue组件的构造函数,传入一个配置对象,其中:

  • el 为要构造的组件,使用css选择器。
  • data 为组件中的各变量的值。
  • {{ message }} 为文本插值,文本值可以在data.message中赋值,之后可以在控制台通过 vm.message = newValue 动态修改,页面也将会自动更新。

插值

vue.js 有两种插值方式,一种是文本插值,另外一种是原始html插值。

文本插值

<span>{{ message }}</span>

message的值若是html将不会以html方式显示,而是显示其html文本内容。

原始html插值

<span v-html="rawHtml"></span>

vue.js中带v-开头的属性称为指令,v-html="rawHtml"的作用就是将rawHtml的值用html方式显示出来。 比如,若是rawHtml为<b>Hello</b>,Hello将会以粗体的方式显示在页面上。

除了上面两种插值外,还可以在双大括号内直接使用js表达式,如:
{{ message.split('').reverse().join('') }}
这将会逆转 message 文本。要注意的是,表达式末尾不要加分号,只能使用表达式,而不能是多条语句,也不能是ifwhile等结构。
可以使用普通js表达式,例如
{{ alert('vue.js') }}
会在浏览器弹出 'vue.js' 。

指令

vue.js中标签带v-开头的属性称为指令。

指令参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如:

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

其中href即为v-bind参数。

指令修饰符

修饰符是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

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

v-bind 指令

v-bind指令带有一个参数,这个参数表示要绑定的html属性名,参数值可以变量,这样可以就进行动态绑定属性了。
例如:

<div v-bind:class="boxClass"></div>

之后就可以使用 vm.boxClass 动态修改该div的class的了。
v-bind 常用参数有 styleclassidhrefdisabled 等。
vue.js为v-bind提供了缩写,上面的例子可以写成:

<div :class="boxClass"></div>

v-bind:缩写为:即可。

v-on 指令

v-on指令用于监听 DOM 事件:

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

其中doSomething可以是js代码,也可以一个方法名,这个方法名需要在Vue()构造方法的参数 methods 对象中定义:

var vm = new Vue({
  el: '#app',
  // 在 `methods` 对象中定义方法
  methods: {
    doSomething: function (event) {
      // some code
    }
  }
});

vue.js为v-on提供了缩写,上面的例子可以写成:

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

v-on:缩写为@即可。

计算属性

计算属性是 vue 中可以使用一个函数计算后返回的属性值。

<div id="app">
    <p>Origin: {{ message }}</p>
    <p>Reversed: {{ reverseMessage }}</p>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        'message': 'luoluolzb',
    },
    computed: {
        //reverseMessage getter
        reverseMessage: function() {
            return this.message.split('').reverse().join('');
        },
});

这个例子中显示的结果为:

<div id="app">
    <p>Origin: luoluolzb</p>
    <p>Reversed: bzlouloul</p>
</div>

其中reverseMessage函数的返回值会插入到{{ reverseMessage }}位置。 计算属性不同于普通方法,计算属性是有缓存的,只有在依赖的message值改变时,reverseMessage函数才会重新执行。

侦听器

侦听器可以在数据发生变化的时候执行某些操作,从而动态响应数据的变化。

<div id="app">
    <input type="text" v-model="expr" placeholder="输入表达式" /> = {{ result }}
    <div style="display: none;">{{ expr }}</div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        'expr': '',
        'result': '',
    },
    watch: {
        //expr listener
        expr: function(){
            this.result = eval(this.expr);
        }
    },
});

这个例子是一个简易的计算器,v-model指令可以将表单值与一个vue变量绑定在一起。 watch中的函数在制定的变量值改变时将会被执行。

计算属性和监听器的使用比较:watch(异步场景,事件监听),computed(数据联动)

条件渲染

vue提供了条件渲染功能,在需要的时候在显示某些内容。

<span v-if="s == 1">
    s = 1
</span>
<span v-else-if="s == 2">
    s = 2
</span>
<span v-else>
    s > 2
</span>

这个例子会根据变量s的值动态选择一个span标签显示出来。其中v-else-ifv-else是可选的。
另外,若在template标签上使用条件渲染,将不会显示此标签。

此外,v-show指令也可以用于是否显示,不同的是v-show的显示是否是通过display实现的。

循环渲染

v-for指令提供了循环渲染功能:

<ul>
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

其中items是要遍历的数组或对象,在标签中可以使用item访问数组元素。
对于数组可以添加一个参数来获取序号:

<ul>
  <li v-for="(item, index) in items">
    {{ item.message }}
  </li>
</ul>

对于对象还有两个参数来获取属性名和序号:

<ul>
  <li v-for="(item, key, index) in items">
    {{ item.message }}
  </li>
</ul>

此外,v-for也可以用于在template标签上,从而作为容器包裹多个标签。

组件

组件注册

使用Vue.component()函数注册全局vue组件:

Vue.component('blog-title', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>',
});

其中props数组声明这些属性可以从父组件中传入,template为组件的html内容,注意必须用一个顶级标签包裹起来(每个组件必须只有一个根元素)。
初始化对象中还可以写 datamethodscomputedwatch 等属性。

以上定义了 blog-title 组件后,使用以下方式进行使用:

<blog-title title="article title"></blog-title>

或者用动态绑定的方法传入:

<blog-title v-bind:title="title"></blog-title>

插槽

当我们需要在自定义组件内传入内容时,组件怎么获取到这些内容呢:

<slot-test>测试插槽</slot-test>
Vue.component('slot-test', {
    template: '<b><slot></slot></b>',
});

这个例子中的渲染结果为:

<b>测试插槽</b>

说明了在组件定义时候可以使用slot标签使用传入的内容。

VueJs

版权声明:本文为博主原创文章,转载需注明来自: 洛洛の空间