理解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组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作. 如抽取人类为组件,其基本的属性有姓名.年龄.国籍:基本的方法有吃饭.睡觉.跑步等. & ...
随机推荐
- shell脚本函数与数组
前言 之前写过一篇关于shell脚本流程控制总结,这次继续写关于shell脚本的问题.本篇文章主要包含shell脚本中的函数以及数组的用法介绍.同时也涵盖了一些字符串处理以及shell脚本比较使用的小 ...
- HTML学习笔记(一)HTML的一些概念区别
HTML HTML 指超文本标记语言.在 HTML 4 中,有若干的标签和属性是被废弃的,替换成style对应的属性 应该避免使用下面这些标签和属性: 标签 描述 style <center&g ...
- IOS Carthage安装、使用
一.Carthage的安装和使用1.安装homebrew后输入如下命令 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercont ...
- Weekly Contest 111-------->942. DI String Match
Given a string S that only contains "I" (increase) or "D" (decrease), let N = S. ...
- 萌新学习图的强连通(Tarjan算法)笔记
--主要摘自北京大学暑期课<ACM/ICPC竞赛训练> 在有向图G中,如果任意两个不同顶点相互可达,则称该有向图是强连通的: 有向图G的极大强连通子图称为G的强连通分支: Tarjan算法 ...
- [Xcode 实际操作]一、博主领进门-(11)代码区的样式设置,设置模拟器启动的声音
目录:[Swift]Xcode实际操作 本文将演示如何对Xcode代码区进行样式设置,从而调整代码的外观属性.随便打开一份代码文件. [Xcode]->[Preferences]参数设置-> ...
- 最长XX序列问题小结 By cellur925
今天我们搞一搞几个经典序列问题之间的爱♂恨♂情♂仇. 首先我们看一看LIS(最长上升子序列)(From my onenote)
- js实现打印正三角
代码: <html> <head> <title>function</title> </head> <body> <scr ...
- 115 Distinct Subsequences 不同子序列
给定一个字符串 S 和一个字符串 T,求 S 的不同的子序列中 T 出现的个数.一个字符串的一个子序列是指:通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(譬如," ...
- php出现Warning: file_put_contents,failed to open stream
Warning: file_put_contents(D:/wwwroot/jinxiongdi/web/temp/caches/f/index_40F756F0.php) [function.fil ...