学习了vue中数据的挂载，vue实例的编写，数据的注入，数据的响应及vue的html长久文本html解析指令和vue的样式绑定及class类的绑定，input事件在vue双向绑定并复习了es6中的原生绑定及按照触发者的形式绑定 - 前端课程

首页 > 博客列表 > 学习了vue中数据的挂载，vue实例的编写，数据的注入，数据的响应及vue的html长久文本html解析指令和vue的样式绑定及class类的绑定，input事件在vue双向绑定并复习了es6中的原生绑定及按照触发者的形式绑定

博主信息

博文 37

粉丝 1

访问量 33064

专题推荐

更多>

里面带有了响应式数据更改的一部分代码

vue的代码块由插件vue3 snippets生成
代码部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>vue动态组件之挂载点/vue实例/数据注入/响应式</title>
</head>
<body>
    <!-- 下面的这个div.class就是一个挂载点 -->
    <div class="ad">
        <p>用户名：{{username}}</p>
    </div>
</body>
<script>
    // vue实例
    // 声明一个变量 是vue的配置项
    // vue中的变量/数据全部写入data方法中
    const config = {
        // 上面是创建了一个data函数 返回里面的 数值
        data() {
            return {
                username: "老卢",
            };
        },
    };
    const app = Vue.createApp(config).mount(".ad");
    console.log(app);
    // 与vue实例中的页面中的挂载点挂载
    // app.mount(document.querySelector(".ad")); 简写
    // 下面的进一步简化操作可以直接扔到声明的app后面//代码第28行
    // let vuename = app.mount(".ad"); //如果要使用挂载点的内容时，需要给挂载点声明一个变量，通过变量去访问变量中的属性
    //数据注入
    // 第一种是简写
    console.log(app.username);
    // 第二种访问方式
    console.log(app.$data.username); //通过对象来访问 需要给对象增加一个$符号,老实说是通过app映射到$data中访问的
    //响应式改变
    app.username = "老王";
    console.log(app.username);
    /////////下面是通过访问器属性来看////////不涉及到vue,意思就是vue的实现方法////
    // 用访问器属性来访问
    // 先声明一个变量
    const obj = {
        // 这里是创建了一个对象data 对象里面增加了键值
        $data: {
            email: "123456@qq.com",
        },
        // 创建一个方法,通过方法创建里面的data的键和值
        get email() {
            return this.$data.email;
        },
    };
    console.log(obj.$data.email);
    // 通过访问器属性访问当前data里面的值
    console.log(obj.email);
</script>
</html>

演示图：

vue指令以v-为前缀的一组指令，写到html标签的属性位置上
本质上就是自定义的属性

代码	示例	说明
v-text	<p><span v-text="username"></span></p>	将数值解析成文本
v-html	<p><span v-html="username"></span></p>	将写入的代码解析成html
v-once	<p><span v-once>{{username}}</span></p>	一次性显示，只显示第一次赋值的内容
v-bind	v-bind:style=”style”	自定义属性

代码部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>v-text/v-html/v-once</title>
</head>
<body>
    <div class="app">
        <p>用户名:{{username}}</p>
        <p><span v-text="username"></span></p>
        <p><span v-html="username"></span></p>
        <p><span v-once>{{username}}</span></p>
        <!-- v-text是通过v-text来控制当前标签中的内容,v-text的行为就是js代码来控制,而且一定是js代码 -->
        <!-- 通过v-text的js把当前js里面的内容渲染到当前的span标签中 -->
        <!-- 很像 event.textContent -->
        <!-- 当v-html来控制当前标签中内容时,会将js代码中的部分解析成html -->
        <!-- 很像innnerHTML -->
        <!-- ///////下面使用v-once来看 -->
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                username: "admin",
            };
        },
    }).mount(".app");
    app.username = '<span style="color:red">牛年发大财 v-html效果 </span>';
</script>
</html>

示例截图：

vue的样式绑定/对象/数组/变量
代码部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>vue的样式绑定与事件绑定</title>
</head>
<style>
    .active {
        color: orange;
    }
    .bgc {
        background-color: green;
    }
