Vue-vue对象-文本、事件、属性、表单、条件、循环指令-todolist案例

最新推荐文章于 2021-10-20 22:07:34 发布
最新推荐文章于 2021-10-20 22:07:34 发布
阅读量282 收藏 3
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zdc45625/article/details/88725984
版权

文章目录

一、vue初识
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue初识</title>
</head>
<body>
<div class="wrapper">
    <div class="box1">
        <p>box1内容</p>
        {{ }}
    </div>
    <div class="box2">
        <p>box2内容</p>
        {{ }}
    </div>
</div>
<div class="wrapper">
    {{ }}
</div>
</body>

<!-- 使用vue：导入 => 创建vue对象 => 挂载到指定页面标签  -->
<script src="js/vue.js"></script>
<script>

    // 如果控制整个页面，将页面用一个整体标签包裹，挂载着一个vue对象(不要用body)
    new Vue({
        el: '.wrapper'  // 只能控制检索到的第一个class为wrapper的页面结构
    })

    // 注： 挂载点(html页面结构)与vue对象一一对应，规范挂载点使用id来标识
</script>
</html>
二、vue对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue对象</title>
</head>
<body>
<div id="app">
    {{ msg }}
    {{ info }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            msg: '12345',
            info: '上山打老虎'
        }
    });
    // 1. 与页面挂载点建立联系:el
    // 2. 控制挂载点中的数据: data
    // 3. 控制挂载点中的事件: methods

    // 打印 msg变量中的内容
    console.log(vue.$data.msg);
    console.log(vue.msg);
</script>
</html>
三、文本指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
</head>
<body>
<div id="app">
    {{ msg }}
    <p>{{ msg }}</p>
    
    <!-- vue指令：就是标签的全局属性，但是这些属性是以"v-" 开头-->
    <p v-text="txt"></p>
    <p v-html="hml"></p>

    <p>{{ num + 1 }}</p>
    <p>{{ num + "12345" }}</p>
    <p>{{ num / 5 }}</p>
    <p>{{ num + msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "vue的变量",
            txt: "vue的text指令",
            hml: "<b>vue的html指令</b>",
            num: 1000
        }
    })
</script>
</html>
四、事件指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
</head>
<body>
<div id="app">
    <!--
    事件指令：v-on：事件名 简写，@事件名
    整体语法: v-on:事件名="事件绑定的变量名"
    事件绑定的变量名由methods来提供具体的方法实现
    -->
    <p v-on:click="action1" v-text="msg1"></p>
    <p v-on:dblclick="action2" v-text="msg2"></p>
    <p @mouseenter="action3" v-text="msg3" style="background: red"></p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '点击事件',
            msg2: '双击事件',
            msg3: '鼠标悬浮事件',
        },
        methods: {
            action1: function() {
                alert('点击事件')
            },
            action2: function () {
                alert('双击事件')
            },
            action3: function () {
                alert('鼠标悬浮事件')
            }
        }
    })
</script>
</html>
五、属性指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
</head>
<body>
<div id="app">
    <!--
    事件指令: v-bind:属性名 简写 :属性名
    v-vind="属性绑定的变量名"
    属性名：来设置事件触发的条件 (style | class | 自定义属性)
    整体语法: v-bind:属性名="属性绑定的变量名"
    属性绑定的变量名由 data 来提供具体的方法实现
    -->
    <p v-bind:owen="tag">{{ msg }}</p>
    <a :href="url"></a>
    <a :href="'/static/article' + aid">前往{{ aid }}篇文章</a>
    <button @click="btnClick">获取第100篇文章的id</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '属性指令',
            tag: 1,
            url: '/static/article/1',
            aid: 10
        },
        methods: {
            btnClick: function () {
                this.aid = 100;
            }
        }
    });
</script>
</html>
六、style属性
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性指令</title>
</head>
<body>
<div id="app">
    <p :style="a"></p>
    <p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            a: {
                width: '200px',
                height: '200px',
                backgroundColor: 'red'
            },
            h: '200px'
        },
        methods: {
            btnClick: function () {
                this.h = '300px'
            }
        }
    });
</script>
</html>
七、class属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class属性</title>
    <style>
        .red {
            width: 200px;
            height: 200px;
            background: red;
        }
        .yellow {
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .orange {
            width: 100px;
            height: 100px;
            background: orange;
        }
        .y {
            border-radius: 50%;
        }
    </style>
</head>
<body>
<di id="app">
    <button @click="redAction">变红</button>
    <button @click="yellowAction">变黄</button>
    <p :class="cname"></p>
    <p :class="{abc: def}"></p>
    <button @click="orangeAction">切换</button>
    <p :class="{orange: is_orange}"></p>

    <!-- class: []语法 => 多类名 -->
    <p :class="[a,b,c]"></p>
    <p :class="[x,{y:z}]"></p>
</di>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cname: '',
            def: false,
            is_orange: '',
            a: 'aaa',
            b: 'bbb',
            c: 'ccc',
            x: 'red',
            z: true
        },
        methods: {
            redAction: function () {
                this.cname = 'red'
            },
            yellowAction: function () {
                this.cname = 'yellow'
            },
            orangeAction: function () {
                this.is_orange = !this.is_orange
                
            }
        }
    })
</script>
</html>
八、表单指令
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单指令</title>

</head>
<body>
<div id="app">
    <!-- 表单指令: v-model -->
    <!--
        文本指令不需要绑定东西: v-text="变量名"
        属性指令需要绑定属性: v-bind:属性名="变量名"  => :属性名="变量名"
        事件指令需要绑定事件: v-on:事件名="变量名"  => @事件名="变量名"
        表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
            -- 所以直接书写 v-model="变量名"
    -->

    <input type="text" value="初始value" v-model="msg">
    <input type="text" value="初始value" v-model="msg">
    <p>{{ msg }}</p>

    <!--有v-once的标签，内容一段渲染，就不能再改变-->
    <p v-once>{{ info }}{{ msg }}</p>

    -------------------------------------------------------------------------------------

    <!-- v-model针对于表单元素 -->
    <form action="" method="get">
        <!-- 1、双向绑定：服务于文本输入框 -->
        <!-- v-model存储的值为输入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>

        <!-- 2、单选框 -->
        <div>
            <!-- 单选框是以name进行分组，同组中只能发生单选 -->
            <!-- v-model存储的值为单选框的value值 -->
            男：<input type="radio" name="sex" value="male" v-model="ra_val">
            女：<input type="radio" name="sex" value="female" v-model="ra_val">
            <p>{{ ra_val }}</p>
        </div>

        <!-- 3、单一复选框 -->
        <!-- v-model存储的值为true|false -->
        <!-- 或者为自定义替换的值 -->
        <div>
            <input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
            {{ sin_val }}
        </div>

        <!-- 4、多复选框 -->
        <!-- v-model存储的值为存储值多复选框value的数组 -->
        <div>
            <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
            <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
            <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
            {{ more_val }}
        </div>

        <input type="submit" value="提交">
    </form>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: "一次性数据",
            msg: "改变后的value",
            in_val: '',
			// 默认值可以决定单选框默认选项
			ra_val: 'male',
			// 默认值为true，单一复选框为选中，反之false为不选中
			sin_val: '',
			// 数组中存在的值对应的复选框默认为选中状态
			more_val: ['喜好女的','不挑']
        },
        methods: {}
    });
</script>
</html>
九、插值表达式符号
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>插值表达式符号</title>
</head>
<body>
<div id="app">
    <p>{{{ msg }}}</p>
    <p>{{{ msg ]]]</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '12345'
        },
        delimiters: ['{{{', ']]]']
    });
</script>
</html>
十、computed
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>computed</title>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="firstName">
    </p>
    <p>
        <input type="text" v-model="lastName">
    </p>
    <input type="text" v-model="aaa">

    <!--姓名 = firstName + " " + lastName-->
    <h2>{{ firstName + " " + lastName }}</h2>

    <!-- 将姓名替换为 firstName + " " + lastName -->
    <!--<h2>{{ fullName() }}</h2>-->
    <h2>{{ fullName }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            aaa: '',
            firstName: '',
            lastName: '',
            // fullName: '姓名'
        },

        // 一个属性变量的值依赖于多个属性变量的值
        // 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值)
        computed: {
            fullName: function () {
                this.aaa;
                console.log("监听到内部拥有的变量在改变");
                if (this.firstName || this.lastName) {
                    return this.firstName + " " + this.lastName
                }
                return "姓名"
            }
        }
    });
</script>
</html>
十一、watch
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>watch</title>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="fullName">
    </p>
    <p>
        <input type="text" v-model="firstName">
    </p>
    <p>
        <input type="text" v-model="lastName">
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fullName: "",
            firstName: "",
            lastName: "",
        },
        watch: {
            // 为fullName该属性绑定了一个监听事件
            // fullName的定义还是在data或computed
            // fullName属性值一旦改变，绑定的监听事件就会被调用执行

            // 多个变量依赖于一个变量
            fullName: function () {
                console.log("该方法被调用了");

                f_l_arr = this.fullName.split(" ");

                this.firstName = f_l_arr[0];
                this.lastName = f_l_arr[1];
            }
        }
    });
</script>
</html>
十二、条件指令
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件指令</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            background: orange;
        }
        [v-cloak] { display: none; }
        div {
            width: 400px;
            height: 100px;
        }
        .red { background-color: red; }
        .yellow { background-color: yellow; }
        .green { background-color: green; }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--
    条件指令：
    v-if
    v-show
    -->
    <button @click="btnClick">切换</button>
    <!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
    <p v-if="is_open"></p>
    <p v-show="is_open"></p>
    <hr>
    <!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
    <!--如果想传入事件参数, 1:不加括号  2.加括号需用$event-->
    <button @click="changeColor('red', $event)">红</button>
    <button @click="changeColor('yellow')">黄</button>
    <button @click="changeColor('green')">绿</button>
    <div class="red" v-if="color == 'red'">红体</div>
    <div class="yellow" v-else-if="color == 'yellow'">黄体</div>
    <div class="green" v-else>绿体</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_open: 0,
            color: 'red'
        },
        methods: {
            btnClick: function () {
                this.is_open = !this.is_open;
            },
            changeColor: function (color, ev) {
                console.log(color);
                console.log(ev);
            }
        }
    });
</script>
</html>
十三、循环指令
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>循环指令</title>
</head>
<body>
<div id="app">
    <h3>{{ list[4] }}</h3>
    <h3>{{ dic['gender'] }} {{ dic.gender }}</h3>

    <hr>

    <p v-for="(cless, index) in list">
        <span>
            <b>{{ index }} : {{ cless }}</b>
        </span>
    </p>

    <!--遍历对象(字典)-->
    <p v-for="(value, key, index) in dic">
        <span>
            <b>{{ index }} - 【{{ key }}】：{{ value }}</b>
        </span>
    </p>

    <!--复杂结构-->
    <!--name:Owen  age:8-->
    <!--name:Egon  age:58-->
    <!--name:Hou  age:7-->
    <p v-for="person in pArr">
        <span v-for="(v, k) in person" style="margin-right: 30px">
            <b>{{ k }}</b> : <i>{{ v }}</i>
        </span>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: ["语文", "数学", "英语", "编程", "吹牛逼"],
            dic: {
                name: 'Bob',
                age: 18,
                gender: '哇塞',
            },
            pArr: [
                {
                    name: "Owen",
                    age: "8",
                },
                {
                    name: "Egon",
                    age: "58",
                },
                {
                    name: "Hou",
                    age: "7",
                },
            ]
        },
    });
</script>
</html>
十四、todolist案例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>todolist案例</title>
    <style>
        span {
            background: green;
            padding: 5px;
            color: red;
            margin-right: 20px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="txt">
        <button @click="addMsg">留言</button>
    </p>
    <ul>
        <!--<li><span>x</span>第二条</li>-->
        <!--<li>第一条</li>-->
        <li v-for="(msg, index) in msgs">
            <span @click="deleteMsg(index)">x</span>
            {{ msg }}
        </li>

    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            txt: '',
            msgs: []
        },
        methods: {
            addMsg: function () {
                var txt = this.txt;
                if (txt) {
                    this.msgs.unshift(txt);
                    this.txt = '';
                }
            },
            deleteMsg: function (index) {
                this.msgs.splice(index, 1)
            }
        }
    });
