一、什么是VUE？

它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

二、怎么使用VUE？

1、引入vue.js

2、展示HTML

     
    
      
{
   {msg}}
    
      
{
   { 80+2 }}
    
      
{
   { 20>30 }}
    
      
    
      
    
      
     

3、建立一个vue对象

三、数据绑定

1、插入文本{

{ }}。如上例，也可以放表达式

2、插入html：v-html

四、vue的指令

指令：是带有v-前缀的特殊属性，通过属性来操作元素

1、v-text：在元素当中插入值

    
          
          
              
      
    
       
{
    {msg}}
    
       
{
    { 80+2 }}
    
       
{
    { 20>30 }}
    
       
    
       
    
       
      

2、v-html：在元素当中不仅可以插入文本，还可以插入标签

    
          
          
              
      
    
       
问卷调查
    
       
        
        香蕉        
        苹果        
        橘子        
        其他        
        
    
       
      

3、v-if和v-else：根据表达式的真假值来动态插入和移除元素

4、v-show：根据表达式的真假值来显示和隐藏元素

    
          
          
              
      
    
       
我是海燕
    
       
呼啦啦呼啦啦
    
       
你喜欢我吗?
      
if-show示例

5、v-for：根据变量的值来循环渲染元素

    
          
          
                      
      
       
       
           
        
   
                        {
     { item }}           
       
       
         
       
           
        
               {
     { item }}:{
     {index}}           
       
       
         
       
           
        
               {
     { item }}           
       
       
          
       
           
        
               {
     { item }}:{
     { key }}:{
     { index }}           
       
       
          
       
           
        
               {
     { item.username }}               {
     { item.age }}               {
     { item.sex }}           
       
       
        
       
  
                    {
     { i }}        
       
    
      
    

6、v-on：监听元素事件，并执行相应的操作

    
          
          
                      
      
       
       
           
        
   
                        {
     { item }}           
       
       
         
       
           
        
               {
     { item }}:{
     {index}}           
       
       
         
       
           
        
               {
     { item }}           
       
       
          
       
           
        
               {
     { item }}:{
     { key }}:{
     { index }}           
       
       
        
               
               
               
       我想去百度        
       我想去百度        
       我想去百度    
      
    

6、v-bind：绑定元素的属性并执行相应的操作

    
          
          
                      
      
        
       腾讯   
               
       点我   
               
       
        
       
        
       
        加油,吧
       
  
               
       
 
           
      
    

7、v-model：把input的值和变量绑定了，实现了数据和视图的双向绑定

    
          
          
              
      
    
           
           
       
{
    {msg}}
    
       
      

8、对数组的操作

- push  #从末尾添加    - pop  #从末尾删除    - shift #从头添加    - unshift #从头删除    - splice #删除元素。splice(index,1)  #删除这个索引的那一个    - reverse  #反转

五、自定义指令

六、实现tag切换的小示例

    
          
          
                  
      
    
       
        
        
二维码登录
        
        
邮箱登录
    
       
    
       
        
            
       
    
       
  
                
        
            
                     
         
邮箱：
            
         
密码：