Vue.js

目录

命令式渲染

命令式:一步一步告诉程序如何去做,能否达成结果取决于开发者的设计。
命令式渲染通常意味着手动操作 DOM

声明式渲染

声明式:只告诉程序想要什么结果,如何达成由程序保证,开发者不用关心。
命令式渲染通常意味着手动操作 DOM

MVVM

MVVM:页面输入改变数据,数据改变影响页面数据展示与渲染

M(Model):普通的 javascript 数据对象

V(View):前端展示页面

VM(ViewModel):用于双向绑定数据与页面,就是 vue 的实例

Vue.js

https://vuejs.org/v2/guide/

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

核心功能

  • 基础功能:页面渲染、表单处理提交、帮我们管理 DOM(虚拟 DOM)节点

  • 组件化开发:增强代码的复用能力,复杂系统代码维护更简单

  • 前端路由:更流畅的的用户体验、灵活的在页面切换已渲染组件的显示,不需与后端做多余的交互

  • 状态集中管理:MVVM 响应式模型基础上实现多组件之间的状态数据同步与管理

  • 前端工程化:结合 webpack 等前端打包工具,管理多种静态资源,代码,测试,发布等,整合前端大型项目。

安装/使用

NPM

1
npm install vue

Script

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

@vue/cli vue-cli

https://cli.vuejs.org/guide/

1
2
3
npm install @vue/cli

vue create app

基础功能

1
2
<!-- index.html -->
<div id="app">{{ value }}</div>
1
2
3
4
5
6
7
// index.js
let app = new Vue({
el: "#app",
data: {
message: "Hello",
},
});

指令

除 v-for 外,所有指令 attribute 的预期值都是单个 js 表达式

参数

v-bind

1
<span v-bind:title="message">I'm a span.</span>

将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致

v-on

1
<button v-on:click="click_method">Click</button>

省略写法

1
2
3
<span :title="111">I'm a span.</span>

<button @click="click_method">Click</button>

属性 方法

watch

1
2
3
4
5
watch: {
test: function () {
this.w_data = this.test
}
}

computed

1
2
3
4
5
6
computed: {
c_data: function () {
return this.test.split('').reverse().join('')
}

},

methods

1
2
3
4
5
methods: {
reverse: function () {
this.test = this.test.split('').reverse().join('')
}
},

mounted

1
2
3
mounted: {function () {
// get list
}

实例生命周期钩子

参考1 2

Vue 实例生命周期

  • 计算属性 computed 以及对应的声明周期

执行顺序实在 beforeMount 与 mounted 之间

组件 components

路由 router

https://router.vuejs.org/

安装 install

npm

1
npm install vue-router
1
2
3
4
5
6
// main.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

@vue/cli

1
vue add router

使用

详见 Demo

router-view

1
<router-view></router-view>
1
<router-link to="/about">Go to about</router-link>

参考