var vm = new Vue({
el: '#app', //选取数据要挂载的范围 querySelector
data: {
message: 'Hello World'
})
{{}}将模型的数据显示在页面上
<!--支持三元表达式-->
{{ message ? message : 'init data' }}
{{*}}首次绑定数据后，不随数据变化（绑定一次）
<!--只绑定一次 视图变化时不再变化-->
{{ *message }}
{{{}}} 将html类型的数据正常绑定到页面上
{{{ message }}} //message :'<h1>Hello</h1>'
在示例创建后加载以前不存在的属性是不会刷新视图的
var mess = {
name: 'he'
};
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
});
//当前实例vm和mess这个对象只想同意内存空间
vm.message.name = 100;
//在实例创建后挂载以前不存在的属性是不会刷新视图的
mess.age = 100;
// vm.$set Vue.set
alert(vm.message == mess);//true
$data可以直接更改对象指定
//vm.$data 就是data对应的这个对象
vm.$data = { age: 10};
vm.$el 不能更改绑定数据的元素
vm.$el = document.getElementById('app1');
computed 计算属性
computed:{
sum: function(){//默认调get方法
//在vm中所有的this只想的都是当前实例
return this.message + 10;
}
count:{
get(){
return this.price*2;
},
set(val){
this.price = 40;
}
}
}
变量闪烁问题
css代码
/*属性选择器 [属性名]*/
[v-cloak] :display:none;
/*vue加载完该属性会被移除*/
html代码
<div id="app">
<!-- Vue编译完成之前{{message}}已字符串显示在页面 编译完后才被替换-->
<!-- v-text 、v-bind 等可以解决单个标签的闪烁问题-->
{{message}}
<!-- v-cloak 可以解决多级数据闪烁问题-->
<div v-cloak>{{message}}</div>
</div>
v-show 与v-if的区别
v-show 操作的是样式 频繁切换
v-if 操作的是DOM
<!-- 多了一个空的div -->
<div v-if='true'>
<div>hello</div>
</div>
<!-- template 不会被渲染 只有v-if支持template v-show不支持template-->
<template v-if='true'>
<div>hello</div>
<div>world</div>
</template>
<!-- v-else要紧跟在v-if后面 也可以跟在v-show 后面-->
<div v-else>
i love you
</div>
遍历对象
message: {
name: 'zq',
age: 9
}
<template v-for ='val in message'>
{{$key}} : {{val }}
</template>
//结果：name:aq age:9
<template v-for ='(key , val) in message'>
{{$index}}{{key}} : {{$key}} : {{val }}<br>
<!--$index 索引 从0开始 $odd $even $first $last-->
</template>
/*结果：
0name:name:aq
1age:age:9
*/
遍历数组
message: [
{name: 'zfpx', type: ['backbone']},
{name: 'zfpx', type: ['jquery','react','angular']},
{name: 'zfpx', type: ['nodejs','angularjs',vuejs']}
]
<template v-for ='mes in message'>
{{$index}} : {{mes .name}} : {{mes .type}}<br>
</template>
<template v-for ='(key,value) in message'>
{{key}} : {{value .name}} : {{value .type}}<br>
</template>
嵌套循环
<template v-for ='(key,value) in message'>
<template v-for ='(childKey,t) in value.type'>
{{key}} : {{childKey}} : {{t}}<br>
</template>
</template>
遍历数组中相同的项 如果没有唯一的键供追踪 尽量使用track-by (如果没有 开发版会给出warn)
message: [
'苹果' ,'苹果', '苹果', '苹果'
]
<template v-for ='(key,value) in message' track-by="$index">
{{value}}<br>
</template>
