Vue基础操作（新手看这章就对了）

目录

基础知识

了解Vue编写方式

创建hello word页面

data改为函数方式

指令

一、基础指令

二、单项数据绑定

三、双向数据绑定

事件绑定

在事件对应的方法中获取到事件对象

不加括号

加括号，加括号一般是需要有额外参数的情况

事件修饰符

阻止冒泡

使用原生js阻止冒泡

使用vue事件的修饰符阻止冒泡

阻止默认行为

使用原生js阻止冒泡

使用vue事件的修饰符阻止冒泡

一次事件

键盘事件修饰符

---

Vue官方网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

基础知识

对于我们初次学习，我们使用自行下载js的方式。

本次文章使用的是vue2.7.js版本，版本过低有些操作可能无法实现。

了解Vue编写方式

• 一个vue实例只能接管一个容器
• 插值语法：{{}}  可以读取到在data的所有属性

创建hello word页面

html代码

    
    
    
    


    

        {{message}}
    

js代码

el：用于指定当前vue实例为哪个容器使用，值为css选择器字符串

data：用于储存数据，数据供el指定的容器使用

结果

通过控制台修改数据

data改为函数方式

注意

以上的页面data中数据发生变化，那么在容器用到的数据会自动更新

data的写法，我们通常会写成函数的方式，代码如下：

data(){
    return {
        message: 'Hello world!',
    }
}

data为啥要写成函数？

Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。

指令

什么是指令？    

在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。

在html中是这样使用

在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。

一、基础指令

• v-text 不可解析html标签
• v-html 可解析html标签
• v-if 做元素的插入（append）和移除（remove）操作
• v-else-if
• v-else
• v-show display:none 和display：block的切换
• v-for 数组 item，index 对象 value，key ，index

指令综合实例 

    
    
    


    

        

        

        

        

        v-if 元素插入和移除
        

        测试v-if
        测试v-else-if
        测试v-else
        

        v-show 元素的显示和隐藏
        

        v-for 循环数组。这个指令写道哪个标签就循环哪个标签，可以显示数组内容和下标
        

            

                {{index}}-{{love}}
            
        
        v-for 循环对象。可以显示对象的key和value
        

            

                {{key}}:{{attr}}
            
        
        v-for 循环对象数组。可以显示对象的成员value
        

            

                {{index}}:{{u.username}}
            
        
        v-for 循环数字
        

            

                {{num}}
            
        
    

结果

 

二、单项数据绑定

v-bind指令可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）

v-bind:属性名 ="表达式"

简写形式 :属性名 ="表达式"

单项不能从前端传值到data中，只能从data把值传到前端

三、双向数据绑定

v-model指令能轻松实现表单输入和应用状态之间的双向绑定

v-model ="变量"

一般多用于表单获取和设置数据

    

       

           
           
           
               吃
               喝
           
           男
           女
       
    

事件绑定

事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"

事件名可以是原生也可以是自定义的。注意函数的定义也要在Vue中，采用methods属性

在事件对应的方法中获取到事件对象

不加括号

    

        点击获取事件对象
    

加括号，加括号一般是需要有额外参数的情况

    

        点击获取事件对象(带括号)
    

事件修饰符

阻止冒泡

冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件

使用原生js阻止冒泡

    

        

            外层div
            
里层div
        
    

使用vue事件的修饰符阻止冒泡

    

        

            外层div
            
里层div
        
    

阻止默认行为

有些标签是由默认行为的，比如a标签，有个默认的页面跳转。

使用原生js阻止冒泡

    

        百度
    

使用vue事件的修饰符阻止冒泡

    

        百度
    

一次事件

此事件只会执行一次，第二次点击无效

一次事件

键盘事件修饰符

键盘事件修饰符，主要筛选输入特定字符才触发。