vue初体验复习

 一.创建Vue

1.导入vue.js

2.创建vue作用域，设置id

3.创建一个Vue对象

4.给vue绑定作用域

二.vue计数器

在methods：里写方法

两种方法创建方式：

methods{
    方法名：function(){
        方法体
    },
    方法名(){
        方法体
    }
}

为button绑定点击方法：v-on：click

三.Mustache语法

1.数据绑定最常见的方式就是Mustache语法：(双大括号“{{}}”）

<h2>{{message}}</h2>

双括号里可以使用常见的算数运算和三目运算符，也可以进行字符串拼接

2.v-once

v-once所定义的元素组件只会渲染一次，首次渲染后不会再根据数据的改变而重新渲染

3.v-text

v-text将数据以文本样式填充到标签中，为单向绑定

4.v-html

v-html会将HTML标签解析后输出

5.v-pro

跳过编译的过程直接显示元素内部的内容

6.v-cloak

v-cloak指令的作用是Vue示例渲染失败后不显示该块内容

四.v-bind动态绑定属性

语法糖为   " : "

  v-bind用于绑定一个或多个属性值

<h2 v-bind:class="color">{{message}}</h2>

  在vue中允许有一个普通的class 和一个 绑定class 最终类会合并一个

<h2 class="red green" v-bind:class="getColors()">{{message}}</h2>

v-bind 绑定class的几种方法：

1.对象形势：可以给v-bind:class设置一个对象来动态的切换class

<h2 v-bind:class="{'size':f,'wei':x}">{{message}}</h2>

 data:{
        message:'hello vue!',
        f:true,
        x:true
      }

2.数组语法

<h2 v-bind:class="[f,x]">{{message}}</h2>

data:{
        message:'hello vue!',
        f:'size',
        x:'wei'
      },

3.直接绑定class

<h2 v-bind:class="color">{{message}}</h2>

data:{
        message:'hello vue!',
        /*可操作的数据*/
        color:'bande'
      }

4.绑定方法

<h2 v-bind:class="getColors()">{{message}}</h2>

methods:{
        getColors:function () {
          /*return {'size':this.f,'wei':this.x}*/
          return ['size','wei']
        }
      }