vue2.0基础学习（1）
（一） 内部指令
第一节：准备工作
1.引入Vue.js(官方网站：https://cn.vuejs.org/v2/guide/installation.html)
·在开发时请用开发版本，遇到常见错误它会给出友好的警告
2.使用 live-server
全局安装
npm install live-server -g
在项目目录中打开
live-server
3.第一个代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>MyVue</title> 8 <script src="../assets/js/vue.js"></script> 9 </head> 10 11 <body> 12 <h1>Hello World</h1> 13 <div id="app"> 14 <h2>{{message}}</h2> 15 </div> 16 17 <script> 18 var vm = new Vue({ 19 el: '#app', 20 data: { 21 message: 'my first vue demo' 22 } 23 }) 24 </script> 25 </body> 26 27 </html>
第二节： v-if v-show 指令
1. v-if
根据表达式的值的真假条件渲染元素
2. v-show
根据表达式之真假值，切换元素的 display CSS 属性
3. v-if 和 v-show 的区别
· v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
· v-show：调整css dispaly属性，可以使客户端操作更加流畅。
第三节： for 指令
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
1.基本用法
html
<li v-for="item in items"> {{item}} </li>
js
1 var app=new Vue({ 2 el:'#app', 3 data:{ 4 items:[11,22,10,41,55,60,30,44] 5 } 6 })
2. 排序
我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
computed: { sortItems: function () { return this.items.sort(sorNumber);
}
}
function sorNumber(a, b) { return a - b; }
//数组对象方法排序: function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key]; var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); }); }
我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源
第四节：v-text v-html
v-text:
当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。使用v-text可以解决这个弊端。
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>
v-html：
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
<div v-html="html"></div>
注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
第五节： v-on 绑定事件监听器
缩写 ：@
参数：event
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button>
第六节：v-model 指令
在表单控件或者组件上创建双向绑定。
<input type="text" v-model="inputMsg"> <p>{{inputMsg}}</p>
第7节：v-bind 指令
缩写：:
动态地绑定一个或多个特性，或一个组件 prop 到表达式
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
第八节：其他内部指令
v-pre：在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
v-cloak：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用
v-once：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
（二） 全局API
第1节：Vue.directive 自定义指令
构造器外部用Vue提供给我们的API函数来定义新的功能。
// 注册 Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) // 注册 (指令函数) Vue.directive('my-directive', function () { // 这里将会被 `bind` 和 `update` 调用 }) // getter，返回已注册的指令 var myDirective = Vue.directive('my-directive')
第2节：Vue.extend构造器的延伸
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
<div id="mount-point"></div>
// 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')
第3节：Vue.set全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。
一 、引用构造器外部数据：
什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
//在构造器外部声明数据 var outData={ count:1, goodName:'car' }; var app=new Vue({ el:'#app', //引用外部数据 data:outData })
二、在外部改变数据的三种方法：
1.用Vue.set改变
function add(){ Vue.set(outData,'count',4); }
2.用Vue对象的方法添加
app.count++;
3.直接操作外部数据
outData.count++;
三、Vue.set存在的意义
由于Javascript的限制，Vue不能自动检测以下变动的数组。
（1）当你利用索引直接设置一个项时，vue不会为我们自动更新。
（2）当你修改数组的长度时，vue不会为我们自动更新。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Vue.set 全局操作</title> </head> <body> <h1>Vue.set 全局操作</h1> <hr> <div id="app"> <ul> <li v-for=" aa in arr">{{aa}}</li> </ul> </div> <button onclick="add()">外部添加</button> <script type="text/javascript"> function add(){ console.log("我已经执行了"); app.arr[1]='ddd'; //Vue.set(app.arr,1,'ddd'); } var outData={ arr:['aaa','bbb','ccc'] }; var app=new Vue({ el:'#app', data:outData }) </script> </body> </html>
这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。
第4节：Vue的生命周期（钩子函数）
Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>构造器的声明周期</title> </head> <body> <h1>构造器的声明周期</h1> <hr> <div id="app"> {{message}} <p><button @click="plus">加分</button></p> </div> <button onclick="app.$destroy()">销毁</button> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ plus:function(){ this.message ++; } }, beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ console.log('2-created 创建完成'); }, beforeMount:function(){ console.log('3-beforeMount 挂载之前'); }, mounted:function(){ console.log('4-mounted 被创建'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 数据更新前'); }, updated:function(){ console.log('6-updated 被更新后'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 销毁之前'); }, destroyed:function(){ console.log('10-destroyed 销毁之后') } }) </script> </body> </html>
第5节：Template 制作模版
一、直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:` <h1 style="color:red">我是选项模板</h1> ` })
这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。
二、写在<template>标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。
<template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo2' }) </script>
三、写在<script>标签里的模板
这种写模板的方法，可以让模板文件从外部引入。
<script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</h2> </script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo3' }) </script>
第6节：Component 组件
一、全局化注册组件
全局化就是在构造器的外部用Vue.component来注册，我们现在就注册一个<myComponent></myComponent>的组件来体验一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <myComponent></myComponent> </div> <script type="text/javascript"> //注册全局组件 Vue.component('myComponent',{ template:`<div style="color:red;">全局化注册的myComponent标签</div>` }) var app=new Vue({ el:'#app', data:{ } }) </script> </body> </html>
我们在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。
二、局部注册组件
局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <panda></panda> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">局部注册的panda标签</div>` } } }) </script> </body> </html>
从代码中可以看出局部注册其实就是写在构造器里，但是需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。
三、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好。
第7节：Component 组件props 属性设置
props选项就是设置和获取标签上的属性值。
一、定义属性并获取属性值
定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:[‘here’]。在组件的模板里读出属性值只需要用插值的形式，例如{{ here }}。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-2</title> </head> <body> <h1>component-2</h1> <hr> <div id="app"> <panda here="China"></panda> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } }) </script> </body> </html>
最后输出的结果是红色字体的Panda from China.
二、属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词，比如：<panda from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。
html文件：
<panda from-here="China"></panda>
javascript文件：
var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['fromHere'] } } })
三、在构造器里向组件中传值
把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.
html文件：
<panda v-bind:here="message"></panda>
javascript文件：
var app=new Vue({ el:'#app', data:{ message:'SiChuan' }, components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } })
