表单指令v-model

表单指令, 顾名思义就是用在form表单中的
它的使用方法: v-model="变量", 这个v-model 就相当于input标签的 value 属性, 只不过他俩可以互相影响
可以实现数据的双向绑定, 变量的值可以影响表单标签的值, 反过来表单标签的值也可以影响变量的值

<body>

<div id="d1">

    <form action="">

        <!--变量的值可以影响标签的值, 标签的值也可以影响变量的值-->

        用户名:<input type="text" name="username" v-model="v1" placeholder="请输入用户名">

        <!--上面输入什么, 这里就展示什么-->

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

        {{ v1 }}

        <hr>

        <!--1.单选框-->

        男:<input type="radio" name="gender" value="male" v-model="v2">

        女:<input type="radio" name="gender" value="female" v-model="v2">

        {{ v2 }}

        <hr>

        <!--2.单一复选框, true|false-->

        卖身抵债: 同意 <input type="checkbox" name="agree" v-model="v3">

        {{ v3 }}

        <hr>

        <!--3.复选框-->

        爱好: <br>

        男:<input type="checkbox" name="hobby" value="male" v-model="v4">

        女:<input type="checkbox" name="hobby" value="female" v-model="v4">

        其他:<input type="checkbox" name="hobby" value="other" v-model="v4">

        {{ v4 }}

        <hr>

        <button type="submit">提交</button>

    </form>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            v1: 'username',

            v2: 'male',

            v3: false,

            v4: ['female', 'male']

        }

    })

</script>

条件指令v-if

条件指令就是用户控制这个标签到底在不在页面中展示的
v-show="条件" 隐藏时,既条件为false时, 采用display: none进行渲染
v-if="条件" 隐藏时,既条件为false时, 不在进行渲染, 右键检查根本就找不到相关代码
v-if="条件" | v-else-if="条件" | v-else

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>条件指令</title>

    <style>

        .box {

            height: 200px;

            width: 200px;

        }

        .r {

            background-color: red;

        }

        .g {

            background-color: green;

        }

        .b {

            background-color: blue;

        }

        .active {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div id="d1">

    <!--当is_show为false时, display:none-->

    <div class="box r" v-show="is_show"></div>

    <!--当is_show为false时, 直接不渲染, 右键检查找不到代码-->

    <div class="box g" v-if="is_show"></div>

    <hr>

    <!--点击相应按钮显示对应颜色的box,且该按钮高亮-->

    <div class="wrap">

        <button @click="boxColor='r'" :class="{active: boxColor === 'r'}">红</button>

        <button @click="boxColor='g'" :class="{active: boxColor === 'g'}">绿</button>

        <button @click="boxColor='b'" :class="{active: boxColor === 'b'}">蓝</button>

        <div class="box r" v-if="boxColor === 'r'"></div>

        <div class="box g" v-else-if="boxColor === 'g'"></div>

        <div class="box b" v-else></div>

    </div>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            is_show: false,

            boxColor: 'r'

        }

    })

</script>

</body>

</html>

循环指令v-for

v-for="v in string|array|obj
v-for="(v, i ) in string|array
v-for="(v, k, i) in dict

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>循环指令</title>

</head>

<body>

<div id="d1">

    <p>{{ msg }}</p>

    <span v-for="v in msg">{{ v }} </span>

    <br>

    <!--i:索引-->

    <span v-for="(v, i) in msg">{{ i }}:{{ v }} </span>

    <hr>

    <!--对字典进行for循环拿到的是值-->

    <div v-for="v in infoDic">{{ v }}</div>

    <!--k:键, i:索引-->

    <div v-for="(v, k, i) in infoDic">{{ i }}-{{ k }}:{{ v }}</div>

    <hr>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            msg: 'easy come easy go',

            infoDic: {

                name: 'bigb',

                age: '18',

                gender: 'male'

            },

        }

    })

</script>

</body>

</html>

分隔符delimiters

delimiters属性, 用来修改差值表达式的符号, 以解决语法冲突问题, 比如Django的模板语法: {{ }} 和Vue的查找表达式符号: {{ }}
delimiters: [ "[{" "}]" ] 就是将Vue的差值表达式符号变成了 [{ }]

<body>

<div id="d1">

    <p>{{ msg }}</p>

    <p>[{ msg }]</p>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            msg: 'easy come easy go',

            },

        // 将Vue的差值表达式符号变成 [{ }]

        delimiters: [ '[{',  '}]' ],

    })

</script>

</body>

过滤器filters

在Vue对象中的filter属性中定义过滤方法
可以对多个值进行过滤, 既过滤方法可传入多个参数, 也可以传入额外的辅助参数
过滤的结果可以再进行下一次过滤, 既可以多个过滤器串联

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>过滤器</title>

</head>

<body>

<div id="d1">

    <p>{{ a|f1 }}</p>

    <!--可以对多个值进行过滤, 也可以传辅助参数-->

    <p>{{ a, b, c|f2(40)}}</p>

    <!--可以对过滤的结果进行再过滤-->

    <p>{{ a, b, c|f2(40)|f3}}</p>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            a: 10,

            b: 20,

            c: 30,

            },

        filters: {

            // 传入需要过滤的值, 返回过滤结果

            f1(arg) {

                return arg * 10

            },

            f2(arg1, arg2, arg3, arg4) {

                return arg1 + arg2 + arg3 + arg4

            },

            f3(arg) {

                return arg * arg

            }

        }

    })

