1 原生/函数库/框架

原生DOM/BOM是浏览器自带，比较繁琐；jQuery函数库第三方，简单，仅对四个步骤的API进行简化，没有对流程进行简化，存在大量重复操作；
框架：Vue/Angular/React，框架是半成品项目，从流程上根本的简化开发，消除重复操作

2 vue

Vue是渐进式的基于MVVM的纯前端的js框架。需要node.js在运行之前将vue编译成浏览器认识的HTML、CSS、js文件
渐进式：根据需要选择部分组件逐渐应用；
以数据为主的项目都可以用vue开发
Vue的使用

下载vue.js到客户端，在网页中引入
官网：cn.vuejs.org
开发版：包含完备的调试信息；生产版：删除调试信息
1）<script src=“js/vue.js”>
2）编写静态页面：
```
<div id="app">
   在需要显示数据的位置用{{变量}}占位
</div>
```
3）在自定义脚本
```
    <script>
       var vm=new Vue({
         el:”#app”,
         data:{
            页面需要的变量:值,
            ... : …
         }
       })
    </script>
```
data中的变量值会自动替换{{}}的位置，修改内存中data下的变量值，实现页面自动更新
安装脚手架工具

3 vue原理

传统网页划分：HTML(定义网页内容)、CSS(添加网页样式)、JS(添加交互行为)；由于HTML和CSS都是静态的，任何交互修改都需要JS实现导致重复代码过多

MVVM模式：对前端内容进行重新划分：每个html文件拆分成多个组件文件：.vue/.component
View视图：HTML+CSS；
Model模型数据：在内存中定义的或Ajax请求回来的，要加载到页面的所有数据的统称；模型数据中的值，称为模型变量；
ViewModel框架(控制器)：自动将页面View和模型数据Model同步

虚拟DOM树:
基于原生DOM树生成的，仅包含可能变化的元素的简化版DOM树。
优点：极其便于快速遍历，封装原生DOM操作，避免重复编码；仅修改发生变化的元素，效率高！
响应系统:
监视模型数据的变化，并通知框架修改页面的机制
通知原理: 自动给每个模型变量添加get()和set()访问器属性。每次修改模型变量时，都会触发set()，在set()中发送通知给DOM树。

4 绑定语法

{{模型变量}} 学名: 插值语法Interpolation
{{表达式}}
{{实例化对象}}
{{全局函数}}
{{对象的属性}}
{{数组的元素}}
{{三目}}
不能写程序结构：if else while for do while switch case
问题: 只能绑定内容，不能绑定属性和事件

5 指令(directive)

增强HTML功能的特殊属性，因为HTML本身是静态的，没有程序必须的元素: 变量、分支、循环
在开始标签<ANY 指令名=”值”>，包括:

v-bind: 绑定属性:
<ANY v-bind:属性名=”模型变量/表达式”
可简写为: <ANY :属性名=”模型变量/表达式”
v-on: 绑定事件处理函数
e.target是当前点击的元素；e.currentTarget是当前事件绑定的元素
<ANY v-on:事件名=”处理函数(参数值,…,$event)”>
可简写为:
<ANY @事件名=” 处理函数(参数值,…,$event)”
```
处理函数定义在:

 new Vue({
      el:”#app”,
      data:{ … },
      methods:{
             处理函数(形参,…){//vue省略了:function
               … …
			}
	  }
 })
```
获得事件对象e: 2步:
```
事件：<ANY @事件名=”处理函数($event)”
处理函数：
methods:{
  处理函数(e){
    e就是DOM的事件对象
  }
}
```
事件修饰符: 代替事件对象的API
1. 阻止默认行为: e.preventDefault()
  <ANY @click.prevent=”处理函数()”
2. 取消冒泡: e.stopPropagation()
  
  <ANY @click.stop=”处理函数()”
v-if: 根据条件控制元素的可见不可见
单独使用: <ANY v-if=”条件表达式”>控制一个元素的可见不可见
联合使用: v-if v-else-if v-else控制多个元素选其一显示
联合使用的元素必须紧邻
v-show: 根据条件控制元素的可见不可见
v-show是通过display:none隐藏——效率高；
v-if 是通过修改DOM树(是否加载DOM节点)实现隐藏——直接将元素完全去掉，效率低；
如果控制多个元素选其一显示时，首选v-if v-else-if v-else

v-for: 反复生成多个相同结构的HTML片段

   <parent>
       <child v-for=”(value,i) in/of 数组”>
          <sub>value和i可用于更子级元素的绑定</sub>
       </child>
   </parent>

v-text 和 v-html:
代替{{}}绑定元素的内容，{{}}会保持HTML片段原样显示
如果绑定的是HTML片段: 用v-html
如果绑定的是纯文本内容: 用v-text
v-cloak: 在Vue对象加载完之前，临时隐藏受监视的元素(因为在vue对象加载完之前，已经在网页上显示内容)
1）自定义选择器属性[v-cloak]{ display:none }
2）在要隐藏的元素上，添加v-cloak属性:<ANY v-cloak >
原理: 当Vue对象加载完，自动查找v-cloak属性移出
v-once: 仅在首次加载时渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过<ANY v-once>
原理: 首次绑定结束，从虚拟DOM中移除该元素
v-pre: 跳过元素及其子内容的编译过程

Vue_1

Vue

1 原生/函数库/框架

2 vue

3 vue原理

4 绑定语法

5 指令(directive)

猜你喜欢