1，感谢

2，第一个实例

     
     
  
      
{
   { message }}
     

3，看vue.js的数据结构

    
                 
     
        
      
site : {
   {site}}
    //注意此时的site用了两个大括号        
      
url : {
   {url}}
        
      
{
   {details()}}
    
     
    

    data和dom中的内容是同步的：

    
                 
     
        
      
site : {
   {site}}
    
     
    

4，Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简言之就是它很底层很快。

我们的插值{

{}}可以有如下用法：

a,插入文本，上面的例子就是插入了文本

b,插入html元素：

     
    
      
    //插值写入以后相当于是这样的结构：
      
       
菜鸟教程
      
     
    

c,属性：

<div v-bind:class="{active: isActive}"></div>，比如如果 这里 isActive 的值为 true 则会被渲染成 class='active' 如果为 false , 则 不会存在。

     
  
      修改颜色
          //据说v-model是双向的，而v-bind是单向的，选中了以后，data.use的值估计会变成true，然后v-bind的class就成了具有class1属性  
      
      
  
      
           //如果use的值为true，那就会被渲染成这个div的class=class1，至于为什么没有套上两层大括号，估计是约定俗成    v-bind:class 指令  
      
     

 d,表达式

vuejs在html页面上可以直接运算的，相当于直接在元素内写程序了

     
          {
    {
    5+5}}
      
    //10    {
   { ok ? 'YES' : 'NO' }}
      
    //yes    {
   { message.split('').reverse().join('') }}    //gniad    
      
       啦啦啦
      
    //这个div具有list-1的id属性
     

e，指令

带有v-前缀的是特殊属性，比如v-if表示是否插入这个元素，true表示是。

     
    
      
现在你看到我了
   //seen是false的话看不到p元素    
      
     
    

f,参数

     
      
菜鸟教程
    //v-bind后面‘url'是从data.url里同步过来的哦，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
     

另外， v-on 指令也可以关注一下，它是监听事件：<a v-on:click="doSomething">

g,用户输入

     
    
      
{
   { message }}
    
          //这里会把用户输入当成message传到data中，然后再通过插值放到p元素中
     

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定

h，监听事件

     
    
      
{
   { message }}
    //此处同步的是data.message的值    
      反转字符串    //此处不可用οnclick=“function”这样的写法，因为reverseMessage不是一个function，而是约等于一个类方法
     
    

l,过滤

     
        {
    { message | capitalize }}    //使用capitalize对前面的message进行过滤，中间隔着管道符号
     
    

m,缩写：

常用缩写：

 缩写为：

缩写为：

5，条件语句

v-if指令：

     
      
现在你看到我了
      
     

if和else

     
    
      
             显示if的div    
      
    
      
             显示else的div    
      
     
    

if...else if...else...

     
    
      
             A    
      
    
      
             B    
      
    
      
             C    
      
    
      
             Not A/B/C    
      
     
    

 v-show为true就显示div，为false就不显示

     
    
      
Hello!
     
    

6，循环语句

v-for表示循环：循环data里的内容

     
  
      
    
       
    //注意这个语法      {
    { i.name }}    
  
      
     

迭代对象：

     
  
      
    
       
    //注意哦，此处的object在data内部    {
   { key }} : {
   { value }}    //value和key都会打印出来，很像class    
  
      
     

迭代整数：

     
  
      
    
       
    //返回1到10（包括10）     {
    { n }}    
  
      
     

7，计算属性

直接在插值中写运算代码：

     
        {
    { message.split('').reverse().join('') }}    //反转字符串
     

但是也可以通过computed属性来写：

     
  
      
原始字符串: {
   { message }}
  
      
计算后反转字符串: {
   { reversedMessage }}
   //指向的是computed里的function
     
 

computed属性和method方法：

效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。性能上来说的话computed会更好一点

     
  
      
原始字符串: {
   { message }}
  
      
计算后反转字符串: {
   { reversedMessage }}
  
      
使用方法后反转字符串: {
   { reversedMessage2() }}