Vue基础

目录

1 基础语法

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model

2 简单应用

2.1 计数器

2.1.1所用知识

2.1.2代码及结果展示

​编辑

2.2图片切换

2.2.1所用知识

2.2.2代码及结果展示

2.3 网页记事本

2.3.1所用知识

2.3.2代码及结果展示

1 基础语法

v-text

设置标签的内容（要替换部分字符用差值表达式{{}}）

v-html

可以存放纯文本，内容中有html结构会被解析为标签

v-on

为元素绑定事件，事件名不需要写on,可以简写指令为@

事件后跟上.修饰符可以对事件进行限制

v-show

根据真假切换元素的显示和隐藏，指令后面的内容会被解析为bool值

注：也可以直接在式子中用bool式（如

age>18" v-text="star" >

）

v-if

用法跟v-show一样，但是v-if修改的是dom元素（dom树中元素的移除/添加），对资源消耗较大

v-bind

设置元素的属性，可简写为 :属性

v-for

根据数据生成列表结构 ，数组常和v-for结合使用，语法一般为(i ,index) in 数据

v-model

获取和设置表单元素的值（双向数据绑定，同步更新值）

2 简单应用

2.1 计数器

2.1.1所用知识

（1）el(挂载点)，data(数据)，methods(方法)

（2）v-on指令作为绑定事件，简写为@

（3）通过this关键字获取data数据

2.1.2代码及结果展示

  
    
    
    
  
  
    

      
        -
      
      {{num}}
      
        +
      
    
    
    
    
  

2.2图片切换

2.2.1所用知识

列表数据用数组保存

2.2.2代码及结果展示

  
    
    
    
  
  
    

      

        I K U N
      
      
    
      
      

      
      
    
      
        
      
    
 

    
   
    
  

2.3 网页记事本

2.3.1所用知识

1.v-for将数组和列表进行关联，向数组中添加内容实现元素的新增

2.索引结合事件传参实现删除

3.数组的长度通过v-test相关指令渲染到页面上

4.所绑定的数组消失，即为清空

5.列表没有数据时隐藏

2.3.2代码及结果展示

  
    
    
    
  
  
    
记事本
    

      
      

        

          
          {{index+1}}
          
          
            {{item}}
          
                    
        
        
      
      
      
{{list.length}}个事件