Vue---(4h) 速成随手记

1 .Vue 的特点

        1 ) JavaScirpt 框架

        2 ) 简化Dom 操作

        3 ) 响应式数据驱动  (页面是由数据来生成 当数据改变 页面也会同步更新)

扩展: Vue 一大特点就是不用操纵DOM元素

2 . 建议 el:挂载点注意点:

   el:"Id选择器" 使用Id选择器

   什么是挂载?

                将组件渲染, 并且构造DOM元素然后塞入页面的过程称为组件的挂载

1 ) el作用是用来 设置 Vue实例挂载(管理)的元素

2 ) Vue 实例的作用范围是什么?

       Vue 会管理el选项命中的元素 及其内部的后代元素

3 ) 是否可以使用其他选择器?

           可以使用其他的选择器, 但是建议使用ID选择器

4 ) 是否可以设置其他的dom元素?

          可以使用其他的双标签, 不能使用 HTML 和 Body

3 .Vue中用到的数据定义 在 data 中

 data 中是可以写 复杂类型的 数据

渲染复杂类型数据的时候, 需要遵守 Js 的语法即可

4. Vue指令

{{}} 叫做插值表达式

v-text:

v-text 指令的作用: 设置标签的内容(textContent)

指令会替换标签内的全部内容, 而使用 插值表达式则可以替换指定内容

v-html:

v-html内容中的 html 结构会被解析为标签

v-html 与 v-text:

 解析文本使用 v-text 需要解析html结构使用 v-html

v-on:

v-on指令的作用 是为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在 methods 属性中

方法内部通过this 关键字可以访问定义在data中数据(起到修改数据的作用 就不需要调用DOM)

v-show:

v-show指令的作用是: 根据真假切换元素的显示状态

原理(本质)是修改元素的display, 实现显示隐藏

指令后面的内容, 最终都会被解析为布尔值

值为 true 元素显示, 值为 false元素隐藏

数据改变之后, 对应元素的显示状态会同步更新

v-if:

v-if指令的作用是: 根据表达式的真假切换元素的显示状态

本质是通过操纵DOM元素赖切换显示状态

表达式的值为true, 元素存在于 DOM树中, 为flase 从DOM树中移除

频繁的切换 v-show, 反之使用 v-if, 前者切换消耗小

v-bind:

v-bind指令的作用是:为元素绑定属性

完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删 建议使用class 对象的方式

v-for:

    v-for指令的作用: 是根据数据生成列表结构

        数组经常和v-for结合使用

        语法是 (item, index) in 数据

        item 和 index 可以结合其他指令一起使用

        数组长度的更新会同步到页面上, 是响应式的

        

v-on补充:

        事件绑定的方法写成函数调用的形式, 可以传入自定义参数

        定义方法时候需要定义形参来接收传入的参数

        时间的后面跟上 .修饰符 可以对事件进行限制

        .enter 可以限制触发的按键为回车        

        事件修饰符有多种

v-model:

        v-model的作用是便捷的设置和获取表单元素的值

        绑定的数据回合表单元素值相关联

        绑定的数据 双向绑定 表单元素的值        

5 . 什么叫做双向数据绑定?

       这个双向数据绑定的前提 是UI控件  Vue 是一个MVVM框架, 即数据双向绑定, 当数据发生变化, 视图也发生变化 , 反之亦然

        为什么要实现数据的双向绑定?

                     为了更方便我们处理表单  在Vue 中 使用Vuex实际上数据还是单方向的  

                                在全局性数据流使用单项, 方便跟踪     局部性数据流使用双向, 简单易操作

注:

        MVC框架: 作用是为了让一个程序有不同的表现形式, 同时将M与V实现代码分离.  M(Model): 业务模型  V(View): 用户界面  C(Controller): 控制器  (可忽略:  iOS 是苹果公司开发的移动操作系统)

MVVM: 首先也可以视作MVC框架的加强版, 实质上是没有区别的   MVVM更便于维护  但是代码量会比MVC框架略多

        MVVM框架和MVC框架, 主要目的都是为了 分离视图 和 模型

                        MVVM的优势: 

                                                1 ) 低耦合(说白了就是代码之间关联性较弱)

                                                2 ) 可重复性

                                                3 ) 独立开发

                                                4 ) 可测试