初学VUE2.0

女爷i 2022-06-17 13:46 223阅读 0赞

vue2.0+elementUI构建单页面后台管理平台： [http://www.cnblogs.com/dmcl/p/6722315.html][http_www.cnblogs.com_dmcl_p_6722315.html]

初学VUE2.0

(个人笔记，写完后发现好乱....[下期][Link 1]使用markdown书写。)

## 概述 ##

webstorm添加对VUE的支持 [http://www.jianshu.com/p/142dae4f8b51][http_www.jianshu.com_p_142dae4f8b51]

推荐拓展：vue的chrome开发者工具vuejs-devtools 按F12可看

[https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd][https_chrome.google.com_webstore_detail_vuejs-devtools_nhdogjmejiglipccpnnnanhbledajbpd]

![1023587-20161206142412054-911167099.png][]

效果：

![1023587-20161206142412569-1743437099.png][]

构造器

通过改造函数Vue 创建vue 的根实例

var vm = new Vue(\{

//选项

\})

可以用预定义选项 创建可复用的 组件构造器

vue MyComponent = vue.extend(\{

//扩展选项

\})

var myComponentInstance = new  MyComponent()   //“MyComponent”的实例   类比java的“实现”

属性与方法

每个vue实例都会 代理 其 data对象里的 属性

![1023587-20161206142412866-1097704738.png][]

实例声明周期

new vue() → (beforeCreate)→observe Data观察数据→init events初始化时间→...

[![1023587-20161206142414460-1916265913.jpg][]][1023587-20161206142414460-1916265913.jpg]

模板语法

\{ \{msg\}\}   纯文本

\{ \{\}\}支持完整的单个表达式  比如\{ \{ message.split('').reverse().join('') \}\}  \{ \{ ok ? 'YES' : 'NO' \}\}

\{ \{float\_number | toInt\}\}  过滤器可以串联，可以接受参数

v-once 一次性改变，数据改变时不更新

![1023587-20161206142415444-864630538.png][]

v-html   插入Html （不能绑定数据） 【只能用放心的内容使用Html插值，绝不能用用户提供的内容进行插值 （太容易XSS攻击）】

指令

<a v-bind:href="url"></a>

<a v-on:click="doSomething">

<form v-on:submit.prevent="onSubmit"></form>   修饰器`.prevent`,它其实代表的就是`event.preventDefault()`

缩写

1.v-bind  绑定已有属性

原：<a v-bind:href="url"></a>  缩写后： <a :href="url"> </a>

2.v-on  时间绑定

原：<a v-on：click ="dst"></a> 缩写后：<a @click="click"></a>

计算属性

![1023587-20161206142415726-1175133470.png][]

效果：![1023587-20161206142416054-1595558541.png][]

当我们在控制台修改msg时，vue知道msgInt依赖于msg，因此msg变化时msgInt也会变化，如下

![1023587-20161206142416304-628163007.png][]

![1023587-20161206142416601-1164441766.png][]

计算属性区别于method ，前者依赖变化才更新，而后者每次执行都更新。

watch

计算属性在大多数时期使用，但有些情况更适合watch。比如异步操作或者昂贵操作

v-bind：title 绑定title

<div v-bind:class="\{ active: isActive \}"></div>

取决于isActive是true还是false

三目 <div v-bind:class="\[isActive ? activeClass : '', errorClass\]">

也可以设置多个class  如v-bind:class="\{ active: isActive, 'text-danger': hasError \}"

也可以绑定对象

<div v-bind:class="classObject"></div>

data: \{

classObject: \{

active:  true,

'text-danger':  false

v-bind：style    可以写样式对象，也可以写具体<div v-bind:style="\{ color: activeColor, fontSize: fontSize + 'px' \}"></div>  然后data里写\{activeColor:"red"\}等具体信息

<div v-bind:style="styleObject"></div>

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; width:576px; color:rgb(52,73,94); font-family:&quot;source sans pro&quot;,&quot;helvetica neue&quot;,arial,sans-serif; line-height:16.5px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px; width:576px; border-collapse:collapse"> 
   <td style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; width:576px"> 
    <div style="margin:0px; padding:0px; min-height:1.5em"> 
     <div style="margin:0px; padding:0px; min-height:1.5em">
       data:&nbsp;{ 
     </div> 
     <div style="margin:0px; padding:0px; min-height:1.5em"> 
      <span style="margin:0px; padding:0px">styleObject</span>:&nbsp;{ 
     </div> 
     <div style="margin:0px; padding:0px; min-height:1.5em"> 
      <span style="margin:0px; padding:0px">color</span>:&nbsp; 
      <span style="margin:0px; padding:0px; color:rgb(66,185,131)">'red'</span>, 
     </div> 
     <div style="margin:0px; padding:0px; min-height:1.5em"> 
      <span style="margin:0px; padding:0px">fontSize</span>:&nbsp; 
      <span style="margin:0px; padding:0px; color:rgb(66,185,131)">'13px'</span> 
     </div> 
     <div style="margin:0px; padding:0px; min-height:1.5em">
       &nbsp;&nbsp;} 
     </div> 
     <div style="margin:0px; padding:0px; min-height:1.5em">
       } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

多个样式对象 <div v-bind:style="\[baseStyles, overridingStyles\]">

v-if    判断是否显示

![1023587-20161206142416913-637841474.png][]

demo4.ok=false时 显示假

![1023587-20161206142417132-220653276.png][]

多行时考虑使用template

显示/隐藏可以添加过度效果 这里 fade是可以改的（对应样式）

![1023587-20161206142417382-884151993.png][]

style：

.fade-enter-active, .fade-leave-active {
      
        transition: opacity .5s }
    .fade-enter, .fade-leave-active {
      
        opacity: 0
    }

v-show也可以根据显示元素，v-show的节点不移除，仅仅是display而已

![1023587-20161206142417819-344638238.png][]

v-for  循环遍历

![1023587-20161206142418194-916587087.png][]

效果：

![1023587-20161206142418554-312196491.png][]

demo5.games.push(\{name:"LOL"\})  可以添加数据

其中，可以增加第二参数 索引号

![1023587-20161206142418757-1516416483.png][]

of 可以代替in 无差别

可在template使用

![1023587-20161206142419038-1767025470.png][]

注意对象迭代的顺序是按照js的Object.keys() 无顺序  迭代的是对象内部的键值对。

整数迭代：<span v-for="n in 10">\{ \{ n \}\}</span>  输出1到10

组件与 v-for

组件中的数据无法自动传入 因为组件有自己的作用域。松耦合 我们用props传入数据到组件

v-for与组件的例子 可参考 [http://cn.vuejs.org/v2/guide/list.html\#组件-和-v-for][http_cn.vuejs.org_v2_guide_list.html_-_-v-for]

数组有变异方法（增删改等）和非变异方法(合并 切割等) 参考：[http://cn.vuejs.org/v2/guide/list.html\#变异方法][http_cn.vuejs.org_v2_guide_list.html]

1.  `push()//在结尾增加一条或多条数据`
2.  `pop()//删除最后一条数据`
3.  `shift()//删除第一条数据，并返回这条数据`
4.  `unshift()//在开始增加一条或多条数据，并返回数组长度`
5.  `splice()//向/从数组中添加/删除项目，然后返回被删除的项目。`
6.  `sort()//对数组的元素进行排序。`
7.  `reverse()//颠倒数组中元素的顺序。`
8.

1.  `filter()//返回条件为真的数据`
2.  `concat()//连接两个或多个数组`
3.  `slice()//从已有的数组中返回选定的元素。`

![1023587-20161206142419351-631815274.png][]

当然也可以用method方法

![1023587-20161206142419819-1112019237.png][]

![1023587-20161206142420366-2055690074.png][]

v-on 指令绑定一个监听事件

v-on:click  监听点击事件

<button v-on:click="counter += 1">增加 1</button>

data：\{

counter：0

也可以接收一个定义的方法

![1023587-20161206142420726-816084008.png][]

还可以访问原生DOM事件 用$event 把它传入

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

事件修饰符 .

<a v-on:click.stop="doThis"> </a>

<a v-on:click.stop.prevent="doThat"> </a>

<div v-on:click.capture="doThis">... </div>

<div v-on:click.self="doThat">... </div>

备注：

![1023587-20161206142421257-1017516767.png][]

按键修饰符

<input v-on:keyup.13="submit">

别名： <input v-on:keyup.enter="submit">

缩写： <input @keyup.enter="submit">

按键名： enter tab delete(删除/空格) esc space up down  left right

可以通过全局 `config.keyCodes` 对象[自定义按键修饰符别名][Link 2]：  Vue.config.keyCodes.f1 = 112

这里有点诡异的就是，`v-on:click=`后面跟的方法名如果带括号，就是js的表达式，如果不带括号，就是vue的方法名。  
我们在本章第一个例子中可以发现，`v-on:click="greet"`没有传入任何参数，它就可以获得一个event的值，这个是vue内部提供的。  
但是如果是后面跟括号的这种写法，如果不传如果event，那么是获取不到event对象的。用$event传入。

v-model 双向数据绑定，输入框变上面文字也变

![1023587-20161206142421710-1197868047.png][]

效果：

![1023587-20161206142422038-115387791.png][]

单选框：（值是true和false）

![1023587-20161206142422476-2065955832.png][]

vm： ![1023587-20161206142422788-1028085002.png][]

效果 ：

![1023587-20161206142423210-384592968.png][] ![1023587-20161206142423460-1809930300.png][]

复选框：（value）

![1023587-20161206142423897-673674130.png][]

vm  ![1023587-20161206142424288-1723727576.png][] 都绑定到checkedNames 这个\[\]写value

效果：

![1023587-20161206142424663-1525590959.png][]

单选按钮同理  显示所选择的选项的value

下拉菜单同理 显示value

动态渲染

![1023587-20161206142424929-1889269515.png][]

vm：

![1023587-20161206142425163-2129680711.png][]

效果：

![1023587-20161206142425335-1015174217.png][]

注意：这里要绑定option.value 不然出来的是option.text

一种特别写法：

![1023587-20161206142425726-1038248255.png][]这里的a和b是方法/值

输入完毕 试图再变化

1.  `<inputv-model.lazy="msg">`

输入内容转数字

1.  `<inputv-model.number="age">`

自动去空格

1.  `<inputv-model.trim="msg">`

组件

![1023587-20161206142426991-227229827.png][]

局部注册

![1023587-20161206142428101-620934657.png][]

不可违背HTML规律~比如ul下只能li；select里只能是option，table里不能写模板 ；除非这么写

1.  `<table>`
2.  `<tris="my-row"></tr>`
3.  `</table>`

组件里data必须是函数

![1023587-20161206142428929-575102419.png][]

组件内定义的是数据 只能组件内部使用。子组件想使用父组件的数据必须传参（类似方法传参）

**参数往下传，事件往上传** 。

props

子元素通过props接口与父元素有了很好的解耦合

eg.1

![1023587-20161206142429319-1261491847.png][]

eg.2

上例 我们传的是一个固定的值，v-bind:tem="team"传入动态值

![1023587-20161206142429647-468606280.png][]

![1023587-20161206142430038-390945541.png][]

可以指定参数类型 String/Number/Boolean/Function/Object/Array

![1023587-20161206142430304-754962233.png][]

多个类型用数组  比如

props\{

msg：\[String,Number\]

自定义事件

$on 监听事件 $emit触发事件

直接绑定原生js事件

1.  `<my-componentv-on:click.native="doTheThing"></my-component>`

参数往下传 事件往上传

例子：

写两个按钮，每个按钮点击自增，2个按钮之和显示出来。

第一步 先定义按钮 实现自增

![1023587-20161206142430663-614080223.png][]

现在已经实现点击+1；

然后需要做的是 子组件变动时父组件的total同时变。

把子组件的add注册为事件，然后触发时调用父组件的total增加方法。

![1023587-20161206142431069-2144154443.png][]

最终效果： ![1023587-20161206142431522-1714116628.png][]

语法糖 <input v-model="sth"> 其完整写法是<input v-bind:value="sth" v-on:input="sth=$event.target.value>

组件可类比这种：

<my-input v-model="msg ><my-input/>对应  <my-input  v-bind:value="msg" v-on:input="msg=arguments\[0\]" ><my-input/>

![1023587-20161206142431835-299859882.png][]

![1023587-20161206142432476-151369763.png][]

组件 内容分发  slot

内容分发：动态的调用一些html元素到子模板

父组件模板内部的都是父组件的作用域。即便父套子， 也是父组件的作用域。

当然，如果子组件写在vue.component里是子组件的。

![1023587-20161206142433147-1558547475.png][]

如果你写了，这些html内容将会当做参数传入child-com内部定义有slot的地方

slot是可以写名字的  多个slot形成对应关系

父组件![1023587-20161206142433663-1770515246.png][]

子组件 ![1023587-20161206142434116-1571001246.png][]

组件内部要有根节点 比如div

![1023587-20161206142434522-106710897.png][]

结果：

![1023587-20161206142434976-1865153293.png][]

动态组件

![1023587-20161206142435366-1965316389.png][]

![1023587-20161206142435741-191307793.png][]→ *vm666.currentView='work' →![1023587-20161206142436054-958607018.png][]*

*![1023587-20161206142436460-1003573376.png][]*

* *

总的来说，Vue组件的接口包括3个方面：

*  Props（数据）允许外部将数据传入组件内；
 *  Events（事件） 允许将组件内的事件向外传播；
 *  Slots（插槽）允许在外部编辑组件内的html内容；

一个模板多次使用，可以这样获得其实例:  vm.$refs.profile 获取 ref为profile的实例  (这里ref类似dom的ID)  。

异步组件(无演示)

![1023587-20161206142436835-1425074597.png][]

初级教程结束。

进阶： [http://www.cnblogs.com/dmcl/p/6138389.html][Link 1]

[http_www.cnblogs.com_dmcl_p_6722315.html]: http://www.cnblogs.com/dmcl/p/6722315.html
[Link 1]: http://www.cnblogs.com/dmcl/p/6138389.html
[http_www.jianshu.com_p_142dae4f8b51]: http://www.jianshu.com/p/142dae4f8b51
[https_chrome.google.com_webstore_detail_vuejs-devtools_nhdogjmejiglipccpnnnanhbledajbpd]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[1023587-20161206142412054-911167099.png]: /images/20220617/c96f18cfc3464294a2a3669ba782758a.png
[1023587-20161206142412569-1743437099.png]: /images/20220617/8d3a59ab1f114a6bba5e6987c2baaec5.png
[1023587-20161206142412866-1097704738.png]: /images/20220617/1d43471feee74720a4cb38bbf730cc89.png
[1023587-20161206142414460-1916265913.jpg]: /images/20220617/7961f6066cef45b5b90b86e49a45333a.png
[1023587-20161206142415444-864630538.png]: /images/20220617/d91eddf36e1e41ed895104d9fcab4caf.png
[1023587-20161206142415726-1175133470.png]: /images/20220617/df56098f730b45ea865e8271a083b1a6.png
[1023587-20161206142416054-1595558541.png]: /images/20220617/a2ab568856f34c7da2b6559ffaf19cd1.png
[1023587-20161206142416304-628163007.png]: /images/20220617/94bf8a4650f142819e090aec8f916b08.png
[1023587-20161206142416601-1164441766.png]: /images/20220617/205107fac5dc445dabbed19da21f2f2a.png
[1023587-20161206142416913-637841474.png]: /images/20220617/3586eb04275c40fea499b8569f95e457.png
[1023587-20161206142417132-220653276.png]: /images/20220617/6f9cd2f17f17428da61094bcd6d57c3d.png
[1023587-20161206142417382-884151993.png]: /images/20220617/c7171b73541a48609af63e4df4d4310c.png
[1023587-20161206142417819-344638238.png]: /images/20220617/b6d1c49e49b445e286bdfd3375bcc2ad.png
[1023587-20161206142418194-916587087.png]: /images/20220617/40919187b6504395b0ce06094e3c7788.png
[1023587-20161206142418554-312196491.png]: /images/20220617/f0022f48ba14466fb5f6f1310cc4dec6.png
[1023587-20161206142418757-1516416483.png]: /images/20220617/5651d47b409f4c9e98745a15dc77fc71.png
[1023587-20161206142419038-1767025470.png]: /images/20220617/f1a2084c850348bbaa157a16874b9351.png
[http_cn.vuejs.org_v2_guide_list.html_-_-v-for]: http://cn.vuejs.org/v2/guide/list.html#%E7%BB%84%E4%BB%B6-%E5%92%8C-v-for
[http_cn.vuejs.org_v2_guide_list.html]: http://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95
[1023587-20161206142419351-631815274.png]: /images/20220617/ee68b180725c4056a29fb75b08405e1c.png
[1023587-20161206142419819-1112019237.png]: /images/20220617/ca3faf1f959c453aa576b331052b5271.png
[1023587-20161206142420366-2055690074.png]: /images/20220617/db09d4217ea941aa8ff0f78a23da0566.png
[1023587-20161206142420726-816084008.png]: /images/20220617/c8879ab9cabe47d7a57ab95acdaa1498.png
[1023587-20161206142421257-1017516767.png]: /images/20220617/6452c08222224155a32210bc2906ca3e.png
[Link 2]: http://cn.vuejs.org/v2/api/#keyCodes
[1023587-20161206142421710-1197868047.png]: /images/20220617/bb34629e4ee94f9e94da9a383dc881f7.png
[1023587-20161206142422038-115387791.png]: /images/20220617/cde88367e1e046f6b2aba6970338641c.png
[1023587-20161206142422476-2065955832.png]: /images/20220617/1e53ab04f9114059b4c816c047a308ed.png
[1023587-20161206142422788-1028085002.png]: /images/20220617/8e0d3844b35b4f5bbddf0d426ceb38e7.png
[1023587-20161206142423210-384592968.png]: http://images2015.cnblogs.com/blog/1023587/201612/1023587-20161206142423210-384592968.png
[1023587-20161206142423460-1809930300.png]: /images/20220617/f35f1cbc52774c4c9da46b8cc9c57c9a.png
[1023587-20161206142423897-673674130.png]: /images/20220617/c0c0efc6bde84ba38468cca230f8f253.png
[1023587-20161206142424288-1723727576.png]: /images/20220617/5f17ab1626064d67a1e003ba2b47c173.png
[1023587-20161206142424663-1525590959.png]: /images/20220617/d44a68a949b043d7a822a9e14c619852.png
[1023587-20161206142424929-1889269515.png]: /images/20220617/77339807ce0d4895a81afdfa259aadb9.png
[1023587-20161206142425163-2129680711.png]: /images/20220617/077b016a946d41aa9d56f82df811df26.png
[1023587-20161206142425335-1015174217.png]: /images/20220617/9f0065c463b04090806d46d96a74097a.png
[1023587-20161206142425726-1038248255.png]: /images/20220617/4fc75f996e0a436082e2792499acc9ac.png
[1023587-20161206142426991-227229827.png]: /images/20220617/dd105783badc4e68a9735f0539c6aefe.png
[1023587-20161206142428101-620934657.png]: /images/20220617/1a3b3230ee2d4694ba2fa1f6d985f6b9.png
[1023587-20161206142428929-575102419.png]: /images/20220617/5ee030224859438e8612398a79e0d281.png
[1023587-20161206142429319-1261491847.png]: /images/20220617/83c1b5efa02d4a7abfee7eeee57e97a0.png
[1023587-20161206142429647-468606280.png]: /images/20220617/c881163fb4bc46e7a03049659afd2626.png
[1023587-20161206142430038-390945541.png]: /images/20220617/a5d3e89690fd4f90be9ae973de49f468.png
[1023587-20161206142430304-754962233.png]: /images/20220617/17559d2b9b234eff89a5196fbc5f9589.png
[1023587-20161206142430663-614080223.png]: /images/20220617/f198f572557148e68b593a70142ca1ad.png
[1023587-20161206142431069-2144154443.png]: /images/20220617/b58a53bb3f824e3f8903723756aba598.png
[1023587-20161206142431522-1714116628.png]: /images/20220617/94ca8845727f402ca114a7d6d31e6341.png
[1023587-20161206142431835-299859882.png]: /images/20220617/ba4d704384904b8ebfa3533d9649ffab.png
[1023587-20161206142432476-151369763.png]: /images/20220617/3eea2bcbf3154af9a0c2517ad337d99f.png
[1023587-20161206142433147-1558547475.png]: /images/20220617/f1ef38847b724d4793c1b6d668344e2d.png
[1023587-20161206142433663-1770515246.png]: /images/20220617/8c3cd2e04e504a578d2e7ec6cfccd50e.png
[1023587-20161206142434116-1571001246.png]: /images/20220617/aa95ea2748914744b4772dec1c528896.png
[1023587-20161206142434522-106710897.png]: /images/20220617/9f696857b51b4ed9954fd68f49823224.png
[1023587-20161206142434976-1865153293.png]: /images/20220617/8f0b9ffeff9c416ab515f5745ae28dbd.png
[1023587-20161206142435366-1965316389.png]: /images/20220617/5661b9cc56364d59a8ae0c6aab05b6f8.png
[1023587-20161206142435741-191307793.png]: http://images2015.cnblogs.com/blog/1023587/201612/1023587-20161206142435741-191307793.png
[1023587-20161206142436054-958607018.png]: /images/20220617/082f616202334feea854013b4979761c.png
[1023587-20161206142436460-1003573376.png]: /images/20220617/9a23d0aa95394425a325aa84f80e604c.png
[1023587-20161206142436835-1425074597.png]: /images/20220617/1649b96792b240f5ab7e6701c09955f5.png