前端MVC Vue2学习总结（五）——表单输入绑定、组件
一、表单输入绑定
1.1、基础用法
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
1.1.1、文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}p>
1.1.2、多行文本
<span>Multiline message is:span> <p style="white-space: pre">{{ message }}p> <br> <textarea v-model="message" placeholder="add multiple lines">textarea>
在文本区域插值( ) 并不会生效，应用 v-model 来代替
1.1.3、复选框
单个勾选框，逻辑值：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}label>
多个勾选框，绑定到同一个数组：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jacklabel> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">Johnlabel> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mikelabel> <br> <span>Checked names: {{ checkedNames }}span>
new Vue({ el: '...', data: { checkedNames: [] } })
1.1.4、单选按钮
<input type="radio" id="one" value="One" v-model="picked"> <label for="one">Onelabel> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Twolabel> <br> <span>Picked: {{ picked }}span>
1.1.5、选择列表
单选列表:
<select v-model="selected"> <option>Aoption> <option>Boption> <option>Coption> select> <span>Selected: {{ selected }}span>
多选列表（绑定到一个数组）：
<select v-model="selected" multiple> <option>Aoption> <option>Boption> <option>Coption> select> <br> <span>Selected: {{ selected }}span>
动态选项，用 v-for 渲染：
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} option> select> <span>Selected: {{ selected }}span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
1.2、绑定 value
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
<input type="radio" v-model="picked" value="a"> <input type="checkbox" v-model="toggle"> <select v-model="selected"> <option value="abc">ABCoption> select>
但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
1.2.1、复选框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" >
// 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b
1.2.2、单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时 vm.pick === vm.a
1.2.3、选择列表设置
<select v-model="selected"> <option v-bind:value="{ number: 123 }">123option> select>
// 当选中时 typeof vm.selected // -> 'object' vm.selected.number // -> 123
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<div id="vm">
<p>
<label for="name">姓名label>
<input v-model="name" id="name" name="name" value="tom" />值：
<span v-text="name">span> <span v-html="name">span> <span>{{name}}span>
p>
<p>
<label>爱好label>
<input type="checkbox" v-model="hobbies" value="代码" id="hobbies1" />
<label for="hobbies1">代码label>
<input type="checkbox" v-model="hobbies" value="运动" id="hobbies2" />
<label for="hobbies2">运动label>
<input type="checkbox" v-model="hobbies" value="音乐" id="hobbies3" />
<label for="hobbies3">音乐label> 值：{{hobbies.join(',')}}
p>
<p>
<label>性别label>
<input type="radio" v-model="sex" value="男" id="sex1" />
<label for="sex1">男label>
<input type="radio" v-model="sex" value="女" id="sex2" />
<label for="sex2">女label>
<input type="radio" v-model="sex" value="保密" id="sex3" />
<label for="sex3">保密label> 值：{{sex}}
p>
<p>
<label>精通label>
<select v-model="skill1">
<option value="Java">Javaoption>
<option value="前端">前端option>
<option value="Oracle">Oracleoption>
<option value="">--请选择--option>
select>
值：{{skill1}}
p>
<p>
<label>擅长label>
<select v-model="skill2" multiple="multiple" size="5">
<option value="C#">C#option>
<option value="Ruby">Rubyoption>
<option value="Go">Gooption>
<option value="PHP">PHPoption>
<option value="python">pythonoption>
select>
值：{{skill2}}
p>
<p>
<input type="checkbox" v-model="isAllow" id="isAllow" />
<label for="isAllow">同意本网站协定label> 值：{{isAllow}}
p>
<p>
<input type="checkbox" v-model="isOk" id="isOk" v-bind:true-value="yes" v-bind:false-value="no" />
<label for="isOk">同意本网站协定label> 值：{{isOk}}
p>
<p>
<input type="checkbox" v-model="isOk2" id="isOk2" v-bind:true-value="'yes'" v-bind:false-value="'no'" />
<label for="isOk2">同意本网站协定label> 值：{{isOk2}}
p>
<p>
<input type="radio" v-model="isSend" name="isSend" value="发送"/>发送
<input type="radio" v-model="isSend" name="isSend" value="不发送"/>不发送
<label>发送短信label> 值：{{isSend}}
p>
<p>
<label>等级label>
<select v-model="grade">
<option :value="{level:1}">A级option>
<option :value="{level:2}">B级option>
<option v-bind:value="{level:3}">C级option>
select>
值：{{grade.level}}
p>
<p>
<label for="name">姓名label>
<textarea rows="5" cols="50">{{name}}textarea>
p>
div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var vm = new Vue({
el: "#vm",
data: {
isShow: true,
name: "rose",
hobbies: ["代码"],
sex: '保密',
skill1: '',
skill2: ['PHP'],
isAllow: false,
isOk: "同意",
yes: '同意',
no: '不同意',
isOk2: "yes",
isSend:'不发送',
grade:{
name:"技术等级",
level:0
}
}
});
script>
body>
html>
结果：
1.3、修饰符
1.3.1、.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<input v-model.lazy="msg" >
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<div id="vm">
<p>
<label for="name">姓名label>
<input v-model="name" id="name" name="name" value="tom" /> 值：
<span v-text="name">span>
p>
<p>
<label>姓名label>
<input v-model.lazy="name" value="tom" /> 值：
<span v-text="name">span>
p>
div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var vm = new Vue({
el: "#vm",
data: {
name: "rose"
}
});
script>
body>
html>
结果：
1.3.2、.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<div id="vm">
<p>
<label for="age">年龄label>
<input v-model="age" id="age" name="age" type="number" /> 值：{{age}}
p>
<p>
<label for="age">年龄label>
<input v-model.number="age" id="age" name="age"/> 值：{{age}}
类型：{{typeof(age)}}
p>
div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var vm = new Vue({
el: "#vm",
data: {
name: "rose",
age: "18"
}
});
script>
body>
html>
结果：
1.3.2、.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<div id="vm">
<p>
<label for="memo1">自我介绍label>
<input v-model="memo1" id="memo1" name="memo1" /> 值：{{memo1}}结束
p>
<p>
<label for="memo2">自我介绍label>
<input v-model.trim="memo2" id="memo2" name="memo2" /> 值：{{memo2}}结束
p>
div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var vm = new Vue({
el: "#vm",
data: {
name: "rose",
age: "18",
memo1:" 我是 一个 好学生 ",
memo2:" 我是一个好学生 ",
}
});
script>
body>
html>
结果：
初始加载，trim未执行：
修改后有效：
1.4、在组件上使用 v-model
如果你还不熟悉 Vue 的组件，可以暂且跳过这里。
HTML 原生的输入元素类型并不总能满足需求。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用！要了解更多，请参阅组件指南中的自定义输入组件。
官方原文：http://vuejs.org/guide/forms.html
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
二、组件
2.0、SPA
SPA指的是Single Page Application，就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。
单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。
速度：更好的用户体验，让用户在web app感受native app的速度和流畅
MVVM：经典MVVM开发模式，前后端各负其责
ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交
路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载
优点：
1.分离前后端关注点，前端负责View，后端负责Model，各司其职；
2.服务器只接口提供数据，不用展示逻辑和页面合成，提高性能；
3.同一套后端程序代码，不用修改兼容Web界面、手机；
4.用户体验好、快，内容的改变不需要重新加载整个页面
5.可以缓存较多数据，减少服务器压力
6.单页应用像网络一样，几乎随处可以访问—不像大多数的桌面应用，用户可以通过任务网络连接和适当的浏览器访问单页应用。如今，这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。
缺点：
1.SEO问题
2.刚开始的时候加载可能慢很多
3.用户操作需要写逻辑，前进、后退等
4.页面复杂度提高很多，复杂逻辑难度成倍
2.1、什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
先看看几种定义组件的办法：
2.1.1、组件形式一：使用script标签
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件title>
head>
<body>
<div id="vm">
<me-component1>me-component1>
div>
<script type="text/x-template" id="template1">
<div>这是一个组件</div>
script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//定义全局的Vue组件
Vue.component("me-component1",{
template:"#template1"
});
var vm = new Vue({
el: "#vm",
data: {
name: "rose"
}
});
script>
body>
html>
结果：
注意：使用
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件title>
head>
<body>
<div id="vm">
<h2>{{bar}}h2>
<me-comp :foo="bar" @update:foo="updatefoo">me-comp>
<me-comp :foo="bar" @update:foo="val=>bar=val">me-comp>
<me-comp :foo.sync="bar">me-comp>
div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//定义全局的Vue组件
Vue.component("me-comp", {
template: "",
props: {
foo: Number
},
data: function() {
return {
fooCopy: this.foo
}
},
methods: {
increment: function() {
this.fooCopy++;
this.$emit("update:foo", this.fooCopy);
}
}
});
var vm = new Vue({
el: "#vm",
data: {
bar: 0
},
methods:
{
updatefoo:function(val){
this.bar=val;
}
}
});
script>
body>
html>
结果：
注意：这种方式本质上还是父组件自己修改了自己的值，子组件并未直正修改父组件的值，只是触发了通知。
2.4.2、使用自定义事件的表单输入组件
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。牢记：
<input v-model="something">
仅仅是一个语法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以在组件中使用时，它相当于下面的简写：
<input v-bind:value="something" v-on:input="something = arguments[0]">
所以要让组件的 v-model 生效，它必须：
- 接受一个
value属性 - 在有新的 value 时触发
input事件
一个非常简单的货币输入：
<currency-input v-model="price">currency-input>
Vue.component('currency-input', {
template: '\
\
$\
\
\
',
props: ['value'],
methods: {
// Instead of updating the value directly, this
// method is used to format and place constraints
// on the input's value
updateValue: function (value) {
var formattedValue = value
// Remove whitespace on either side
.trim()
// Shorten to 2 decimal places
.slice(0, value.indexOf('.') + 3)
// If the value was not already normalized,
// manually override it to conform
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// Emit the number value through the input event
this.$emit('input', Number(formattedValue))
}
}
})
The implementation above is pretty naive though. For example, users are allowed to enter multiple periods and even letters sometimes - yuck! So for those that want to see a non-trivial example, here’s a more robust currency filter:
这个接口不仅仅可以用来连接组件内部的表单输入，也很容易集成你自己创造的输入类型。想象一下：
$refs
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加button> div> <script> new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗 } } }) script>
一般获取DOM元素需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
价格：
<my-currency v-model="price">my-currency>
div>
<script src="../../js/vue/vue.js">script>
<script>
Vue.component("my-currency", {
props: ['value'],
template: '',
methods: {
updateValue: function (val) {
//123.456
var fVal = val.trim().slice(0, val.indexOf(".") + 3);
if (fVal !== val) {
this.$refs.input.value = fVal;
}
this.$emit("input", Number(fVal));
}
}
});
var vm = new Vue({
el: "#app01",
data: {
price: ""
}
});
script>
body>
html>
结果：
2.4.3、非父子组件通信
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()
// 触发组件 A 中的事件 bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... })
在更多复杂的情况下，你应该考虑使用专门的 状态管理模式.
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<my-comp1>my-comp1>
<my-comp2>my-comp2>
div>
<script src="../../js/vue/vue.js">script>
<script>
//事件总线
var bus = new Vue();
Vue.component("my-comp1", {
template: "",
data() {
return {n: 0}
},
methods: {
incrN: function () {
this.n++;
//发布事件
bus.$emit("inc",this.n);
}
}
});
Vue.component("my-comp2", {
template: "",
data() {
return {n: 999}
},
methods: {
incrN: function () {
this.n--;
}
},
//勾子，挂载完成时执行事件
mounted:function () {
var _this=this;
//监听事件，订阅事件
bus.$on("inc",function (val) {
_this.n+=val;
})
}
});
var vm = new Vue({
el: "#app01",
data: {}
});
script>
body>
html>
结果：
2.4.4、父链
在子组件中通过$parent可以获得当前组件的父组件，实现通信：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<h2>{{msg}}h2>
<p>
<my-comp>my-comp>
p>
div>
<script src="../../js/vue/vue.js">script>
<script>
Vue.component("my-comp",{
template:"",
methods:{
modifyParent(){
this.$parent.msg="被子组件修改了："+Math.random();
}
}
});
var vm=new Vue({
el:"#app01",
data:{
msg:"父组件中的消息"
}
});
script>
body>
html>
结果：
通过$parent.$parent可以递归找到所有的父组件，当然可以判断是否为根实例。
虽然 可以通过该办法修改父组件的数，但不推荐，建议还是使用$emit与porps实现通信。
2.4.5、子组件索引
方法一，通过$refs可以找到单个子组件：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<h2>{{msg}}h2>
<p>
<my-comp ref="comp1">my-comp>
p>
<p>
<button @click="modifySub">父组件修改子组件button>
p>
div>
<script src="../../js/vue/vue.js">script>
<script>
Vue.component("my-comp",{
template:"",
methods:{
modifyParent(){
this.$parent.msg="被子组件修改了："+Math.random();
}
},
data(){
return {info:"子组件的内容"};
}
});
var vm=new Vue({
el:"#app01",
data:{
msg:"父组件中的消息"
},
methods:{
modifySub(){
//通过ref获得comp1子组件
this.$refs.comp1.info=Math.random();
console.log(this.$refs.comp1);
}
}
});
script>
body>
html>
结果：
方法二，通过$children可以找到子组件集合：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<h2>{{msg}}h2>
<p>
<my-comp>my-comp>
<my-comp>my-comp>
<my-comp>my-comp>
<my-comp>my-comp>
<my-comp>my-comp>
p>
<p>
<button @click="modifySub">父组件修改子组件button>
p>
div>
<script src="../../js/vue/vue.js">script>
<script>
Vue.component("my-comp",{
template:"",
methods:{
modifyParent(){
this.$parent.msg="被子组件修改了："+Math.random();
}
},
data(){
return {info:"子组件的内容"};
}
});
var vm=new Vue({
el:"#app01",
data:{
msg:"父组件中的消息"
},
methods:{
modifySub(){
console.log(this.$children);
//遍历所有的子组件
for(var i=0;i<this.$children.length;i++){
this.$children[i].info="父组件修改"+i;
}
}
}
});
script>
body>
html>
结果：
2.5、使用 Slots 分发内容
在使用组件时，常常要像这样组合它们：
<app> <app-header>app-header> <app-footer>app-footer> app>
注意两点：
-
-
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API ，参照了当前 Web组件规范草案，使用特殊的
2.5.1、编译作用域
在深入内容分发 API 之前，我们先明确内容的编译作用域。假定模板为：
<child-component> {{ message }} child-component>
message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
<child-component v-show="someChildProperty">child-component>
假定 someChildProperty 是子组件的属性，上例不会如预期那样工作。父组件模板不应该知道子组件的状态。
如果要绑定子组件内的指令到一个组件的根节点，应当在它的模板内这么做：
Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: 'Child',
data: function () {
return {
someChildProperty: true
}
}
})
类似地，分发内容是在父组件作用域内编译。
2.5.2、单个 Slot
除非子组件模板包含至少一个
最初在
假定 my-component 组件有下面模板：
<div> <h2>I'm the child titleh2> <slot> 如果没有分发内容则显示我。 slot> div>
父组件模版：
<div> <h1>I'm the parent titleh1> <my-component> <p>This is some original contentp> <p>This is some more original contentp> my-component> div>
渲染结果：
<div> <h1>I'm the parent titleh1> <div> <h2>I'm the child titleh2> <p>This is some original contentp> <p>This is some more original contentp> div> div>
2.5.3、具名Slots
name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。
例如，假定我们有一个 app-layout 组件，它的模板为：
<div class="container"> <header> <slot name="header">slot> header> <main> <slot>slot> main> <footer> <slot name="footer">slot> footer> div>
父组件模版：
<app-layout> <h1 slot="header">Here might be a page titleh1> <p>A paragraph for the main content.p> <p>And another one.p> <p slot="footer">Here's some contact infop> app-layout>
渲染结果为：
<div class="container"> <header> <h1>Here might be a page titleh1> header> <main> <p>A paragraph for the main content.p> <p>And another one.p> main> <footer> <p>Here's some contact infop> footer> div>
在组合组件时，内容分发 API 是非常有用的机制。
2.6、动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 is 特性：
var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } })
<component v-bind:is="currentView"> component>
也可以直接绑定到组件对象上：
var Home = { template: 'Welcome home!
' } var vm = new Vue({ el: '#example', data: { currentView: Home } })
2.6.1、keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<keep-alive> <component :is="currentView"> component> keep-alive>
在API 参考查看更多
2.7、其它
2.7.1、编写可复用组件
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots ：
-
Props 允许外部环境传递数据给组件
-
Events 允许组件触发外部环境的副作用
-
Slots 允许外部环境将额外的内容组合在组件中。
使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
<my-component :foo="baz" :bar="qux" @event-a="doThis" @event-b="doThat" > <img slot="icon" src="..."> <p slot="main-text">Hello!p> my-component>
2.7.2、子组件索引
尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID 。例如：
<div id="parent"> <user-profile ref="profile">user-profile> div>
var parent = new Vue({ el: '#parent' }) // 访问子组件 var child = parent.$refs.profile
当 ref 和 v-for 一起使用时， ref 是一个数组或对象，包含相应的子组件。
$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。
2.7.3、异步组件
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单， Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
resolve({
template: 'I am async!'
})
}, 1000)
})
工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason) 指示加载失败。这里 setTimeout 只是为了演示。怎么获取组件完全由你决定。推荐配合使用 ：Webpack 的代码分割功能：
Vue.component('async-webpack-example', function (resolve) {
// 这个特殊的 require 语法告诉 webpack
// 自动将编译后的代码分割成不同的块，
// 这些块将通过 Ajax 请求自动下载。
require(['./my-async-component'], resolve)
})
你可以使用 Webpack 2 + ES2015 的语法返回一个 Promise resolve 函数：
Vue.component( 'async-webpack-example', () => System.import('./my-async-component') )
如果你是 Browserify 用户,可能就无法使用异步组件了,它的作者已经表明Browserify 是不支持异步加载的。如果这个功能对你很重要，请使用 Webpack。
2.7.4、组件命名约定
当注册组件（或者 props）时，可以使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不关心这个。
// 在组件定义中 components: { // 使用 camelCase 形式注册 'kebab-cased-component': { /* ... */ }, 'camelCasedComponent': { /* ... */ }, 'TitleCasedComponent': { /* ... */ } }
在 HTML 模版中，请使用 kebab-case 形式：
<kebab-cased-component>kebab-cased-component> <camel-cased-component>camel-cased-component> <title-cased-component>title-cased-component>
当使用字符串模式时，可以不受 HTML 的 case-insensitive 限制。这意味实际上在模版中，你可以使用 camelCase 、 PascalCase 或者 kebab-case 来引用你的组件和 prop：
<my-component>my-component> <myComponent>myComponent> <MyComponent>MyComponent>
如果组件未经 slot 元素传递内容，你甚至可以在组件名后使用 / 使其自闭合：
<my-component/>
当然，这只在字符串模版中有效。因为自闭的自定义元素是无效的 HTML ，浏览器原生的解析器也无法识别它。
2.7.5、递归组件
组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以：
name: 'unique-name-of-my-component'
当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项，被自动设置.
Vue.component('unique-name-of-my-component', {
// ...
})
如果你不谨慎, 递归组件可能导致死循环:
name: 'stack-overflow', template: ''
上面组件会导致一个错误 “max stack size exceeded” ，所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并让他最终返回 false )。
2.7.6、内联模版
如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活。
<my-component inline-template> <div> <p>These are compiled as the component's own template.p> <p>Not parent's transclusion content.p> div> my-component>
但是 inline-template 让模板的作用域难以理解。最佳实践是使用 template 选项在组件内定义模板或者在 .vue 文件中使用 template 元素。
2.7.7、X-Templates
另一种定义模版的方式是在 JavaScript 标签里使用 text/x-template 类型，并且指定一个id。例如：
<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
这在有很多模版或者小的应用中有用，否则应该避免使用，因为它将模版和组件的其他定义隔离了。
2.7.8、使用 v-once 的低级静态组件(Cheap Static Component)
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
template: '\
\
Terms of Service
\
... a lot of static content ...\
\
'
})
官方帮助：http://vuejs.org/guide/components.html
2.7.9、$nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
//改变数据 vm.message = 'changed' //想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新 console.log(vm.$el.textContent) // 并不会得到'changed' //这样可以，nextTick里面的代码会在DOM更新后执行 Vue.nextTick(function(){ console.log(vm.$el.textContent) //可以得到'changed' })
原理图
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，API 文档中官方示例如下：
new Vue({ // ... methods: { // ... example: function () { // modify data this.message = 'changed' // DOM is not updated yet this.$nextTick(function () { // DOM is now updated // `this` is bound to the current instance this.doSomethingElse() }) } } })
可能不大理解什么叫 DOM is now updated，在深入响应式原理 - vue.js中的示例情况也比较罕见，Vue 模板中直接在根无素中进行插值，然后在实例方法中使用了 this.$el.textContent 来获得更新之后的 DOM。
考虑这样一种场景，你有一个 jQuery 插件，希望在 DOM 元素中某些属性发生变化之后重新应用该插件，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<h2 id="h2Msg">{{msg}}h2>
<button @click="getMsg">获得消息button>
div>
<script src="../../js/vue/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app01",
data:{
msg:"Hello nextTick!"
},
methods:{
getMsg:function () {
this.msg="Hi nextTick!!!";
//立即获取dom中的内容，因为DOM是异步更新的，这时内容没有变化，所以获得的还是旧内容
console.log(document.getElementById("h2Msg").innerHTML);
}
}
});
script>
body>
html>
结果：
增加nextTick回调方法
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2 Demotitle>
head>
<body>
<div id="app01">
<h2 id="h2Msg">{{msg}}h2>
<button @click="getMsg">获得消息button>
div>
<script src="../../js/vue/vue.min.js">script>
<script>
var vm=new Vue({
el:"#app01",
data:{
msg:"Hello nextTick!"
},
methods:{
getMsg:function () {
this.msg="Hi nextTick!!!";
//当下一次DOM更新时将执行的回调方法
this.$nextTick(function () {
console.log(document.getElementById("h2Msg").innerHTML);
});
console.log("执行完了！");
}
}
});
script>
body>
html>
结果：
从这个事例可以看出DOM并非是同步更新的，通过$nextTick可以执行DOM下一次更新时的事情，当然也可以使用Vue.nextTick捕获全局的更新事件。
三、作业
3.1、请完成课程中的所有示例。
3.2、请定义一个vue分页组件，可以实现客户端分页功能，接收参数
参考代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue分页组件title>
<style>
.page {
font-weight: 900;
height: 40px;
text-align: center;
color: #888;
margin: 20px auto 0;
background: #f2f2f2;
}
.pagelist {
font-size: 0;
background: #fff;
height: 50px;
line-height: 50px;
}
.pagelist span {
font-size: 14px;
}
.pagelist .jump {
border: 1px solid #ccc;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-left: 5px;
}
.pagelist .bgprimary {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
.jumpinp input {
width: 55px;
height: 26px;
font-size: 13px;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.ellipsis {
padding: 0px 8px;
}
.jumppoint {
margin-left: 30px;
}
.pagelist .gobtn {
font-size: 12px;
}
.bgprimary {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
.pagelist .jump.disabled{
pointer-events: none;
background: #ddd;
}
style>
head>
<body>
<div id="app">
<div>
<div class="page" v-show="show">
<div class="pagelist">
<span class="jump" :class="{disabled:pstart}" @click="{current_page--}">上一页span>
<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1span>
<span class="ellipsis" v-show="efont">...span>
<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}span>
<span class="ellipsis" v-show="ebehind">...span>
<span :class="{disabled:pend}" class="jump" @click="{current_page++}">下一页span>
<span v-show="current_page class="jump" @click="jumpPage(pages)">{{pages}}span>
<span class="jumppoint">跳转到：span>
<span class="jumpinp"><input type="text" v-model="changePage">span>
<span class="jump gobtn" @click="jumpPage(changePage)">GOspan>
div>
div>
div>
div>
<script src="http://www.jq22.com/jquery/vue.min.js">script>
<script>
var newlist = new Vue({
el: '#app',
data: {
current_page: 1, //当前页
pages: 50, //总页数
changePage:'',//跳转页
nowIndex:0
},
computed:{
show:function(){
return this.pages && this.pages !=1
},
pstart: function() {
return this.current_page == 1;
},
pend: function() {
return this.current_page == this.pages;
},
efont: function() {
if (this.pages <= 7) return false;
return this.current_page > 5
},
ebehind: function() {
if (this.pages <= 7) return false;
var nowAy = this.indexs;
return nowAy[nowAy.length - 1] != this.pages;
},
indexs: function() {
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages - 4) {
left = Number(this.current_page) - 3;
right = Number(this.current_page) + 3;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage: function(id) {
this.current_page = id;
},
},
})
script>
body>
html>
3.3、请完使用vue2实现图书列表与详细展示功能，效果如下：
参考地址
3.4、使用Vue 组件（component）完成一个精美的日历，要求IOS , 安卓， PC 的IE9+都能运行，如下图所示：
四、示例下载
https://git.coding.net/zhangguo5/vue2.git
小红书项目要求：
http://www.cnblogs.com/xsblog/p/8144290.html
五、视频
https://www.bilibili.com/video/av17503637/