关于vue.js:Vuejs基础内容

5次阅读

共计 6288 个字符，预计需要花费 16 分钟才能阅读完成。

Vue.js 根底内容，倡议配合官网文档一起查看！

传统网页开发

申请数据 -> 生成构造 -> 监听变动
元素变动 -> 发送申请 -> 更新构造
毛病
DOM 操作频繁，代码繁冗
DOM 操作与逻辑代码混合，数据或者构造的批改，可维护性差
不同性能区域书写在一起，可维护性低
模块之间依赖关系简单

库是一种工具，在代码中起到辅助作用。框架是 JS 框架，是听从遵守规则开发的一种形式

本文目标是学习 Vue.js 规定，Vue.js 是渐进式 JavaScript 框架，官网学习

个性：

数据驱动视图
组件化开发

数据变动会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定
对于输入框等可输出元素，可设置双向数据绑定
- 双向数据绑定是在数据绑定根底上，可主动将元素输出内容更新给数据，实现数据与元素内容 的双向绑定

代码中只进行了数据展现和批改，并未应用 DOM 性能，这就是数据驱动的单项数据绑定（数据 -> 视图）

双向数据绑定实用于非凡元素（可输出元素）例如：input，checkbox，textarea

输出后自动更新到绑定数据上，绑定数据的更改也会自动更新到元素中（双向）

Vue 数据驱动视图

Vue.js 的数据驱动视图是基于 MVM 模型实现的
MVVM(Model -View -ViewModel)是一种软件开发思维
- Model 层，代表数据
- View 层，代表视图模板
- ViewModel 层，代表业务逻辑解决代码

长处

基于 MVVM 模型实现的数据驱动视图解放了 DOM 操作
View 与 Model 解决拆散，升高代码耦合度

毛病

但双向绑定时的 Bug 调试难度增大
大型项目的 View 与 Model 过多，保护老本高

组件化开发，分性能组件进行开发的一种形式。容许咱们将网页性能封装为自定义 HTML 标签，复用时书写自定义标签名即可

组件不仅能够封装构造，还能够封装款式与逻辑代码，给组件起个名字，名字可作为 html 标签名进行应用。组件大大提高了开发效率与可维护性

本地引入

开发版本:https://cn.vuejs.org/js/vue.js
生产版本: https://cn.vuejs.org/js/vue.m…

cdn 引入
比本地引入放到服务器上要快，通过 script src 属性

最新稳定版：https://cdn.jsdelivr.net/npm/vue
指定版本：https://cdn.jsdelivr.net/npm/…

npm 装置

npm install vue
npm install vue@2.6.12

Vue 实例，根底选项，指令，其余选项（过滤器，计算属性，监听器）四局部

通过 Vue 函数创立的对象，是应用 Vue 性能的根底