</script>
</html>
zdc45625
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的基础指令演示代码及简单案例
CHEN的博客笔记
01-10 1446
主要是通过演示不同指令在代码中的使用来增进我们对知识点的理解，该篇文章仅供学习参考
Vue获取循环列表文本值，Vue获取循环点击事件中的文本值
weixin_41346436的博客
05-06 1317
Vue获取文本值，获取点击循环列表的值 可能单一获取文本值容易，但是网上的查到的方法都是event.target.innerText这个。这个是只能获取那种不循环的值 <h2 v-on:click="select（）">文本内容</h2> 在methods中获取文本值 methods: { select: function (event) { console.log(‘您选中的内容是》》 ’ + event.target.innerText);//打印得到了Ecos
vue.js循环html文本,Vue.js 指令 v-html v-cloak v-pre v-once
weixin_30767257的博客
06-19 531
指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上HTML：Hello!这里，v-if指令将根据表达式greeting值得真假 删除/插入p元素JS：varvm1=newVue({el:'#test01',data:{greeting:false}});当greeting取值为false时，查看页...
VUE--Form表单
热门推荐
weixin_43989275的博客
04-18 4万+
表单内容 1、写在data内验证： ：代表这是一个表单 -> ref：表单被引用时的名称，标识 是我们绑定的对象 -> rules：是动态绑定的rules，表单验证规则 -> model：表单数据对象 是绑定我们form表单中需要提交给后台的一个对象 -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 -...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-long-click:VueJS的长按指令库
05-06
npm install vue-long-click --save import { longClickDirective } from 'vue-long-click' const longClickInstance = longClickDirective ( { delay : 400 , interval : 50 } ) Vue . directive ( 'longclick' , ...
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
my-vue-editor:Vue 2.x的富文本编辑器
05-11
import myVueEditor from 'my-vue-editor' Vue . use ( myVueEditor , options ) 全球介绍 < script src =" serverpath/vue.js " > </ script > < script src =" serverpath/dist/my-vue-editor.js ...
Rest Framework-RESTful规范
zdc45625的博客
03-25 199
文章目录一、什么是RESTful规范 一、什么是RESTful规范 它是一个规范，面向资源架构 10条规范： 1. API与用户的通信协议，总是使用HTTPs协议 2. 域名 https://api.example.com 尽量将API部署在专用域名(会存在跨域问题) https://example.org/api/ 3. 版本 https://api.example.com/v1/ ...
vue循环数据 v-for / v-if最后一条
柠檬酸
07-16 2万+
html部分 &lt;ul class="mydemo"&gt; &lt;li v-for="item in listdata"&gt; &lt;div class="list-img"&gt;{{item.title}}&lt;/div&gt; &lt;div class="tit"&gt;{{item.
Vue --获取循环列表的值，并反转文本
weixin_43803985的博客
01-10 735
v-on:click 添加一个事件监听器 v-for=“数组” 绑定数组的数据渲染一个项目列表 this.todos[e].text 当前点击事件中，数据项的值 reverse 将一个元素的值反转输出 <div id="app"> <ol> <li v-for="(todo,index) in todos" v-on:clic...
vue.js入门(一)创建vue对象和常用指令及使用示例
格乄子
03-13 6843
Vue官网中文网：https://cn.vuejs.org/ 一、创建一个Vue对象 var vm = new Vue({ el: '#example',//定位操作对象，即需要渲染的div，里面包括需要用vue渲染的控件 data: {//数据json或者json数组的嵌套格式 myData:[],
Vue——基础(对象、属性样式操作、条件、循环、事件、绑定)
HMMHMH的博客
10-08 2199
目录vue对象vue操作属性vue操作样式三元运算条件渲染循环语句click事件双向绑定数据 vue对象 1.创建： new Vue({ … }) 2.属性： 属性 描述 el 需要管理的区域 data 用来显示在页面的数据 computed 计算属性 watch 监听属性 methods 方法属性 vue操作属性 1.格式： v-bind:属性=”data”...
vue获取文本框的值及字符串的简单操作
湖言的博客
08-29 1万+
（1） &lt;!--文本框--&gt; &lt;i-input :value.sync="value" placeholder="请输入申请城市/订单号码" style="width: 300px;height: 30px"          class="rebuildInp" v-model='str'&gt;&lt;/i-input&gt; （2） data() {
在vue中循环一个对象得使用方法，并且动态绑定checked属性
MtangEr的博客
11-27 1万+
普通的循环一个数组 //循环得lists数组 lists:[ { name:'小明', age:&quot;18&quot; } { name:'小红', age:&quot;16“ } ] //代码如下 &amp;lt;ul&amp;gt; &amp;lt;li v-for=&quot;(item,index) in lists&quot; :key=index&amp;gt;{{item.name}}--
Vue · for循环：遍历对象、遍历对象数组
weixin_42091247的博客
10-20 3878
Document <div id="app"> <!-- 对象遍历 --> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }} - {{ value }} </div> <!-- 数组对象遍历 --> <div v-for=...
vue循环遍历出的文本展开收起效果
吕小威的博客
01-27 1468
超出三行只显示三行，第三行末尾处显示展开，点击展开显示全部文本，末尾处显示收起。 <div class="chat-item" v-for="(itemson, index1) in item.talkContent" :key="index1"> <!-- 文本 --> <div :class="chooseId == item.talkTechniqueId.toString() + index1 ? 'textName' : textList.includes
vue富文本vue-quill事件
最新发布
07-27
回答: vue-quill编辑器提供了一些事件供开发者使用。其中一些常用的事件包括： 1. ready: 当编辑器准备好时触发的事件。可以在该事件中执行一些初始化操作。 2. text-change: 当编辑器内容发生改变时触发的事件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值