单文件组件&MVVM

单文件组件&MVVM

所谓组件化开发，就是创建一个个组件。

Vue是一个大类，渲染一切从new Vue开始。

指定视图：el template render:jsx语法 $mount[数学公式]

编译App.vue，作为视图入口

单个组件：结构 样式 data computed，理解为一个界面一个视图

每个组件都有自己单独的视图，单独的样式，单独的程序。

template：每个组件的视图。胡子语法和指令构建视图

相当于是new Vue的时候各种optionsAPI，那每个单文件自己会去做new Vue。

name：组件名称

data(){}

new Vue -> initData

样式：

保证最外层样式名的唯一性

业务组件&通用组件

函数组件&类组件

vue2中的组件划分：

全局&局部

全局：main.js入口处注册，Vue.component

类组件&函数组件

进来一次渲染成什么就是什么样

创建单文件.vue组件 =》局部类组件，每次调用创建Vue类的实例。

指定视图容器

比传统的直接操作dom，简单高效一些

new Vue

$data：私有属性

_self：Vue内部用的，当你研究原理时会涉及到。平常使用可以忽略掉。

1. el:挂载容器dom
2. template：视图模板，-> $mount
3. jsx[数学公式]

构建视图有2步：

1. 构建一个视图，new Vue包含结构 样式 动态绑定的数据
2. 指定挂载容器，放在页面中指定容器中渲染

el->template

1. 有template就按照template来编译渲染，没有就按照el或$mount指定的容器模板来构建视图
2. el $mount指定了模板的挂载点，指定渲染的位置

最常用的$mount

MVVM

两条线

特点：放弃操作dom元素

文本框中输入内容，用户自己输入内容，视图里的内容变了；

viewModel就是vue内部实现的

有两条线：

如何构建数据：即data computed

如何构建视图：即template

new Vue

@click=”change()”

并不是：把change执行然后把返回结果赋给click

vue-template的语法

框架诞生都是为了提高开发效率

更简单

性能会更好

计算属性：依赖某些状态值，计算某些新值

函数执行的结果赋给sub这个属性

各种optionsApi，data computed，如何构建数据，如何修改数据

template：胡子语法&各种各样指令，如何构建视图，视图编译机制和原理

放弃操作dom，直接操作数据

• 构建视图
• 构建数据

思想上