vue日常学习1（基本使用、指令）

一.前端渐进式网站—Vue

jQuery库 --> js库
多个方法封装形成一个库,多个库形成一个框架

1. vue是一套构建用户UI界面的渐进式框架
2. 什么是渐进式?
   vue的核心功能是把数据渲染到DOM(声明式渲染),单独使用该功能时,vue不能称为框架(jq是以DOM为核心/驱动,vue的核心功能是以数据为核心/驱动,以数据修改页面)
   1)可以在vue的基础之上添加其他功能,比如:组件,路由…,从而构建出一个完整的框架
   2)这些功能相互之间是独立的,可以在基础之上添加任意一个/多个,任意组合
   3)所谓渐进式,就是vue的使用方式,想用什么就用什么,没有强主张
3. vue是一个轻量级的以数据为驱动的MVVM框架,它的核心是一个响应式的数据绑定系统
4. 常用于SPA(Single Page Application)应用
5. MVVM:
   M:Model 模型层,数据层,对应后端数据
   V:View 展示给用户看到的页面
   VM:ViewModel 将模型层和视图层关联起来,vue是桥梁作用
   当数据发生变化时,视图页面也会发生变化
   视图页面发生变化时,数据也会发生变化
   这个就叫做双向绑定

二.vue的基本使用

1. 页面上定义div容器,指定id
2. 引入vue.js
3. 创建Vue实例对象

   new Vue({
      el:'#app',
      data:{},
      methods:{},
    })

该对象的选项中:
  1.el:实例对象即将挂载的DOM节点
  2.data:实例对象中定义的属性,在视图上使用{{属性名}}进行调用
    - data中定义的数据是响应式的
        数据发生变化时,视图也跟着变化
        视图修改数据时,模型层也会修改数据
        这就是双向数据绑定
  3.methods:定义方法
    函数中的this指向,就是实例对象(==不能使用箭头函数==)
    方法的调用:事件调用 v-on:click='方法名'
      在其他方法中使用this.方法名
      vm.方法名
      在视图中使用表达式{{ 方法名() }}

三.指令

• vue中带有v-开头的特殊属性叫指令
• 实质上就是vue对标签的拓展和封装,一般用来操作DOM

1. v-text/v-html 标签内容的设置
   防止在页面加载时/出错时,暴露{{}}的语法表达式
   v-text和v-html区别就是v-html会解析字符串中的标签
2. v-show/v-if 判定某个标签是否显示在页面上
   v-show:调节节点的display属性
   (true/false)
   => 需要频繁的显示或隐藏某个元素标签的时候
   v-if:判定节点是否存在
   => 在页面加载的时候就已经决定了是否要存在的元素标签
   v-else:不需要表达式
   前面必须要有v-if/v-else-if
   要放在一个父标签里
3. v-for 循坏遍历一个数组
   v-for=“item in arr”, item表示每次遍历得到的元素
   v-for="(item,idx) in arr",item表示每次遍历得到的元素,idx表示对应的下标
4. v-on 事件绑定
   v-on:事件名
   v-on:click—> @click
   v-on:blur—> @blur
   v-on:foucs—> @foucs
   修饰符:
   @事件名.修饰符
   .stop 阻止事件冒泡
   .capture 事件在捕获阶段触发
   .self 只有当事件对象是自身时触发
   .prevent 阻止事件的默认行为
   @keydown.13表示键盘敲击ASCⅡ值是13的键时触发
5. v-bind 属性绑定
   v-bind:属性名
   v-bind:class --> :class
   => 1.用对象的的形式来判定样式是否存在
   :class="{style:ok}" style和ok都是data里的一个属性名
   2.用数组来定义多个样式(默认的是style里最后一个样式)
   :class="[a,b,c]" a,b,c都是data里的属性名
   v-bind:src --> :src
   v-bind:value --> :value
6. v-model 数据绑定

* 标签中含有value属性的才能使用v-model
就是在input/select里改,引用的地方也会随之修改(例题02_4)

四.其他

1. 九大前端框架
   https://zhuanlan.zhihu.com/p/76463271
2. .MVC:
   M:Model 模型层（数据层）（数据库）
   V:View 视图层（浏览器）
   C:Controler 控制层（服务器）拆分字符串[…str]
   => 将字符串变成数组
3. data里的属性都可以使用this来获取
4. spilt() 用于把一个字符串分割成字符串数组。
   括号里的是分割的标准如":" 、" “、”,"等
   使用 string.split(“符号”)
5. find() 找到数组中的某个元素并将其返回,返回undefined表示没有找到
6. 构建工具 ：webpack
   => 什么是？
   WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
   => 为什要使用?
   今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
7. 单页面应用：
   
8. 箭头函数
   1）ES6标准新增了一种新的函数
   2）(参数）=> {函数主体}
   3）特点：

-  箭头函数this为父作用域的this，不是调用时的this。箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。普通函数的this指向调用它的那个对象。
-  箭头函数不能作为构造函数，不能使用new
-  箭头函数没有arguments，caller，callee。箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。箭头函数中要想接收不定参数，应该使用rest参数...解决。

五.各类工具