Vue基础API使用-el和data的使用、Methods、v-bind属性绑定、v-on事件绑定、事件修饰符、键盘事件、v-model、ref获取元、watch监听data、computed计算属性

最新推荐文章于 2024-06-06 00:22:00 发布

NeilNiu

最新推荐文章于 2024-06-06 00:22:00 发布

阅读量882

点赞数

分类专栏： Vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_30353203/article/details/121714132

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

创建一个vue-basic-cdn文件夹然后导入到vscode中，新建三个文件，index.html，app.js，styles.css 。

一、el和data的使用

el的含义是这个vue实例要操作哪一个元素的对象，#号是id定位方式，class的定位方式是.

data 返回的是一个对象需要，return，对象里面的可以在index.html中使用，但是只能在el指定的容器中使用

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            name: 'testor',
            age: '20'
        }
    }

})

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
        <h1>Hello,{{name}}</h1>
        <p>我的年龄是：{{age}}</p>
    </div>

    

</body>

<script src="app.js"></script>

</html>

二、methods方法的使用

在app.js里添加一个methods，在这里面写方法，并且可以传参数

return 使用反引号``，引用变量属性使用${}

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            name: 'testor',
            age: '20'
        }
    },
    methods: {
        greet(time) {
            return `Good ${time} ${this.name}`
        },
        haveLunch() {
            return `吃过午饭了吗？`;
        }

    }

})

三、v-bind属性绑定

只要标签里的属性上加上 v-bind，这个属性就可以获取到vue实例里data的值

v-bind：有一个简写的方式，可以只写冒号:

v-html=

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
        <h1>Data binding</h1>
        <h1>Hello,{{name}}</h1>
        <p>我的年龄是：{{age}}</p>
        <p>{{ greet('morning') }}</p>
        <p>{{ haveLunch() }}</p>
        <p>
            <a v-bind:href="website">baidu</a>
        </p>
        <p v-html="websiteTag"></p>
        <p><input type="text" v-bind:value="name" /></p>

    </div>
</body>

<script src="app.js"></script>

</html>

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            name: 'testor',
            age: '20',
            website: 'https://www.baidu.com'
            websiteTag: '<a href="https://www.taobao.com">taobao</a>'
        }
    },
    methods: {
        greet(time) {
            return `Good ${time} ${this.name}`
        },
        haveLunch() {
            return `吃过午饭了吗？`;
        }

    }

})

四、v-on事件绑定

点击事件

双击事件

鼠标事件

v-on:click="add(1)"

@click="subtract(1)"

这样的写法，可以传参

双击用

v-on:dblclick="add()"

@dblclick="subtract()"

鼠标事件，这个方法不能写（）

v-on:mousemove="updateXY"

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>Events</h1>
        <button v-on:click="add(1)">add age +1</button>
        <button @click="subtract(1)">subtract age -1</button>
        <button v-on:dblclick="add(10)">add age +10</button>
        <button @dblclick="subtract(10)">subtract age -10</button>
        <p>{{age}}</p>

        <div id="canvas" v-on:mousemove="updatXY">
            {{x}},{{y}}
        </div>
    </div>
</body>

<script src="app.js"></script>

</html>

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            name: 'testor',
            age: '20',
            x: 0,
            y: 0
        }
    },
    methods: {
        greet(time) {
            return `Good ${time} ${this.name}`
        },
        haveLunch() {
            return `吃过午饭了吗？`;
        },
        add(inc) {
            this.age += inc;
        },
        subtract(dec) {
            this.age -= dec;
        },
        updatXY(event) {
            console.log(event)
            this.x = event.offsetX
            this.y = event.offsetY
        }


    }

})

#canvas{
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 1px solid #333
}

五、事件修饰符

在事件上加上修饰符，例如v-on:click.once=""就是请求这个方法，只有第一次是生效的

v-on:click.prevent=""，

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>Events</h1>
        <button v-on:click.once="add(1)">add age +1</button>
        <button @click="subtract(1)">subtract age -1</button>
        <button v-on:dblclick="add(10)">add age +10</button>
        <button @dblclick="subtract(10)">subtract age -10</button>
        <p>{{age}}</p>
        <!-- 鼠标事件 -->
        <div id="canvas" v-on:mousemove="updatXY">
            {{x}},{{y}}
        </div>
        <!-- 事件修饰符，只有alert弹窗了，不跳转百度了 -->
        <a v-on:click.prevent="handleClick()" href="https://www.baidu.com">百度</a>
    </div>
