陈悦玲 2020.10.12

学员日志 755 4年前 0 云创班主任

vue 官网：https://cn.vuejs.org/

什么是vue？ vue是第三方开发的、渐进式、基于MVVM设计模式的、纯前端的js框架

第三方：别人写好了的，我们直接下载
渐进式：可以逐步在项目中引入vue的各项功能，同时可以与其他技术混用，但是不推荐混用。（只要不是使用框架，一律使用es5，不能使用es6）
MVVM设计模式：
- 传统前端三大部分：html（结构层）、css（表现层）、JavaScript（行为层）
  html 和 css 的功能都太弱了，对于页面发生的一切变化都需要JavaScript来编写，导致需要JavaScript编写大量重复的增删改查操作。
- 现代前端三大部分：（MVVM）-->
  M：数据模型model
  集中保存界面中所需要的所有变量和变量值。模型，指程序中创建的，或者是从远程（node等后台）获取的数据，一般使用js中的一个对象data来保存，内容就会直接显示到view中
  V：界面/视图 view
  指网页中的元素和样式，一般指的是html和css。view是.html网页中的一个需要动态加载内容的父元素。html中的视图也被称为模板template，如果发生template错误，那么就在HTML中查找即可
  VM：视图模型/控制 viewModel
  用于代替之前的DOM/JQuery操作，封装了重复的增删改查操作，把模型中的数据和视图中的html元素“绑定”到一起。vue类型提供的就是一种强大的viewModel对象，可以自动同步数据和页面元素，专门自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步。
  ViewModel核心原理：（响应系统/虚拟DOM树）
纯前端：不需要任何后端技术就能够独立运行

对比原生DOM、JQuery、Vue框架

原生DOM：使用原生DOM，必须一步一步来，而且每一步都不能少，步骤十分复杂
好处：原生DOM 兼容性好
开发中我们应该养成独立自主的学习习惯
jQuery：
问题： jQuery中有多少种查找方法？(查找id的元素、class的元素、name的元素)
$("")
jQuery对dom的每一步都进行了简化，并没有从根本上改变程序的流程
Vue：
优点：已经包含了核心功能，而且封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查，算是在开发中彻底简化了的开发步骤。
缺点：不兼容旧浏览器，同时开发人员需要彻底改变编程习惯和思维
为什么使用vue？什么时候使用vue？
vue适用于以数据操作为主的项目（web、app），使用vue框架可以提高项目开发效率
如何在项目中使用vue？
- 下载vue.js,并通过script引入
```
<script src="vue.js"></script>
```
- 通过Vue-Cli脚手架工具（开发项目使用的都是脚手架工具）

Vue下载安装

vue中文官网：https://cn.vuejs.org/
下载vue
提示：下载独立的vue.js文件：打开官网，点击页面中的起步按钮，之后再在页面左侧选择安装，在安装下选择要下载的vue.js版本
开发版：未经压缩的，拥有完备注释和错误提示的版本，可读性高
生产版：已经压缩过的，而且去掉了错误提示，可读性低
在网页中引入vue.js
html <script src="vue.js"></script>

问题：new Vue()的绑定原理：

new Vue() 其实就是创建一个viewModel对象，自动的绑定界面和数据，new Vue会自动将data中的初始值，替换到界面中所有的{{变量}}的位置，只要data中的变量值发生改变，new Vue就会自动将新的变量值，更新到页面中{{变量}}的位置

new vue()中包含两大子系统（响应系统、虚拟DOM树）

1.响应系统：new Vue()刚创建的时候，需要先引入data对象，并自动为data中每个变量添加访问器属性保护起来，所有访问器属性都直接隶属于 new Vue 对象，如果想要修改data中的变量，可以通过“this.变量名”的方式进行访问。
但是，其实都是访问的变量的 set 访问器，而且，new Vue() 在每个set访问器中都添加了通知机制，只要修改变量，就会自动调用访问器，只要调用了访问器，就会触发通知

2.虚拟DOM树：new Vue()通过扫描真实的DOM树，形成一个简化版的DOM树模型，仅包含可能变化的属性，那些固定不变的变量和属性，一点都不包含。因为真实的DOM树太大了，包含很多无关的元素和属性，不便于快速的查找，所以我们需要使用虚拟DOM树

虚拟DOM树优点

优点：1.小，遍历极快。而且只修改变化的元素，影响的范围小
2.封装了重复的增删改查操作，极大地减少了代码量
3.效率高，仅修改个人可能受影响的元素和坑你受影响的元素

Vue语法

绑定语法就是专门为HTML添加变量，html本身并不支持变量，html中的个别内容又需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中的变量值自动变化的时候么就需要使用绑定语法
语法：{{变量/js表达式}}
用于特定的Model数据绑定到视图中，当model数据发生了变化，所有用到现实数据的{{}}，里面的数据都会自动更新，首次加载时，new Vue()会自动找到{{}}，用程序中的变量值，替换{{变量}}，当程序中的变量被修改的时候，再次扫描虚拟DOM树，找到这里，用新值自动替换
- Model变量名
  {{message}}
  data：{
  message：“hello”
  }
- 算数/比较/逻辑/三目运算
  {{10+20}}/{{10>20}}/{{true&&false}}/{{sex == 0?男：女}}
方法调用
{{getString}} -> 好好学习天天向上
methods:{
getString(){
return "好好学习天天向上"
}
}

对象属性的访问 obj.name