</style>
<body>
    <div class="app">
        <!-- 样式绑定 -->
        <!-- 行内样式 style -->
        <!-- 使用v-bind绑定行内样式 简化是:冒号 -->
        <p style="color: red">未添加行内样式</p>
        <!-- 修改方法如下： -->
        <p v-bind:style="style">行内样式v-bind</p>
        <!-- 当样式比较多的时候解决方法 -->
        <!-- 参数的键改为“-”驼峰式 值用一个变量替换掉 也就是改掉  -->
        <!-- 当数据多于1个时，要考虑使用数组或者对象封装，这里用的是对象封装一下 -->
        <p v-bind:style="{color:textcolor,backgroundColor:bgcColor}">
            行内样式v-bind当样式比较多的时候解决方法,参数的键改为“-”驼峰式 值用一个变量替换掉 也就是改掉
        </p>
        <!-- 当样式中 前面三个是基础样式，后面三个是定制样式该如何做呢？这里使用数组样式来实现 -->
        <!-- 比如button中 -->
        <!-- 当数组前面第一个值是基础样式，第二个值为定制样式时 -->
        <!-- 在实例中的写法 是数组内的变量在vue实例中是一个对象  具体请看vue实例中的写法 -->
        <button :style="[btn,btnc]">提交</button>
        <!-- class样式 -->
        <!-- 下面这个写法中，也可使用''字面量来写，比如<p :class="'active'">但是不建议 -->
        <!-- 直接写带vue实例中 -->
        <p :class="active">vue中的class样式</p>
        <!-- 判断active是否有效 可以使用isActive来测试，当isActive为true时有效，当为false中无效，这里写到实例中了 -->
        <p :class="{'active':isActive}">vue中的class样式</p>
        <!-- 以对象的写法 这里为什么可以简写？当初老师说的嘛 ，他值就等于他的值 -->
        <p :class="{active,bgc}">vue中class以对象的写法</p>
        <!-- 下面是数组绑定样式 -->
        <p :class="['active','bgc']">vue中class以数组的写法</p>
        <!-- 如何在数组中使用变量值呢？ 其实也简单，就类似对象一样，在实例中创建2个变量咯 -->
        <p :class="[active,bgc]">vue中class以数组中变量的写法</p>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                style: "color:green",
                textcolor: "red",
                bgcColor: "green",
                btn: {
                    width: "5em",
                    height: "5em",
                    border: "0px",
                },
                btnc: {
                    backgroundColor: "green",
                    color: "#fff",
                    cursor: "pointer",
                },
                active: "active",
                bgc: "bgc",
                isActive: true,
                active: "active",
                bgc: "bgc",
            };
        },
    }).mount(".app");
</script>
</html>

示例截图：

input事件的双向绑定
在input事件双向绑定时，使用了js中的es6的原生写法绑定，
第二种写法使用了event获取触发者绑定
第三种是vue中的语法糖绑定，使用了v-model代码来实现的
第四种，是类似set定时器，但不是，他需要回车按下或者tab按下失去焦点时触动，代码：.lazy

代码部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue双向绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- es6原生绑定 -->
    <p>
        <div>es6</div>
        <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
    </p>
    <!-- vue写法 -->
    <div class="app">
        <p>
            <div>vue绑定1-input</div>
            <!-- vue中绑定事件用v-on来绑定事件 -->
            <!-- vue中事件对象必须加一个$符号，比如event 就必须加一个$,使用$event -->
            <!-- 下面这个掺杂了一点es6的想法 -->
            <input type="text" v-on:input="comment = $event.target.value  " :value="comment"><span>{{comment}}</span>
        </p>
        <p>
            <!-- vue中事件有一个语法糖，语法糖的写法更简单 -->
            <div>vue绑定2-v-model-input</div>
            <!-- 直接在当前input框中 加入v-model绑定变量即可 -->
            <input type="text" v-model="comment" :value="comment"><span>{{comment}}</span>
        </p>
        <p>
            <div>vue绑定2-v-model.lazy-input</div>
            <!-- 延迟绑定 使用lazy，别名，懒绑定，类似set的定时器 -->
            <!-- 直接在v-model后面增加一个.lazy，例如v-model.lazy -->
            <input type="text" v-model.lazy="commentt" :value="commentt"><span>{{commentt}}</span>
        </p>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                comment: "",
                commentt: ""
            }
        },
    }).mount(".app")
</script>
</html>

示例截图：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

tp6常用命令

2022-03-04 15:11:13