Vue-01-笔记

Posted 2021-07-15 寻7

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-01-笔记相关的知识，希望对你有一定的参考价值。

Vue-01-笔记

Vue 常用指令

Vue 常用指令

1、指令介绍

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令

2、文本插值

v-html：把文本解析为 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{{msg}}</div> <!--无法对标签进行解析-->
        <div v-html="msg"></div><!--能够解析msg中的<b></b>标签-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

3、绑定属性

v-bind：为 HTML 标签绑定属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a><!--给<a>标签绑定属性href-->
        <br>
        <a :href="url">百度一下</a><!--绑定属性的简写形式-->
        <br>
        <div :class="cls">我是div</div><!--给<div>标签绑定属性class-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

4、条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。

v-show：根据条件展示某元素，区别在于切换的是display属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>   <!--此时num=1 因此只显示div2-->
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>  <!--本质上是给属性display赋值-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>
</html>

5、列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

6、事件绑定

v-on：为 HTML 标签绑定事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button> <!--事件绑定的简写形式-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>
</html>

7、表单绑定

表单绑定
v-model：在表单元素上创建双向数据绑定。
双向数据绑定
更新data数据，页面中的数据也会更新。
更新页面数据，data数据也会更新。

MVVM模型(ModelViewViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username"> 
            <br>																				<!-- v-model 双向数据绑定 表单中的内容改变data中对应的内容也会改变-->
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

8、小结

指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
文本插值
v-html：把文本解析为HTML代码。
绑定属性
v-bind：为HTML标签绑定属性值。
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
事件绑定
v-on：为HTML标签绑定事件。
表单绑定
v-model：在表单元素上创建双向数据绑定。

以上是关于Vue-01-笔记的主要内容，如果未能解决你的问题，请参考以下文章

Vue-01-笔记

Vue01-课堂笔记

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段

sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些，有些我已经找到了

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

Oracle-常用数据库对象笔记（片段）