第二天_vue基础语法_Vue.js2.0+Node+ES6+MongoDB全栈系统学习

模板语法

      mustache语法: {{ msg }}   msg需要在data里面定义
      html赋值:   v-html=""
      绑定属性: v-bind:id=""
      使用表达式：{{ok?'yes':'no'}}
      文本赋值：v-text=""
      指令：v-if=""
      过滤器 {{msg | capitalize}} 和 v-bind:id="rawld | formatId"

class和style绑定

      对象语法：v-bind:class="{active : isActive,“tex-danger" : hasError }"
      数组语法：v-bind:class="[activeClass,errorClass]"
                       data:{
                                activeClass:'active',
                                errorClass:'tex-danger'
                          }

         style绑定-对象语法  v-bind:style="{color: activeColor,fontSize:fontSize+'px'}"
                       data:{
                                activeColor :'red',
                                fontSize:12
                          }

条件渲染

           v-if
           v-else
           v-else-if
           v-show
           v-cloak

vue事件处理器

           v-on:click='greet'或者 @click='greet'  //angluar 的 ng-click='aa()'
           v-on:click.stop   阻止默认事件
           v-on:click.stop.prevent  阻止默认事件，阻止冒泡
           v-on:click.self     点击自己才有效
           v-on:click.once     只绑定一次
           v-on:keyup.enter (enter/tab/delete/esc/sapce/up/down/left/right) 鼠标按下绑定指定按钮

vue组件

           全局组件和局部组件 
           父子组件通讯--数据传递  （emit （子 ->父 ） pass props（父->子））
           slot (插槽)

          组件的定义与使用
          定义：
           Vue.component('todo-item',{
               template: '
' //html 代码 
           });
           使用：
           
           

           组件接收到父作用域传递的数据
           定义：
           Vue.component('todo-item',{
               props：['todo']
               template: '
{{todo.text}}
' //html 代码 
           });
           使用：