v-model修饰符
lazy
<body>
<div id="app">
<!-- 事件修饰符.lazy不会即时的将输入框的内容存放入data -->
<input v-model.lazy="msg">
<span>{ {msg}}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'1111'
}
})
</script>
</body>
number
<body>
<div id="app">
<!-- 修饰符.number把string字符串转为number数字 -->
<input type="number" v-model.number="age">
<span>{ {age}}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
age:''
},
watch:{
age(){
console.log(typeof(this.age));
}
}
})
</script>
</body>
trim
<body>
<div id="app">
<!-- trim屏蔽空格 -->
<input type="text" v-model.trim="msg">
<span>{ {msg.length]}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:''
}
})
</script>
</body>
key属性的作用
提升v-for渲染的效率。.
提高渲染性能。
避免数据混乱的情况出现 。
v-for中key的作用
<body>
<div id="app">
<button @click="list.splice(1,0,{id:4,name:'yy'})">添加</button>
<ul>
<li v-for="item in list":key="item.index">
<input type="checkbox">
<span>{ {item.name}}</span>
</li>
</ul>
<!-- 现象:当我勾了rr，然后在下标1的位置添加了yy,结果发现勾给了yy,rr自己没勾了。
原因:v-for会尝试最大限度 复用当前元素,导致状态绑定错乱。
解决:在v-for后加上一个key属性，key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)
-->
</div>
<script src="./vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
list:[
{id:1,name:'ww'},
{id:2,name:'rr'},
{id:3,name:'tt'},
]
}
})
</script>
</body>
v-if与v-show的区别
v-show
v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的语法表达v-show = " 表达式 "
原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
指令后面的内容最终都会解析为布尔值
值为真(true)的时候元素显示，值为假(false)的时候元素隐藏
数据改变之后呢对应的元素的显示状态也是会同步更新的v-if
v-if指令的作用：根据表达式的真假切换元素的显示状态
v-if = "表达式"
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除
v-show和v-if的区别
原理:v-show指令：
元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
应用场景
v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好例：
v-show
<body>
<!-- v-show和v-if都可以用来控制标签的显示与隐藏
<标签 v-show=‘布尔值’></标签>
<标签 v-if=‘布尔值’></标签>
当布尔值为ture，他们就显示：当布尔值为false，他们就隐藏。-->
<div id="app">
<div v-show="display">我是由v-show控制的</div>
<div v-if="display">我是由v-if控制的</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
display:ture
}
})
</script>
<!-- 面试题
v-show
本质就是标签dispaly设置为none，控制隐藏。只是基于css进行切换。
v-show有更高的初始渲染消耗。
v-show适合频繁切换效果。
v-if
动态的向DOM树内添加或者删除DOM元素。
v-if有更高的切换消耗。
v-if适合运行条件很少改变的情况。-->
</body>
<body>
<div id="app">
<div v-show="money>=1000"> 吃火锅</div>
<div v-show="money>=2000">海底捞</div>
<div v-show="money>=500">饭</div>
<div v-show="money<500">滚</div><hr>
<!-- 双分支 -->
<div v-show="age>=18">酒吧</div>
<div v-show="age<18">捡垃圾</div></div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:1500,
age:25
}
})
</script>
</body>
v-if
body>
<div id="app">
<div v-if="money>=1000"> 吃火锅</div>
<div v-else-if="money>=2000">海底捞</div>
<div v-else-if="money>=500">饭</div>
<div v-else>滚</div><hr>
<!-- 双分支 -->
<div v-if="age>=18">酒吧</div>
<div v-else>捡垃圾</div></div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:1500,
age:25
}
})
</script>
</body>
v-for与v-if注意事项
除非必要，否则不要将 v-if和 v-for 用在同一个元素上。
当它们处于同一节点时，v-for 的优先级比 v-if 高，v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。
另一种场景是,如果希望有条件地跳过循环的执行，那么应该将 v-if置于外层元素上。例如，在一个电商网站的产品列表页面中,通常会先判断一下这个列表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品)，那就显示一句提示语，而不再显示列表
Vue.js 的两个关键指令V if 指令和 v-for 指令，它们分别用于条件渲染和列表渲染。
v-if 指令需要与 v-show 指令今分开使用。
v-for 指令需要 key 属性的配合，此外还要留意数组元素更新时的限制情况
父子组件之间传递数据的方法
属性
组件是Vue.js开发中的基本单元，组件之间不可避免的需要传递数据从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现
vue.js还允许使用更明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。
使用props选项来定义:
使用字符串数组来声明
使用对象的方式来声明
props单向数据流
概念:父组件的数据改变了会自动流动到自组件，但是子不允许修改由props流过来的数据
所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆。
例如:父传了数组给子，在子里面可以通过调用push，pop，shift，unshift，splice等等方法来改 堆。而且改完后父也会跟着改，因为他们指向的是同一个堆。但是在这里不允许改props上的栈上的数据，父可以改，而且改完后能流入到子。
二.插槽
插槽的作用：向组件传递另一个组件的开闭标记之间的内容slot-具名插槽
1.什么叫具名插槽？
就是有名字的插槽
2.为什么要用具名插槽？
因为一个组件里可能有多个地方都不想写死，那就使用具名插槽
命名语法：
<slot name = '名字'>默认值</slot>
使用语法：(依赖template包裹,并且使用v-slot指定插槽的名字)
<template v-slot:插槽名>
要传递的内容
</template>
简写语法：(把v-slot变成#)
<template #插槽名>
要传递的内容
</template>
从子组件向父组件传递数据
在Vue.js中，如果子组件需要向父组件传递数据，就需要使用事件机制来实现。父组件之间的数据流总结起来就是：“从上向下通过属性传递数据，从上向下通过事件传递数据”。档子组件向父组件传递数据时，需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。【$emit】
子组件如何给父组件传递数据?
利用发通知的形式来间接传数据。
发通知的语法:this.$emit('自定义的事件名'数据)
父里要订阅这个通知(相当于监听这个事件)
<子组件 @自定义的事件名="函数">
当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。
例如:
子组件的代码
<button aclick="$emit('sb' "hello’)">点击后,要给父传递数据</button>
解释:当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。父里的代码
<子组件 @sb="函数"/>
当sb事件通知时，就会调用上面的函数，函数的参数就是永不过时。
单页应用SPA
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用的说法是在JavaScript和AJAX技术比较成熟以后才出现的，指的是通过浏览器访问一个网站时，只需要加载一个入口页面，此后显示的内容和数据都不会再刷新浏览器页面。有了单页应用之后，传统的网站就被称为多页应用了。
流程
优点
（1） 有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
（2）前后端分离开发
单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
（3）减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
（4）共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；缺点
（1）SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；
（2）前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现；
（3）初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；
