单文件组件&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内部用的,当你研究原理时会涉及到。平常使用可以忽略掉。
- el:挂载容器dom
- template:视图模板,-> $mount
- jsx[数学公式]
构建视图有2步:
- 构建一个视图,new Vue包含结构 样式 动态绑定的数据
- 指定挂载容器,放在页面中指定容器中渲染
el->template
- 有template就按照template来编译渲染,没有就按照el或$mount指定的容器模板来构建视图
- el $mount指定了模板的挂载点,指定渲染的位置
最常用的$mount
MVVM
两条线
特点:放弃操作dom元素
文本框中输入内容,用户自己输入内容,视图里的内容变了;
viewModel就是vue内部实现的
有两条线:
如何构建数据:即data computed
如何构建视图:即template
new Vue
@click="change()"
并不是:把change执行然后把返回结果赋给click
vue-template的语法
框架诞生都是为了提高开发效率
更简单
性能会更好
计算属性:依赖某些状态值,计算某些新值
函数执行的结果赋给sub这个属性
各种optionsApi,data computed,如何构建数据,如何修改数据
template:胡子语法&各种各样指令,如何构建视图,视图编译机制和原理
放弃操作dom,直接操作数据
- 构建视图
- 构建数据
思想上