vue的简单使用1

最新推荐文章于 2022-04-12 14:25:25 发布

星月昭铭

最新推荐文章于 2022-04-12 14:25:25 发布

阅读量207

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43373239/article/details/89711717

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

vue的简单使用1

最近在看vue，所以就把自己写的笔记上传一下。

Vue中的属性

el 需要控制的区域，如果是id就要加#，class就加.
data是属性就是放数据的地方

还有个methods，是放函数的地方

let vue1 = new Vue({
            el: '#vueH',
            data : {
                "name":"你好呀 骚年",
                "age":"20"
            }
        });

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/vue.js"></script>
</head>
<body>
    <div id="vueH">
        {{name}}
    </div>
    <script>
        let vue1 = new Vue({
            el: '#vueH',
            data : {
                "name":"你好呀 骚年",
                "age":"20"
            }
        });
    </script>
</body>
</html>

插值表达式{{}}

Vue指令注意：写缩写不要加’:'号

v-cloak
v-text
v-html

v-bind------绑定属性缩写‘:’ 这里是单项绑定

<input type="button" value="按钮" v-bind:title="title"/>

v-on-------绑定事件缩写@

<input type="button" value="按钮" v-on:click="show"/>


methods: {
            show: function () {
                alert("鸡太美");
            }
        }

v-model-------双向绑定后面详细讲解

例子：跑马灯

<body>
<div id="houseLamp">
    <button v-on:click="start">骚起来</button>
    <button v-on:click="stop">停止</button>
    <p>{{lamp}}</p>
</div>
<script>
    new Vue({
        el: '#houseLamp',
        data: {
            lamp: "这跑马灯真骚气！！！！"
        },
        methods: {
            start: function () {
                _this = this;
                //设置一个定时器 每隔300毫秒运行一次
                inter = setInterval(function () {
                    let last = _this.lamp.substring(0, 1);
                    let first = _this.lamp.substring(1);
                    //当data中的数据被修改时，vue会自动修改控制域中的值
                    _this.lamp = first + last;
                }, 300);
            },
            stop: function () {
                //清除定时器
                clearInterval(inter);
            }
        }
    })
</script>
</body>

v-if v-if 指令将根据表达式的值(true 或 false )来决定是否插入 DOM元素

<body>
<div id="head">
    <p v-if="bool">我是谁</p>
    <p>我来自上古时期</p>
</div>
<script>
    //如果bool的值为false，则‘我是谁’将不会显示
    var vue1 = new Vue({
        el: '#head',
        data: {
            bool: true
        }
    });
</script>
</body>

Vue事件处理器

事件监听可以使用v-on指令（缩写@）

事件修饰符

Vue.js通过由点(.)表示的指令后缀来调用修饰符

.stop 使用此修饰符的元素发生事件将不会传递给父元素(冒泡)
.prevent 阻止默认行为例如点击标签后不会跳转
.capture 添加事件侦听器时使用事件捕获模式(捕获事件就是触发子元素的事件时会先触发父元素的事件)
.self 事件只能由自己触发

.once 事件只执行一次 once:一次

<!-- 阻止单击事件冒泡	所谓的冒泡就是如果子元素和父元素都定义了单击事件，那么当子元素发生单击事件时，父元素也会触发单击事件，会一层一层往上传递 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面  阻止默认行为  例如点击<a>标签后不会跳转 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

v-model指令

双向绑定就是视图层（V）的数据和模型层（M）相互绑定，当模型层中的数据发生改变时视图层也会改变，反之亦然， v-model指令只能在表单（select, input…）元素中使用。

<body>
    <div id="head">
        <p>{{msg}}</p>
        <input v-model="msg">
    </div>

    <script>
        let vue1 = new Vue({
           el: "#head",
           data: {
               msg: "你好呀 外星人 我是斯魔坦星的人"
           }
        });
    </script>
</body>

一个简单的计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/vue.js"></script>
</head>
<body>
<div id="head">
    <input placeholder="数1" v-model="number1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input placeholder="数2" v-model="number2">
    <button @click="count">=</button>
    <input disabled="disabled" v-bind:value="result">
</div>
<script>
    let vue1 = new Vue({
        el: "#head",
        data: {
            number1: null,
            number2: null,
            result: null,
            opt: "+"
        },
        methods: {
            count() {
                //记得转成数字 否者'+'号会是字符串连接符
                n1 = parseInt(this.number1);
                n2 = parseInt(this.number2);
                switch (this.opt) {
                    case "+":
                        this.result = n1 + n2;
                        break;
                    case "-":
                        this.result = n1 - n2;
                        break;
                    case "*":
                        this.result = n1 * n2;
                        break;
                    case "/":
                        this.result = n1 / n2;
                        break;
                }
            }
        }
    });
</script>
</body>
</html>