vue的基本使用页面渲染(v-text、v-html)和相关指令v-on、v-bind、和v-model的双向数据绑定

最新推荐文章于 2022-10-06 21:04:23 发布

面对疾风ba

最新推荐文章于 2022-10-06 21:04:23 发布

阅读量594

点赞数

分类专栏： vue学习笔记文章标签： vue html

本文链接：https://blog.csdn.net/u011608672/article/details/113936150

版权

vue学习笔记专栏收录该内容

36 篇文章 5 订阅

订阅专栏

vue官网
https://cn.vuejs.org/v2/guide/

Vue之 - `基本的代码结构`和`插值表达式`

直接引入vue使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue指令之`v-text`和`v-html`

使用v-html可以可以识别html标签，渲染的时候会被解析
使用v-text的时候不会被解析

<div id="app">
　　<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>


<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
});
</script>

Vue指令之`v-bind`的三种用法

直接使用指令v-bind
使用v-bind的简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

Vue指令之`v-on`的用法

直接使用指令v-on
使用v-on的简化指令@
绑定的时候，如下@click=" 绑定事件的名称 "

例子：Vue指令之`v-on`和`跑马灯效果`

使用字符串截取方法链接：JavaScript substring() 方法
https://www.w3school.com.cn/jsref/jsref_substring.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">

        <input type="button" id="" value="浪起来" @click='lang'>
        <input type="button" id="" value="别浪" @click='ws'>

        <h2>{{ msg }}</h2>

    </div>

    <script>

        var app = new Vue({
            el:'#app',
            data:{
                msg:'别去浪，猥琐发育！',
                intervalId:null // 在data上定义 定时器id
            },
            methods:{
                lang(){
                    if ( this.intervalId != null) {
                        return
                    }
                    this.intervalId = setInterval(() => {
                        //substring() 方法用于提取字符串中介于两个指定下标之间的字符。
                        var start = this.msg.substring(0,1)
                        console.log(start);
                        var end =this.msg.substring(1)
                        console.log(end);
                        // console.log(end + start);
                        this.msg = end + start
                    },200)
                },

                ws(){
                    clearInterval(this.intervalId)//删除定时器
                    this.intervalId = null
                }
            }

            
        })

    </script>
    
</body>
</html>

常用事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。在vue中在事件后面添加下方修饰符即可如

v-on:click.stop=" 事件名称 "

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

Vue指令之`v-model`和`双向数据绑定`

使用v-model可以方便的监听数据的变化和同步，实现数据的绑定

案例【简易计算器的实现】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">

        <input type="text" v-model="n1">

        <select v-model="opt">
            <option value="0">+</option>
            <option value="1">-</option>
            <option value="2">*</option>
            <option value="3">÷</option>
        </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" v-on:click="getResult">

    <input type="text" v-model="result">

    </div>

    <script>

        var app = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:'0' //默认加法
            },
            methods:{
                getResult(){
                    switch (this.opt) {

                        case '0'://加
                        this.result = parseInt(this.n1) + parseInt(this.n2);
                        break;

                        case '1'://减
                        this.result = parseInt(this.n1) - parseInt(this.n2);
                        break;

                        case '2'://乘
                        this.result = parseInt(this.n1) * parseInt(this.n2);
                        break;

                        case '3'://除
                        this.result = parseInt(this.n1) / parseInt(this.n2);
                        break;

                    }
                }
            }

            
        })

    </script>
    
</body>
</html>