Vue笔记系列（三）基础选项
1.propsData Option全局扩展的数据传递
❤先说扩展
<body>
<h1>propsData Option</h1>
<hr>
<header></header>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{message}}-{{a}}</p>`,
data:function(){
return{
message:"I love u"
}
}
});
new header_a().$mount("header");
</script>
</body>
页面上显示I love u，这时候再加入propsData.
propsData 不是和属性有关，他用在全局扩展时进行传递数据。
<body>
<h1>propsData Option</h1>
<hr>
<header></header>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{message}}-{{a}}</p>`,
data:function(){
return{
message:"I hate u"
}
},
props:["a"]
});
new header_a({propsData:{a:1314}}).$mount("header");
</script>
</body>
用propsData三步解决传值：
1、在全局扩展里加入props进行接收。propsData:{a:1}
2、传递时用propsData进行传递。props:[‘a’]
3、用插值的形式写入模板。{{ a }}
此时页面上显示 I love u – 1314 传值成功
2. computed Option计算选项
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。
❤不污染原始数据的情况下，对原始数据的输出形式进行改动进而输出需要的格式和内容，在输出数据前可以轻松的改变数据。
我们先来做个读出价格的例子：一本书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。
主要的代码：
<div id="app">
{{newPrice}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
price:"100"
},
computed:{
newPrice:function(){
return this.price = "￥"+this.price+"元";
}
}
})
</script>
❤倒序排列
HTML代码
<div id="app">
<ul>
<li v-for="item in Wuxia">{{item.title}}-{{item.data}}</li>
</ul>
</div>
这个例子表示，我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。
javascript代码
<script type="text/javascript">
var newsList = [
{title:"飞雪连天射白鹿",date:"2017/11/16"},
{title:"笑书神侠倚碧鸳",date:"2017/11/17"},
{title:"金庸封笔古龙逝",date:"2017/11/17"},
{title:"江湖唯有英雄志",date:"2017/11/18"},
]
var app = new Vue({
el:"#app",
data:{
newsList:newsList
},
computed:{
Wuxia:function(){
return this.newsList.reverse();
}
}
})
</script>
页面输出顺序：
- 江湖唯有英雄志-
- 金庸封笔古龙逝-
- 笑书神侠倚碧鸳-
- 飞雪连天射白鹿-
3. Methods Option方法选项
一、methods中的传值
1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.
2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.
<div id="app">
{{a}}
<p><button @click="add(2)">add</button></p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
a:1
},
methods:{
add:function(num){
if(num!=""){
this.a+=num;
}else{
this.a++;
}
}
}
})
</script>
二、methods中的$event参数
传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。
传递：<button @click=”add(2,$event)”>add</button> 。
三、native 给组件绑定构造器里的原生事件。
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。
❤自定义的组件，放在构造器里，我们通过.native的方法进行调用
<div id="app">
{{a}}
<p><button @click="add(2,$event)">add</button></p>
<p><btn @click.native="add(3)"></btn></p>
</div>
<script type="text/javascript">
var btn = {
template:`<button>组件app</button>`
}
var app = new Vue({
el:"#app",
data:{
a:1
},
components:{
"btn":btn
},
methods:{
add:function(num){
if(num!=""){
this.a+=num;
}else{
this.a++;
}
console.log(event);
}
}
})
</script>
四、作用域外部调用构造器里的方法
❤等于是从div（vue）的外部通过onclick方法，调用app对象里面的
Add属性
<div id="app">
{{a}}
</div>
<button onclick="app.add(4)">外部add</button>
<script type="text/javascript">
var btn = {
template:`<button>组件app</button>`
}
var app = new Vue({
el:"#app",
data:{
a:1
},
components:{
"btn":btn
},
methods:{
add:function(num){
if(num!=""){
this.a+=num;
}else{
this.a++;
}
console.log(event);
}
}
})
</script>
4. Watch选项监控数据
数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。
Eg: 一个监控变化的案例
温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。
先来模拟一个温度变化的情况：我们使用按钮来加减温度。
<div id="app">
<p>今日温度：{{wendu}}</p>
<p>穿衣建议：{{tips}}</p>
<p><button @click="add">add温度</button></p>
<p><button @click="reduce">reduce温度</button></p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
wendu:14,
tips:"夹克"
},
methods:{
add:function(){
this.wendu+=5;
},
reduce:function(){
this.wendu-=5;
}
}
})
</script>
然后加入了根据温度(wendu)变化。穿衣指南提示（tips）也得到变化。
<div id="app">
<p>今日温度：{{wendu}}</p>
<p>穿衣建议：{{tips}}</p>
<p><button @click="add">add温度</button></p>
<p><button @click="reduce">reduce温度</button></p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
wendu:14,
tips:"穿个夹克吧老铁"
},
methods:{
add:function(){
this.wendu+=5;
},
reduce:function(){
this.wendu-=5;
}
},
watch:{
wendu:function(newVal,oldVal){
if(newVal>=26){
this.tips="可以换短袖了"
}else if(newVal<26&&newVal>13){
this.tips="穿个夹克吧老铁"
}else{
this.tips="羽绒服羽绒服~"
}
}
}
})
</script>
放在数组里的写法是：
<div id="app">
<p>今日温度：{{wendu}}</p>
<p>穿衣建议：{{tips}}</p>
<p><button @click="add">add温度</button></p>
<p><button @click="reduce">reduce温度</button></p>
</div>
<script type="text/javascript">
var tips2=["穿个夹克吧老铁","可以换短袖了","羽绒服羽绒服"]
var app = new Vue({
el:"#app",
data:{
wendu:14,
tips:"穿个夹克吧老铁"
},
methods:{
add:function(){
this.wendu+=5;
},
reduce:function(){
this.wendu-=5;
}
},
watch:{
wendu:function(newVal,oldVal){
if(newVal>=26){
this.tips=tips2[0]
}else if(newVal<26&&newVal>13){
this.tips=tips2[1]
}else{
this.tips=tips2[2]
}
}
}
})
</script>
用实例属性写watch监控【不在构造器里面，在构造器外写】
有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch写在构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
<div id="app">
<p>今日温度：{{wendu}}</p>
<p>穿衣建议：{{tips}}</p>
<p><button @click="add">add温度</button></p>
<p><button @click="reduce">reduce温度</button></p>
</div>
<script type="text/javascript">
var tips2=["穿个夹克吧老铁","可以换短袖了","羽绒服羽绒服"]
var app = new Vue({
el:"#app",
data:{
wendu:14,
tips:"穿个夹克吧老铁"
},
methods:{
add:function(){
this.wendu+=5;
},
reduce:function(){
this.wendu-=5;
}
},
})
app.$watch("wendu",function(newVal,oldVal){
if(newVal>=26){
this.tips=tips2[0]
}else if(newVal<26&&newVal>13){
this.tips=tips2[1]
}else{
this.tips=tips2[2]
}
})
</script>
5. Mixins混入选项操作
Mixins一般有两种用途：【把公用部分提取出来】【在需要的地方混入】
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
一、Mixins的基本用法
Eg:我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.
<div id="app">
{{num}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var addConsole={
updated:function(){
console.log("数据发生变化，变成了"+this.num);
}
};
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
})
</script>
二、mixins的调用顺序
我是全局的混入
构造器里的方法，数据发生变化，变成了2
我是原生的updated
我是全局的混入
构造器里的方法，数据发生变化，变成了3
我是原生的updated
从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
在上边的代码的构造器里我们也加入了updated的钩子函数：
三、全局API混入方式
我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：
Vue.mixin({
updated:function(){
console.log("我是全局的混入")
}
});
全部代码：
<div id="app">
{{num}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var addConsole={
updated:function(){
console.log("构造器里的方法，数据发生变化，变成了"+this.num);
}
};
Vue.mixin({
updated:function(){
console.log("我是全局的混入")
}
});
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
updated:function(){
console.log("我是原生的updated")
},
mixins:[addConsole]
})
</script>
全局混入的执行顺序要前于混入和构造器里的方法。
6. Extends Option扩展选项
<div id="app">
<!-- {{num}} -->
${ num }
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var extendsObj={
updated:function(){
console.log("我是扩展的updated");
},
methods:{
add:function(){
console.log("我是扩展的方法");
this.num++
}
}
}
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
console.log("我是原生的方法")
this.num++;
}
},
updated:function(){
console.log("我是原生的updated")
},
extends:extendsObj,
delimiters:['${','}']
})
</script>
</body>
</html>
delimiters 选项
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。
delimiters:['${','}']
现在插值形式就变成了${}。