var vm = new Vue({// 选项对象})

用于选取 一个 DOM 元素 作为 Vue 实例的挂载指标。
只有挂载元素外部才会被 Vue 进行解决，内部为一般 HTML 元素无奈应用 Vue 性能。
代表 MVVM 中的 View 层（视图)。

通过 el 挂载，挂载结束，能够通过 vm.$el进行拜访操作 el，拜访到的是个 HTMLElement

两种挂载形式

css 选择器格局的字符串

HTMLElement 实例

var app = document.querySelector('#app');

var vm = new Vue({
el:"#app" // 通过 css 选择器格局的字符串
el: app   // HTMLElement 实例，留神这里没引号，不能为 html 或 body
})

未设置 el 的 vue 实例，也能够通过 vm.$mount()进行挂载，参数模式与 el 规定雷同

var vm = new Vue({});
vm.$mount('#app');

成果雷同，一个通过创立时挂载，一个创立过后挂载，$mount()传入参数和 el 雷同

挂载元素内能够应用 Vue.js 的模板语法，模板中能够通过插值表达式为元素进行动静内容设置，写法为{{}}，括号内可根本运算，三目运算，数值等等

留神点：

插值表达式只能书写在 标签内容 区域，能够与其它内容混合
```
<li>{{1+2+3}}<li> // ok

<li id="{{1+2}}"><li> // error
```
外部只能书写 JavaScript 表达式，不能书写语句
```
<li>{{var num = 100}}<li> // error
```
data 选项

用于存储 Vue 实例须要应用的数据，值为对象类型。
```
new Vue({
el:"#app",
data:{title:"内容"}
})
```
拜访数据形式，vm.$data. 数据 或者 vm. 数据，例如 vm.title

data 数据特点，

data 中的数据能够间接在视图中通过插值表达式拜访
data 中的数据为响应式数据，在产生扭转时，视图会自动更新。

data 留神：

data 中存在数组时, 索引操作与 length操作无奈自动更新视图，这时能够借助 Vue.set() 办法代替操作。

var vm = new Vue({
  el:"#app",
  data:{contentArr:["1","2",3]
  }
})

Vue.set(vm.contentArr,0,"失效的新内容") // 数组 索引 新值

<ul>
  <li>{{contentArr[0] }}</li>
  <li>{{contentArr[1] }}</li>
  <li>{{contentArr[2] }}</li>
</ul>

此时失常显示，通过控制台批改

vm.contentArr[0] = "你好吗"，li并未更新
vm.contentArr.length = 0 li并未更新

用于存储须要在 Vue 实例中应用的函数

new Vue({
  el:"#app",
  data:{contentArr:["1","2",3]
  },
  methods:{foo(){console.log(this)
      return this.contentArr
    }
  }
})

拜访数据形式

methods 中的办法能够通过 vm. 办法名拜访
办法中的 this 为 vm 实例，能够便捷的拜访 vm 数据等性能
办法通过 this 也能够相互组合 this.foo(){ return this.foo1() }

指令实质就是 HTML 自定义属性 (html 有固定属性和自定义属性)，指令是给框架进行辨认的一种标记伎俩

Vue.js 的指令就是以 v- 结尾的自定义属性

指令学习入口

修饰符是以点结尾的指令后缀，用于给以后指令设置非凡操作

事件修饰符
按键修饰符
零碎修饰符
鼠标修饰符
v-model 修饰符

修饰符学习入口

指令用于简化 DOM 操作，相当于对根底 DOM 操作的一种封装。

当咱们心愿应用一些内置指令不具备的 DOM 性能时，能够进行自定义指令设置。

自定义全局指令
自定义部分指令

自定义全局指令

指的是能够被任意 Vue 实例或组件应用的指令。

定义一个 focus 指令，执行配置对象内容

参数 1：指令名
参数 2：配置对象（外部能够增加钩子函数）

inserted 钩子在元素插入 DOM 后执行

Vue.directive('focus',{inserted(el){ // el 示意设置这个指令的 element 元素，本文指上面的 input 元素
  el.focus() // 执行元素操作}
})

利用下面的指令

<div id="app">
<input type="text" v-focus>
</div>

全局的意思示意, 当你创立多个 vue 实例对象时，都能够应用 focus 的指令

new Vue({el:"#app"})

new Vue({el:"#app2"})

<div id="app">
<input type="text" v-focus>
</div>

<div id="app2">
<input type="text" v-focus> // 都能够被应用
</div>

钩子函数参数

Vue.directive('focus',{inserted(el,binding){ // binding 指设置的相干信息
  console.log(binding)
}
})

<div id="app">
<input type="text" v-focus.a.b="100+1"> // 能够判断有 a 或 b 修饰符干什么事
</div>

自定义部分指令

指的是能够在以后 Vue 实例或组件内应用的指令。

对象键：属性名。对象值，配置对象

new Vue({
...
directives:{
  focus:{inserted(el){el.focus()
    }
  }
}
})

应用

<div id="app">
<input type="text" v-focus>
</div>

更多自定义指令内容参考官网

过滤器用于进行文本内容格式化解决。过滤器能够在插值表达式和 v -bind 中应用。

全局过滤器
部分过滤器

全局过滤器：能够在任意 Vue 实例中应用

参数 1：过滤器名

参数 2：过滤器性能

Vue.filter('过滤器名称', function(value){ // value 是应用过滤器时传入的数据
// 逻辑代码
return '处理结果'
})

过滤器能在插值表达式和 v -bind 中应用，通过 管道符 |连贯数据

<div id="app">
<div v-bind:id = "id | filterId"></div> // 对 id 解决，在 bind 中应用

<div>{{content | filterContent}}</div> // 对 content 解决，在插值表达式中应用
</div>

例子

<div id="app">
<p v-bind:title = "val | filterVal"></p>  // "abc"

<p>{{val2 | filterVal}}</p>  // "xyz"
</div>

Vue.filter('filterVal',function(value){console.log(value) // "a-b-c"
return value.split("-").join("") // 此时 title 则为"abc"
})

new Vue({
...
data:{
  val:"a-b-c",
  val2:"x-y-z"
}
})

注意事项

能够将一个数据传入到多个过滤器中进行解决。
过滤器的组合操作，相似于管道，content参数先通过 filterA 解决再将 filterA 的返回值 传入 filterB 中解决，再返回
```
<div id="app">
<p>{{content | filterA | filterB}}</p>
</div>
```
一个过滤器能够传入多个参数
参数 1：content，参数 2：par1，参数 3：par2
```
<div id="app">
<p>{{content | filterContent(par1,par2) }}</p>
</div>
```
部分过滤器

部分过滤器只能在以后 Vue 实例中应用。

new Vue({
...
filters:{过滤器名称：function(value){
    // 逻辑代码
    return '处理结果'
  }
}
})

其余特点参考全局过滤器，统一的。

注意事项

如果全局过滤器和部分过滤器都存在，且重名，只有部分过滤器失效
因而，咱们能够在 vue 全局定义一些根底的过滤器规定，在实例里对和全局重名的部分过滤器进行重写，定义部分过滤性能

Vue.js 的视图不倡议书写简单逻辑，这样不利于保护。

取数组中最大值

<div id="app">
  <p>{{Math.max.apply(null, arr) }}</p>
  <p>{{Math.max.apply(null, arr) }}</p>
  <p>{{Math.max.apply(null, arr) }}</p>
</div>

解决办法

封装函数解决

封装函数是很好的形式，但有时反复的计算会耗费不必要的性能。

new Vue({
...
data:{arr:[1,2,3,4,5] },
methods:{result(){
  var sum = 0
  var arr = this.arr
  for(var item of arr){sum+=item}
  return sum
}
}
})

<div id="app">
<p>{{result() }}</p>
<p>{{result() }}</p>
<p>{{result() }}</p>
</div>

如何进步计算执行效率？计算属性
- 计算属性应用时为属性模式，拜访时会主动执行对应函数。
- 执行一次后，计算属性外部会将执行的办法进行缓存
- 计算属性缩小了函数的执行次数
- 计算属性能够通过 实例.xx 拜访
```
new Vue({
...
data:{arr:[1,2,3,4,5] },
computed:{result(){console.log("我只执行了一次")
  var sum = 0
  var arr = this.arr
  for(var item of arr){sum+=item}
  return sum
}
}
})
```
```
<div id="app">
<p>{{result}}</p>
<p>{{result}}</p>
<p>{{result}}</p>
</div>
```
  Methods 与 Computed 区别
computed 具备缓存性，methods 没有。
computed 通过属性名拜访，methods 须要调用。
computed 仅实用于计算操作。

计算属性默认只有 getter，Vue.js 也容许给计算属性设置 setter
将计算属性改为对象（以前是个办法）

vm.getResult = "xxx" 会执行 set 办法

var vm = new Vue({
...
computed:{
  getResult:{
    // getter
    get:function(){// 逻辑代码},
    // setter
    set:function(newVal){// 逻辑代码}
  }
}
})

侦听器用于监听数据变动并执行指定操作。

new Vue({
...
data:{value:""},
watch:{value (newVal,oldVal){  // 当 value 数据发现变动会执行
    // 逻辑代码
  }
}
})

例子

<div id="app">
<input type="text" v-model="inputVal">
</div>

new Vue({
...
data:{inputVal:""},   // 只有 inputVal 值变了，就会触发 watch
watch:{inputVal (newVal,oldVal){
    // 逻辑代码
    console.log("侦听器执行了")
  }

  inputVal :{           // 写法 2
    handler(newVal,oldVal){console.log("侦听器执行了")
    }
  }
}
})

简单类型监听器设置

为了监听对象外部值的变动，须要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数。

new Vue({
...
data:{obj:{ contxt1:"内容 1",contxt2:"内容 2"},
  arr:[1,2,3,4,5]
},
watch:{
  obj:{
    deep:true,
    handler(val,oldVal){console.log(val,oldVal)
      console.log(val === oldVal) // true
    }
  },
  arr(val,oldVal){ // 数组不须要设置 deep
    console.log(val,oldVal)
    console.log(val === oldVal) // true
  }
}
})

注意事项

当更改（非替换）数组或对象时，回调函数中的新值与旧值雷同，因为它们的援用都指向同一个数组、对象。因而，对于简单类型，无奈进行 val 和oldVal比照

是 Vue.js 官网提供的用来调试 Vue 利用的工具
注意事项
网页必须利用了 Vue.js 性能能力看到 Vue DevTools
网页必须应用 Vue.js 而不是 Vue.min.js
网页须要在 http 协定下关上，而不是应用 file 协定本地关上。

正文完

vue.js

发表至： vue.js

2021-06-25

0

关于vue.js:Vue虚拟dom是如何被创建的

关于vue.js:Nuxt3实战系列之了解Nuxt3的渲染模式

关于vue.js:element表单精确点击单个表格跳转事件

关于vue.js:Vue3全家桶升级指南一composition-API

关于vue.js:Vue中-VanList上拉不加载数据的适配问题

关于vue.js:Vuejs基础内容

前端风行框架 Vue.js

数据驱动视图

组件化开发

装置

根底语法

Vue 实例

el 选项

插值表达式

data 选项

methods 选项

Vue.js 指令

修饰符

自定义指令

过滤器

计算属性

Methods 与 Computed 区别

计算属性的 setter

侦听器

Vue DevTools

站内搜索