Vue Day01

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>

Vue Day01

推荐阅读更多精彩内容