理解Vue
Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。
Vue和MVVM模式

MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。
ViewModel是Vue的核心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。
Vue.js特点
简洁:页面由HTML模板+Json数据+Vue实例组成
数据驱动:自动计算属性和追踪依赖的模板表达式
组件化:用可复用、解耦的组件来构造页面
轻量:代码量小,不依赖其他库
快速:精确有效批量DOM更新
模板友好:可通过npm,bower等多种方式安装,很容易融入
Vue.js入门小例子
声明式渲染
本例子由HTML模板(View)+Json数据(Model)+Vue实例(ViewModel)组成。
创建Vue的实例,需传入一个选项对象,如:数据、挂载元素、方法、模生命周期钩子等。本例子中,选项对象的el属性为#app,表示Vue实例挂载在<div id="app">...</div>元素上,data属性为exampleData,表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法,在运行时,{{message}}会被数据对象的message属性替换。
双向绑定
在Vue中使用v-model在表单元素上实现双向绑定。
Vue指令
Vue指令以v-开头,可将指令视作特殊的HTML属性(attribute),用于扩展html标签功能。
v-for
v-show
v-if
v-bind
v-on
Vue组件
组件可以扩展HTML元素,封装可重用的代码。
动态组件
多个组件可以使用同一个挂载点,然后动态的在他们之间切换。
嵌套组件
组件本身也可以包含组件
=========================================================
// 定义组件
var MyComponent = {
template: '<div>这是自定义组件</div>'
}
// 注册全局组件
Vue.component('aaa', MyComponent)
// 创建根实例
new Vue({
el: '#box'
})
//使用组件
<div id="box">
<aaa></aaa>
</div>
自定义元素的作用只是作为一个挂载点
=============================================================
// 定义组件
var MyComponent = {
template: '<div>A custom component!</div>'
}
// 创建根实例
new Vue({
el: '#example'
components:{ //注册局部组件
"aaa":MyComponent
}
})
//使用组件
<div id="example">
<aaa></aaa>
</div>
理解Vue的更多相关文章
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 深入理解vue
一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 深入理解vue的watch
深入理解vue的watch vue中的wactch可以监听到data的变化,执行定义的回调,在某些场景是很有用的,本文将深入源码揭开watch额面纱 前言 watch的使用 watch的多种使用方式 ...
- 手摸手带你理解Vue的Computed原理
前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利.那么本文就来带大家全面理解 computed 的内部原理以及工作流程. 在这之前,希望你能 ...
- 手摸手带你理解Vue的Watch原理
前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用.在面试时,也是必问知识点,一般会用作和 computed 进行比较. 那么本文就来带大家从源码理解 ...
- 不一样的角度理解Vue组件
什么是组件 以Java.C#等面向对象编程语言的角度去理解Vue组件,能够发现组件和面向对象编程的方式和风格很相似.一切事物皆为对象,通过面向对象的方式,将现实世界的事物抽象成对象,现实世界中的关系抽 ...
- 尝试用面向对象思维理解Vue组件
什么是组件 用面向对象的思维去理解Vue组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作. 如抽取人类为组件,其基本的属性有姓名.年龄.国籍:基本的方法有吃饭.睡觉.跑步等. & ...
随机推荐
- Struts2 基础典型应用
例子 下面就是运用Struts2 实现的例子的运行效果 输入正确名字 不输入直接点击提交按钮 在首页面中输入名称,点击提交按钮,显示欢迎界面. 如果没有名称,点击提交按钮,就显示错误界面. ===== ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- IOS11 - UINavigationItem大标题,搜索栏实现
1.新建模型 class Contact: NSObject { var name : String? var mobile : String?{ didSet{ { mobileString = m ...
- [Xcode 实际操作]七、文件与数据-(23)UI Testing系统界面测试功能的使用
目录:[Swift]Xcode实际操作 本文将演示UI Testing系统界面测试功能的使用. 如果项目中尚未引入界面测试功能,请点击项目属性面板->[General]面板左下角的[+]图标 - ...
- day04 基本类型包装类
- A - Wireless Network
#include <cstdio> #include <algorithm> #include <cstring> #include <iostream> ...
- Requests 入门
首先直接通过管理员运行cmd,然后执行 pip install requests 就可以直接安装Requests库了 有个最基本的语句 r = requests.get(url) 通过request ...
- python操作json来存储简单的数据,pickle来操作复杂的数据
json作为不同语言间进行数据交互的媒介,在当下已经渐渐取代了之前的xml,看一波python操作json # coding = ascii import json import pickle imp ...
- scrapy框架中Download Middleware用法
scrapy框架中Download Middleware用法 Downloader Middleware处理的过程主要在调度器发送requests请求的时候以及网页将response结果返回给sp ...
- GYM 101673F(树计数)
树上每个割点计算一下各个size的组合相乘再相加为第一问答案,取最大的:再把本答案中最大的两个size相乘减掉,为第二问答案. const int maxn = 1e4 + 5; int n, siz ...