</body>

<script src="app.js"></script>

</html>

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            name: 'testor',
            age: '20',
            x: 0,
            y: 0
        }
    },
    methods: {
        greet(time) {
            return `Good ${time} ${this.name}`
        },
        haveLunch() {
            return `吃过午饭了吗？`;
        },
        add(inc) {
            this.age += inc;
        },
        subtract(dec) {
            this.age -= dec;
        },
        updatXY(event) {
            console.log(event)
            this.x = event.offsetX
            this.y = event.offsetY
        },
        handleClick() {
            alert("确定");
        }


    }

})

六、键盘事件

v-on:keyup，加事件修饰符,enter ，每次点enter后才出发这个方法

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
        <h1>Events</h1>
        <label>姓名</label>
        <input type="text" v-on:keydown="logName" />

        <label>年龄</label>
        <input type="text" v-on:keyup="logAge" />

    </div>
</body>

<script src="app.js"></script>

</html>

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 31
        }
    },
    methods: {
        logName() {
            console.log('正在输入名字.....');
        },
        logAge() {
            console.log('正在输入年龄');
        }
    }
})

七、v-mode 双向数据绑定

只能在三个标签使用，input、select、textarea，需要有输入，同时还有输出

写法如下

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
        <h1>双向数据绑定 /input /select /textarea</h1>
        <label>姓名</label>
        <input type="text" v-model.lazy="name" />
        <span>{{ name}}</span>
        <label>年龄</label>
        <input type="text" v-model="age" />
        <span>{{ age }}</span>

     

    </div>
</body>

<script src="app.js"></script>

</html>

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 31
        }
    },
    methods: {
        
    }
})

现象如下

八、ref的使用，绑定到元素上，可以通过refs获取元素对象

ref可以绑定到一个元素上，然后就可以获取这个元素对象，

例如拿到input标签的值

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
     
        <h1>ref</h1>
        <label> 姓名</label>
        <input type="text" ref="name" v-on:keyup="getName" />
        <span>{{ name }}</span>
        <label>年龄</label>
        <input type="text" ref="age" v-on:keyup="getAge" />
        <span>{{ age }}</span>
    </div>
</body>

<script src="app.js"></script>

</html>

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 31
        }
    },
    methods: {
        logName() {
            console.log('正在输入名字.....');
        },
        logAge() {
            console.log('正在输入年龄');
        },
        getName() {
            console.log(this.$refs.name.value)
            this.name = this.$refs.name.value
        },
        getAge() {
            console.log(this.$refs.age.value)
            this.age = this.$refs.age.value
        }
    }
})

九、watch，一般的时候不建议使用，耗费性能，但是如果是为了调试可以使用

watch就是可以监听，data里的值

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 31
        }
    },
    methods: {
       
    },
    watch: {
        name(val, oldVal) {
            console.log(val, oldVal)
        },
        age(val, oldVal) {
            console.log(val, oldVal)
        }
    }
})

十、computed，计算属性

methods里的方法是有一个值有变化了，其他的方法都运行，为了解决这个问题，使用computed计算属性，只对有变化的值，进行计算。

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app">
       
        <h1>computer计算属性</h1>
        <button @click="a++">add to a</button>
        <button @click="b++">add to b</button>
        <p>{{ a }}</p>
        <p>{{ b }}</p>
        <p>Age + a ={{ ageToA }} </p>
        <p>Age + b ={{ ageToB }}</p>
    </div>
</body>

<script src="app.js"></script>

</html>

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 31,
            a: 0,
            b: 0
        }
    },
    methods: {
       
    },
    watch: {
       
    },
    computed: {
        ageToA() {
            console.log(this.a + this.age);
            return this.a + this.age;
        },
        ageToB() {
            console.log(this.b + this.age);
            return this.b + this.age;
        }
    }
})

NeilNiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础API使用-el和data的使用、Methods、v-bind属性绑定、v-on事件绑定、事件修饰符、键盘事件、v-model、ref获取元、watch监听data、computed计算属性

创建一个vue-basic-cdn文件夹然后导入到vscode中，新建三个文件，index.html，app.js，styles.css。一、el和data的使用el的含义是这个vue实例要操作哪一个元素的对象，#号是id定位方式，class的定位方式是.data 返回的是一个对象需要，return，对象里面的可以在index.html中使用，但是只能在el指定的容器中使用//实例化Vue对象new Vue({ el: "#vue-app",//element 含义是vue实..
复制链接

扫一扫