Vue.js learning notes
Vue.js
目录
命令式渲染
命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。 命令式渲染通常意味着手动操作 DOM
声明式渲染
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。 命令式渲染通常意味着手动操作 DOM
MVVM
MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染
M（Model）：普通的 javascript 数据对象
V（View）：前端展示页面
VM（ViewModel）：用于双向绑定数据与页面，就是 vue 的实例
Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
核心功能
-
基础功能：页面渲染、表单处理提交、帮我们管理 DOM(虚拟 DOM)节点
-
组件化开发：增强代码的复用能力，复杂系统代码维护更简单
-
前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互
-
状态集中管理：MVVM 响应式模型基础上实现多组件之间的状态数据同步与管理
-
前端工程化：结合 webpack 等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。
安装/使用
NPM
npm install vueScript
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>@vue/cli vue-cli
npm install @vue/cli
vue create app基础功能
<!-- index.html -->
<div id="app">{{ value }}</div>// index.js
let app = new Vue({
el: "#app",
data: {
message: "Hello",
},
});指令
除 v-for 外，所有指令 attribute 的预期值都是单个 js 表达式
参数
v-bind
<span v-bind:title="message">I'm a span.</span>将这个元素节点的
titleattribute 和 Vue 实例的messageproperty 保持一致
v-on
<button v-on:click="click_method">Click</button>省略写法
<span :title="111">I'm a span.</span>
<button @click="click_method">Click</button>属性 方法
watch
watch: {
test: function () {
this.w_data = this.test
}
}computed
computed: {
c_data: function () {
return this.test.split('').reverse().join('')
}
},methods
methods: {
reverse: function () {
this.test = this.test.split('').reverse().join('')
}
},mounted
mounted: {function () {
// get list
}实例生命周期钩子
- 计算属性 computed 以及对应的声明周期
执行顺序实在 beforeMount 与 mounted 之间
组件 components
路由 router
安装 install
npm
npm install vue-router// main.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);@vue/cli
vue add router使用
详见 Demo
router-view
<router-view></router-view>router-link
<router-link to="/about">Go to about</router-link>