【Vue】零基础学习Vue: 第3课 vue的基本使用

vue的基本操作：

  
   给标签定义vue 
  


  
  

  
  
  
    new Vue({
      el:"#app",  //获取元素 也可以通过className来获取
      data:{},    //data内存放vue的变量
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  
  

vue的数据显示：

使用双大括号“ {{}} ”的形式 可以输出 Vue内data定义的变量

  
  

    姓名：{{xm}} 性别：{{age}} 年龄: {{age}} 
  

  
    new Vue({
      el:"#app",  //获取元素
      data:{      //data内存放vue的变量
        xm:"小明",
        sex:"男",
        age:"18"
      },    
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  

上面运行结果入下图显示：

姓名：小明 性别：18 年龄: 18

{{ }}内也能运行一些js代码: 如：{{}}内放自执行函数 

 
  

    {{ (function(){return "姓名：小明"})() }}
  

运行结果如下：

姓名：小明

如一些js方法:

    {{ [1,2,3,4].toString() }}
  

运行结果如下：

1,2,3,4