</script>

</body>

</html>

计算属性computed

在Vue对象中的computed属性中定义计算方法
方法属性的值就是计算方法的返回值
计算方法中出现的所有变量发送变化, 都会触发该方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算属性</title>

</head>

<body>

<div id="d1">

    <input type="number" min="0" max="100" v-model="n1">

    +

    <input type="number" min="0" max="100" v-model="n2">

    =

    <!--调用在computed中定义的result方法, 并渲染出返回值-->

    <button>{{ result }}</button>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            n1: '',

            n2: '',

        },

        computed: {

            result() {

                // 计算方法中出现的任何变量的值发生变化, 都会触发该方法

                n1 = +this.n1;

                n2 = +this.n2;

                return n1 + n2

            }

        }

    })

</script>

</body>

</html>

监听属性watch

监听就是监听某个变量的值是否发生了变化, 一旦变化就会触发监听方法
在Vue对象的watch属性中定义监听方法, 方法名与被监听的变量名相同
监听方法不需要返回值
监听方法可以传两个参数, 一个是变量的当前值n, 一个是变量上一个值o

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>监听属性</title>

</head>

<body>

<div id="d1">

    <p>姓名:<input type="text" v-model="fullName"></p>

    <p>姓:<input type="text" v-model="lastName"></p>

    <p>名:<input type="text" v-model="firstName"></p>

</div>

<script src="vue/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            fullName: '',

            firstName: '',

            lastName: '',

        },

        watch: {

            // 对fullName进行监听

            fullName(n, o) {

                // n表示变量的当前值, o表示变量的上一次的值

                this.firstName = n.slice(1);

                this.lastName = n.slice(0, 1);

            }

        }

    })

</script>

</body>

</html>

前端数据库

localStorage: 永久存储
sessionStorage: 临时存储, 所在页面标签被关闭后, 清空

// 存

localStorage.n1 = 10;

sessionStorage.n2 = 20;

// 取

let a = localStorage.n1

let b = sessionStorage.n2

// 存取数组等数据类型需要进行序列化和反序列化

localStorage.arr = JSON.stringify([1, 2, 3])

let arr = JSON.parse(localStorage.arr)

// 清空数据库

localStorage.clear()

Vue 02的更多相关文章

手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
vue - 准备知识
一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es ...
如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
vue.js插件使用(02) vue-router
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
React对比Vue（02 绑定属性，图片引入，数组循环等对比）
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
vue项目搭建介绍02
目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建自定义构建基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...
vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
Vue指令02——v-on指令和v-show的使用
Vue指令02--v-on指令和v-show的使用 v-on指令格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...

随机推荐

nyoj 1112 求次数（map）
求次数时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述题意很简单,给一个数n 以及一个字符串str,区间[i,i+n-1] 为一个新的字符串,i 属于[0,strl ...
nyoj 45-棋盘覆盖 (高精度， Java)
棋盘覆盖时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的 ...
nowcoder 鹏
鹏时间限制:C/C++ 2秒,其他语言4秒空间限制:C/C++ 262144K,其他语言524288K 64bit IO Format: %lld 题目描述化而为鸟,其名为鹏.鹏之背,不知其 ...
pod删除主要流程源码解析
本文以v1.12版本进行分析当一个pod删除时,client端向apiserver发送请求,apiserver将pod的deletionTimestamp打上时间.kubelet watch到该事件 ...
剑指Offer-23.二叉搜索树的后序遍历序列(C++/Java)
题目: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 分析: 二叉树的后序遍历也就是先访问左子树,再访问右 ...
扛把子组20191031-2 Beta阶段贡献分配规则
此作业的要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9910 队名:扛把子组长:孙晓宇组员:宋晓丽梁梦瑶韩昊刘信鹏 B ...
使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...
🔥《手把手教你》系列练习篇之1-python+ selenium自动化测试（详细教程）
1.简介相信各位小伙伴或者同学们通过前面已经介绍了的Python+Selenium基础篇,通过前面几篇文章的介绍和练习,Selenium+Python的webUI自动化测试算是一只脚已经迈入这个门 ...
安卓Android碎片fragment实现静态加载
静态加载好后的界面如下,两个碎片分别位于一个活动的左边和右边: 左边和右边分别为一个碎片,这两个碎片正好将一整个活动布满.一个活动当中可以拥有多个碎片,碎片的含义就是可以在同一个UI界面下,将这个界面 ...
c#-PropertyChangingEventArgs
MSDN 解释连接:https://msdn.microsoft.com/zh-cn/library/system.eventargs.aspx#inheritanceContinued[Serial ...

Vue 02

表单指令v-model

条件指令v-if

循环指令v-for

分隔符delimiters

过滤器filters

计算属性computed

监听属性watch

前端数据库

Vue 02的更多相关文章

随机推荐

热门专题