JS数据类型
1、在 JavaScript 中有 5 种不同的数据类型：
string
number
boolean
object
function
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined
2、NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 Object。
3、undefined是一个只有一个值的数据类型，这个值就是'undefined'，在使用var声明变量但并没有对变量进行初始化的时候，这个变量的值就是undefined。
4、null和undefined一样，是一个只有一个值的js数据类型，它的值就是null，表示一个空指针对象，它用typeof检测后的结果是object。
5、NaN 与所有值都不相等，包括它自己。
6、null = = undefined
true
"NaN" = = NaN
false
5 = = NaN
false
NaN = = NaN
false
NaN != NaN
true
false = =0
true
true = =1
true
true = = 2
false
undefined = = 0
false
null = = 0
false
"5" = = 5
true
7、“=”：这个表示赋值，不是表示运算符
“==”：表示等于(值)
“===”：表示全等于（类型和值）
计算属性
<div id="example">
<input type="text" v-model="didi" name="">
<input type="text" v-model="family" name="">
<br>
didi = {{ didi }}, family = {{ family }}, didiFamily = {{ didiFamily }}
</div>
<script>
var vm = new Vue ({
el: '#example',
data: {
didi:'didi',
family: 'family'
},
computed: {
didiFamily: function () {
return this.didi + this.family
}
}
})
</script>
<div class="app">
<button @click="toggleShow">Toggle Show Total Price</button>
<p v-if="showTotal">Total Price = {{totalPrices}}</p>
{{totalPrices}}
</div>
<script src="vue1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '.app',
data: {
showTotal: true,
basePrice: 100
},
computed: {
totalPrices: function () {
return this.basePrice + 1;
}
},
methods: {
toggleShow: function () {
this.showTotal = !this.showTotal;
}
}
});
</script>
表单控件
<div id="app">
<input type="checkbox" id="flash" value="flash" v-model="bizLines" />
<label for="flash">A</label>
<input type="checkbox" id="premium" value="premium" v-model="bizLines" />
<label for="premium">B</label>
<p>Checked lines: {{bizLines | json}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
bizLines: []
},
ready: function() {
console.log( this.bizLines );
}
});
</script>
<div id="app">
<select v-model="bizLine">
<option v-for="option in options" :value="option.value"></option>
{{option.value}} {{option.premium}}
</select>
<p>bizLine: {{bizLine}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
bizLine: 'falsh',
options: [
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
}
});
</script>
值绑定
checkbox 使用 :value 进行绑定
<input type="checkbox" id="falsh" :value="flash" v-model="bizLines" />
<label for="falsh"></label>
过滤器
过滤器，本质上都是函数，其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。
<span v-text="message | uppercase"></span>
过滤器可以接收参数，参数跟在过滤器后面，参数之间以空格分隔。
<p>{{msg | filterFunction 'arg1' arg2}}</p>
