关于vue.js:Vuejs基础内容

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

传统网页开发

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

前端风行框架Vue.js

库是一种工具，在代码中起到辅助作用。框架是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函数创立的对象，是应用Vue性能的根底

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

el选项

用于选取一个 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并未更新

methods选项

用于存储须要在 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() }

Vue.js指令

指令实质就是 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仅实用于计算操作。

计算属性的setter

计算属性默认只有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值变了，就会触发watchwatch:{  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 DevTools

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

前端风行框架Vue.js

数据驱动视图

组件化开发

装置

根底语法

Vue实例

el选项

插值表达式

data选项

methods选项

Vue.js指令

修饰符

自定义指令

过滤器

计算属性

Methods 与 Computed 区别

计算属性的setter

侦听器

Vue DevTools