Vue（一）——快速上手+事件

chengyupo4711

于 2019-05-19 23:08:00 发布

阅读量59

点赞数

原文链接：https://my.oschina.net/u/4116631/blog/3051481

版权

一、快速上手：el，data，methods以及data-binding

1.新建空白项目，创建index.html，style.css，app.js三个文件

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银烛秋光冷画屏</title>
    <!--<script src="https://unpkg.com/vue"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="vue-app">
        <!--普通data取值-->
        <p>{{name}}</p>
        <p>{{job}}</p>
        <!--methods方法-->
        <h1>{{greet('afternoon')}}</h1>
        <!--属性绑定-->
        <a v-bind:href="website">web开发</a>
        <input type="text" v-bind:value="job">
        <!--属性绑定：html标签-->
        <p v-html="websiteTag"></p>
    </div>
    <script src="app.js"></script>
</body>
</html>

3.app.js

new Vue({
    el:'#vue-app',
    data:{
        name:'mr.wu',
        job:'web开发',
        website:'https://www.bilibili.com/video/av44699553/?p=5',
        websiteTag:"<a href='https://www.bilibili.com/video/av44699553/?p=5'>web开发</a>"
    },
    methods:{
        greet:function (time) {
            return 'good '+time+" "+this.name;
        }
    }
});

二、事件：@click，@dblclick，v-on:mousemove

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银烛秋光冷画屏</title>
    <!--<script src="https://unpkg.com/vue"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="vue-app">
        <h1>Event</h1>

        <!--单机事件-->
        <button @click="add(1)">单击加一岁</button>
        <button v-on:click="subtract(1)">单击减一岁</button>

        <!--双击事件-->
        <button @dblclick="add(1)">双击加一岁</button>
        <button v-on:dblclick="subtract(1)">双击减一岁</button>

        <!--单机传入参数不同-->
        <button @click="add(10)">单击加10岁</button>
        <button v-on:click="subtract(10)">单击减10岁</button>
        <p>my age is {{age}}</p>

        <!--鼠标移动事件，获取鼠标移动偏移量-->
        <div id="canvas" v-on:mousemove="updateXY">
            {{x}},{{y}}
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

2.style.css

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

3.app.js

new Vue({
    el:'#vue-app',
    data:{
        age:30,
        x:0,
        y:0
    },
    methods:{
        add:function (inc) {
            this.age += inc;
        },
        subtract:function (desc) {
            this.age -= desc;
        },
        updateXY:function (event) {
            // console.log(event);//event事件包含了offsetX，offsetY属性
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
});

转载于:https://my.oschina.net/u/4116631/blog/3051481

chengyupo4711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（一）——快速上手+事件

一、快速上手：el，data，methods以及data-binding 1.新建空白项目，创建index.html，style.css，app.js三个文件 2.index.html <!DOCTYPE html><html lang="en"><...
复制链接

扫一扫