Vue框架学习----基础

Vue框架学习----基础

1.vue

vue是渐进式框架，可作为应用一部分嵌入。

功能包括：

1）解耦视图、数据

2）可复用组件

3）前端路由技术

4）状态管理

5）虚拟DOM

2.vue安装

方式1：CDN引入

方式2：下载、引入

方式3：NPM安装

随后，新建项目，在项目内设置一个新文件夹，将vue.js放入

3.第一个vuejs

新建文件夹，再在其中新建一个HTML文件

其中，new Vue（{参数为对象}）

var变量无作用域

一般使用let（变量）、const（常量）

声明式编程，数据与样式分开处理

创建Vue对象时，传入options：{}

其中包括el属性，决定将Vue对象挂载到哪个元素；data属性：存储数据

4.Vue列表

data属性里加入movies 列表

• 标签里用v-for指令 进行遍历循环（响应式）

• 

  5.Vue计数器

  method属性：定义方法

  使用this取当前对象

  

  v-on：click指令去调用函数，@click语法糖

  

  6.Vue MVVM

  Model VueModel View

  

  Model

  

  VueModel

  

  View

  

  7.Vue options

  

  8.Vue 模板设置

  
  

  设置好后，直接打vue 再按Tab即可显示

  

  9.Vue Mustache

  插值操作

  Mustache语法，即双大括号{{}}，不仅可以直接写变量，可以写简单表达式

  

  其他指令：

  v-once指令，只渲染元素和组件一次

  

  v-html指令，解析html代码

  

  

  v-text指令，与mustache类似

  

  v-pre指令，不解析原封不动的显示

  v-cloak指令， vue解析之后，该属性会消失，

  

  10.vue v-bind

  mustache语法只能在内容里作用

  动态绑定属性

  

  简写方式：
  

  动态绑定class(对象语法)

  

  可以绑定键值对，改变其boolean值

  
  

  动态绑定class（数组语法）

  

  

  类名可采用数组形式，加引号表示字符串

  

  不加引号，表示对象

  

  动态绑定style（对象语法）

  

  其中，属性名：驼峰法直接写，短横线需要单引号

  

  动态绑定style（数组语法）

  

  11.计算属性

  computed计算属性，构造的函数可作为属性使用。（具有缓存，构造的方法不具有缓存）

  

  setter、getter（完整写法包含）

  属性对应一个对象，其中包括set与get
  

  一般不需要实现set方法，即只读属性，只用get

  即简写为：

  fullName：function（）{

  }

  set设置修改如：

  

  12.ES6语法

  块级作用域let/var、const

  ES5中var没有块级作用域，是全局变量

  在if和for中，let有作用域

  connst使用

  将变量修饰成常量，不可再修改，必须进行赋值

  指向的对象不可修改，但可改变对象内部属性

  对象的增强写法

  对象字面量

  

  

  

  13.v-on事件监听

  基础语法：

  

  

  语法糖写法：

  v-on: 替换成@

  

  v-on参数问题

  

  

  v-on修饰符

  .stop修饰符使用

  

  阻止button的冒泡事件，即点击button，div点击事件也触发的现象

  .prevent修饰符使用

  

  阻止form的默认事件

  

  .{keyCode|keyAlias}修饰符

  事件从特定键触发时才回调，比如敲回车时触发

  

  .native修饰符

  监听组件根元素的原生事件，使用自定义组件时

  

  .once修饰符

  只触发一次回调

  

  14.v-if、v-else-if、v-else

  

  v-if isshow为true时显示，false时不显示，显示v-else内容

  VUE进行DOM渲染时会复用已存在的元素

  15.v-show 与 v-if 对比

  v-if条件为false时，元素不存在DOM中

  v-show条件为false，仅将元素的display属性改为none

  改之前:

  

  改之后：

  

  注：当显示与隐藏切换频繁时用v-show，若只有一次切换则用v-if

  16.v-for 遍历数组

  v-for遍历数组

  

  v-for遍历对象
  

  v-for 绑定key

  key的作用是为高效的更新虚拟DOM

  

  响应式方法：

  

  不可响应方法及替换方法

  

  17.过滤器

  在filter中构造函数

  

  直接在Mustache语法中使用

  

  18.Javascript高阶函数

  filter/map/reduce

  filter函数：（相当于给数组做减法）

  其回调函数需要一个Boolean值，当true时，函数内部自动将回调的n加入新数组中，当false时，直接过滤掉

  

  map函数：（对数组进行统一变化）

  

  reduce函数：（数组汇总）

  

  箭头函数写法：

  

  19.表单绑定v-model使用

  实现表单元素和数据的双向绑定,也适用于

  

  

  1)结合radio类型

  

  v-model可实现name属性相同时只能选一个的效果，若sex属性值一开始设置为男（女），则可直接实现上述效果

  2）结合checkbox类型

  单选框、多选框

  

  单选框形式，可以实现先后操作
  

  多选框，值是数组形式存储

  

  3）结合select类型

  分选择一个、选择多个

  选择一个

  

  选择多个

  

  v-model绑定的属性值为，选择一个（字符串）、选择多个（数组）

  4）值绑定！！！！！！

  
  

  5）修饰符

  lazy修饰符：（延缓同步更新）

  

  number修饰符：（类型转换）

  

  trim修饰符：（取消空格）