<h3>书名：{{obj.name}}</h3>
 data:{

        obj:{

          name:"陈小玲玲",

          age:20

        }

数组也可以通过下标访问 arr[0]
可以进行字符串拼接
创建对象：{{new Date().toLocaleString()}}
注意：{{}}内只要有返回值，合法的js变量和表达式都行，但是{{}}不能出现逻辑结构（if、for这种）,以及没有返回值的表达式

Vue指令

指令就是为html添加新功能的自定义属性，HTML本身是静态的，不具有任何的动态生成能力，所以当我们想要在html中使用程序的一些特征的时候，例如：‘分枝’、‘循环’ 等，就需要指令

v-bind ：元素的属性不能使用{{}}进行绑定，必须使用“v-bind：” 或者 “：”
- 普通绑定 <img v-bind:src=" " :class="img"></img> data:{img:"Img"}(其中Img是我们css样式里面的类名)
- 动态绑定``
v-show、v-if
- 它的原理是<-- -->的意思直接把这个标签给删除了
- v-show="条件表达式" (当条件为true则显示数据，否则影藏该元素、使用的其实是css的display来控制隐藏，并且只能控制一个）、
- v-if=“判断条件” v-elif 如果if条件成立显示第一个元素，反之显示另一个
多个元素，多选一显示
- v-if
- v-else-if
- v-else
- 提示： 如果v-if的条件成立，就显示v-if的元素，之后的元素不再显示，如果v-if的条件不成立，则按照顺序判断每个v-else-if的条件，哪个成立就选哪个显示，其他元素不再显示，如果所有的条件都不满足，就显示v-else的条件
- 他们之间必须是紧邻的兄弟元素，不能有其他间隔
v-for : 自动遍历数组、对象、字符串中的每个元素，每遍历一个元素，就会自动创建一个新的元素对象（HTML标签）
- ```
<table>
  <tr>

    <td>书名</td>

    <td>价格</td>

  </tr>

  <tr v-for="(elem,i) in book" :key="i">

    <td>{{elem.bname}}</td>

    <td>{{elem.price}}</td>

  </tr>

</table>

book:[

      {bname:"一点蒂娜"},

      {price:123}

    ]

  },
```
- 面试题：v-for为什么一定要加key？
- 注意：v-for一定要卸载重复生成的元素上，而不是父元素身上
- 如果我们不关心下标，只关心元素，可以不加key
- of 和 in 是可以互相代替的，用法完全一样，vue中 v-for统一了js中for of 和 for in，既可以遍历索引，也可以遍历对象
- of 会自动取出数组/集合中的每个元素的值和下标，保存到右边的变量中，如果 of 后是数字，那么 of 会从1开始迭代，递增到目标数字
v-on ：也分普通绑定+动态绑定
- 动态绑定
  html <any v-on:[变量名]="函数">
- 普通绑定（用的多）
  html <any v-on:click="函数">
- 注意： 无论是data中的变量，还是methods中的函数，只要进入new Vue（）以后，都直接隶属于 new Vue() ,所以在new Vue() 的直属方法中，使用 this 可以直接调用变量
- 问题：如果将button换成a标签，href默认会改变我们地址栏或跳转到其他页面（阻止默认行为）<a v-on:click="xxx($event)"
  解决：
  - 在js中
    实参：event
    function(e){
    e.preventDefault()
    }
  - 在vue中
    实参：$ event
    fn(e){
    e.preventDefault()
    }
    **提示：$ event是vue对象的内置变量，是将DOM事件对象封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入 $ event**
  - 使用事件修饰符
    事件修饰符会自动实现原DOM时间对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符
    .prevent
    使用.prevent代替内置变量$event 下的e.preventDefault(),阻止默认行为
  - stop
    使用stop代替 e.stopPropagation(),取消冒泡

v-html : 绑定HTML片段

v-html专门用于加载一段HTML的代码片段，功能类似于js中的innerhtml（）
（也就是不会管标签，只拿到文本内容）

v-cloak ：（网速太慢可能会发生）防止用户短暂可以看到{{}}的语法
v-cloak让元素进行默认隐藏，直至内容准备就绪的时候，才会自定的显示出来，可以防止用户短暂看到{{}}的语法
<h1 v-cloak></h1>
手动添加一个属性选择器，隐藏所有加v-cloak的元素，原理：在程序开始的时候，需要由我们手动添加display：none，准备就绪后，vue会自动将v-cloak属性删除，这个时候就删除了display：none 属性，也就能显示出来了

v-text ：是{{}}的等效指令，只不过v-text是写在属性中的，{{}}是写在内容中的

<any v-text="info"><any>
data:{

    info:"你是猪头"

}

保护{{}}中的内容不被编译

v-pre：保护当前元素中的{{}}语法，不会被绑定渲染
```
<any v-pre>{{info}}</any>
data:{

    info:"你是猪"

}
```

v-once : 唯一不变元素
- 当前元素的{{}}语法对应的数据只能绑定一次，以后即使模型数据发生改变，也不会改变了
- 原理： 只在首次加载的时候，一次性的将数据模型数据显示在当前元素中，不会将元素注册到监听队列中。正常情况下，watch中，有一个队列，维护着每个数据变量和页面之间的对应关系，每次数据模型发生改变后，都会通过watch，watch会遍历受到该数据变量影响的元素，并逐个的修改他们，通过减少监听的元素个数，可以优化页面绑定的效率

陈悦玲 2020.10.12

vue 官网：https://cn.vuejs.org/

什么是vue？ vue是第三方开发的、渐进式、基于MVVM设计模式的、纯前端的js框架

对比原生DOM、JQuery、Vue框架

Vue下载安装

Vue语法

Vue指令

热门资源

评论

取消回复

vue 官网：https://cn.vuejs.org/

什么是vue？ vue是第三方开发的、渐进式、基于MVVM设计模式的、纯前端的js框架

对比原生DOM、JQuery、Vue框架

Vue下载安装

Vue语法

Vue指令

热门资源

相关推荐

评论

取消回复