Vue.js学习笔记

Vue.js 学习笔记

目录

引入

开发环境

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

有命令行告警，便于开发使用

生产环境

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

优化了尺寸和速度

基本介绍

数据显示

• 直接使用 {{ XXX }}
  注意不要漏掉前后空格，数据绑定于data的数据项中。

• 数据绑定 v-bind

<span v-bind:title='message'></span>

注意bind可以绑定标签所有的合法参数，如id/name/value/title等。

条件显示和循环显示

• 条件显示 v-if

<p v-if="seen">现在你看到我了</p>

通过控制v-if后面的变量值为true/false来控制对应的标签是否显示。
注意0/null/空字符串效果和false一样，其他所有值视为true，包括空数组[]和空结构体{}。

• 循环显示 v-for

<li v-for="todo in todos">
   {{ todo.text }}
</li>

todos: [
   { text: '学习 JavaScript' },
   { text: '学习 Vue' },
   { text: '整个牛项目' }
]

app.todos.push({ text: '新项目' })

v-for的写法类似于python中的循环写法：
JS中配置的数组为todos，包含三个结构体元素，每个结构体含有text变量。
todo in todos是循环todos中的所有元素，当前元素被命名为todo。
需要显示的内容为每个元素的text变量，最终的内容应为{{ todo.text }}

事件绑定

• 事件监听 v-on
• 表单绑定 v-model

自定义组件

---

Vue实例

每个Vue应用都是通过新建一个Vue实例开始的，通过增加数据和函数来实现各种功能。

var app = new Vue({});

数据

数据项可以接收直接赋值或者变量赋值，数据项的设置在data中，之后可以使用app.a的方式进行重新赋值或使用。

var data = { a : 1 };
var app = new Vue({
    el: '#example',
    data: {
        newTodoText: '',
        visitCount: 0,
        hideCompletedTodos: false,
        todos: [],
        error: null
    }
    // data: data
});

data中的数据可以与HTML页面上的内容进行绑定，也可以不绑定先设置数据项，到必要时再进行使用。

但需要注意的是，使用变量赋值时，任意一方的变化将直接影响另一方。

特例是使用Object.freeze()函数，当会阻止属性值的变化，使其维持在freeze()函数执行前的状态。

方法

Vue还提供了一些与生命周期有关的函数（钩子），如 created、mounted、updated 和 destoryed 等。均会在对应的变化结束后开始执行。

var data = { a : 1 };
var app = new Vue({
    el: '#example',
    data: {
    },
    // 自己创建的方法
    func: function(){
        ......
    },
    created: function(){
        ......
    }
    // 生命周期钩子，将在实例创建后执行
});

提供的实例变量和方法

Vue还提供了一些实用的实例变量和方法，可以即时调用，均含有前缀$ ，以此来区分用户自己设置的变量。

    vm.$data
    vm.$el

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
    });

---

模板语法

参考教程

1. https://cn.vuejs.org/v2/guide/index.html