在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

​

console.log(vm.$el)     # #box  vm对象可以控制的范围

console.log(vm.$data);  # vm对象要显示到页面中的数据

console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

双标签中显示数据要通过{{  }}来完成（支持js代码）

在表单输入框中显示数据要使用v-model来完成

（使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变）

​

如果要输出html代码，要使用v-html来输出（v-html必须在html标签里面作为属性写出来.）

vue1.x写法             vue2.x的写法

v-html         ---->   {{  }}

v-bind:属性名   ---->   :属性

v-on:事件名     ---->   @事件名

标签名>

淘宝

@事件名 和 v-on:事件名

按钮   

按钮2

小结：

1. 使用@事件名来进行事件的绑定

   语法：

      
{{num}}

​

2. 绑定的事件的事件名，全部都是js的事件名：

   @submit   --->  onsubmit

   @focus    --->  onfocus

控制标签class类名

格式：

   
元素
  值可以是对象、对象名、数组

控制标签style样式

格式：

   
元素
  值可以是对象、对象名、数组

v-if

标签元素：

Yes

data数据：

data:{

    ok:false    // true则是显示，false是隐藏

}

v-else

​

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  标签元素：

Yes

No

  data数据：

  data:{

      ok:false    // true则是显示，false是隐藏

      }

v-else-if

​

   标签元素：

num的值为1

num的值为2

    
num的值是{{num}}

  data数据：

  data:{

      num:2

      }

v-show

用法和v-if大致一样，区别在于2点：

1. v-show后面不能v-else

2. v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ] 

  标签元素：

Hello!

  data数据：

  data:{

      ok:false    // true则是显示，false是隐藏

      }