vue入门及小项目小便签条

发布于:2023-09-16 ⋅ 阅读:(61) ⋅ 点赞:(0)

vue
框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型。基于框架进行开发,更加快捷 ,更加高效 
v-bind为HTML标签绑定属性值,如设置href,css样式等
v-model在表单元素上创建双向数据绑定
el:挂载点
data:数据对象
methods:方法对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js语法即可

v-text设置标签的文本值
在el命中标签内部及子类的属性中设置data中的值,即可在该标签内部 显示该属性ps:可以进行字符串的拼接
v-HTML设置文本的HTML
普通文本和v-text一样
html格式的文本会被解析成对应的标签
v-on
为元素绑定事件
eg:
v-on:click="dolt"
"v-on:"可以替换成@符
传递自定义参数,事件修饰符

v-show
操纵display元素
根据表达式的真假,切换元素的显示和隐藏
false隐藏
true显示
通常用一个变量表示该值,再用一个方法控制 该值,再将该方法绑定一个事件

v-if
根据表达式的真假,切换元素的显示状态
操纵dom树移除元素再添加回来
频繁切换用v-show因为操作dom消耗较大

v-bind
设置元素的属性eg:src,title,class
v-bind可以省略
直接   :属性名="属性值"
.active{
    border:1px
}
:class="{active:isActice}"

v-for
根据数据生成列表结构 
<li v-for="item in arr">黑马程序员{{item}}</li>

<li v-for="(值,索引) in arr">

v-model
获取和设置表单元素的值(双向数据绑定)
 

小便签条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>s</title>
    <style>
        #bigbox {
            position: absolute;
            height: auto;
            width: 300px;
            left: 500px;
            top: 30%;
            border: solid black 3px;
        }

        .an {
            height: 100px;
            border: solid black 3px;
            list-style-type: none;
        }

        .an:hover {
            border: solid red 3px;
        }
    </style>
</head>

<body>
    <div id="bigbox">
        <input type="text" v-model="inner" @keyup.enter="add">
        <ul>
            <li v-for="(item,index) in arr" v-text="(index+1)+item" class="an" @dblclick="subta(index)">

            </li>
        </ul>
        <button @click="cleann">clean</button>
        <p v-text="content"></p>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new new Vue({
            el: "#bigbox",
            data: {
                arr: ["写代码", "吃饭饭", "睡觉觉"],
                inner: "好好学习",
                content: 3
            },
            methods: {
                add: function () {
                    if (this.inner != "") {
                        this.arr.push(this.inner)
                        this.inner = ""
                        this.content++;
                    }
                },
                subta: function (index) {
                    this.arr.splice(index, 1)
                    this.content--;
                },
                cleann: function () {
                    this.arr.splice(0, this.arr.length)
                    this.content = 0
                }
            },


        })
    </script>
</body>

</html>

 

 

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到