0. 方便起见，定个轮廓

  • 不妨记下方的程序为 code1
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>v-xxx</title>

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

    <style>

        /* d */

    </style>

</head>

<body>

    <div id="app">

        <form>

            <!-- a -->

        </form>

        <!-- c -->

    </div>

    <script>

        // b

    </script>

</body>

</html>

1. v-model

  • 一般用于表单的指令

    • 将表单的 value 和数据模型当中的变量进行绑定
    • 通常用来实现数据的双向绑定

举例

  • 把 code1 的 a 用下方语句替换
<!-- 1. 对普通文本框的值的设置 -->

<input type="text" name="username" v-model="msg"> {{msg}} <br>

<!-- 2. 单选框与多选框 -->

<input type="radio" name="gender" v-model="gender" value="1">

<input type="radio" name="gender" v-model="gender" value="0">

{{gender}} <br>

<input type="checkbox" name="live" value="1" v-model="live">

<input type="checkbox" name="live" value="2" v-model="live">

{{live}} <br>

<input type="checkbox" name="change" value="1" v-model="change">

<input type="checkbox" name="change" value="2" v-model="change">

<input type="checkbox" name="change" value="3" v-model="change">

{{change}} <br>

<select v-model="select">

    <option value="1">北京</option>

    <option value="2">上海</option>

    <option value="3">广州</option>

</select> {{select}}
  • 把 code1 的 b 用下方语句替换
new Vue({

    el: "#app",

    data: {

        msg:    "123",

        gender: "1",

        live:   "",

        change: ["2", "3"],

        select: ""

    }

});

2. v-for

  • 循环

举例

  • 把 code1 的 c 用下方语句替换
<ul>

    <!-- 1. v-for=""

        此处一定要使用 "" -->

    <li v-for="i in arr">{{i}}</li>

</ul>

<ul>

    <!-- 2.

        2.1 v,i 加不加括号均可

        2.2 v,i 可以用别的变量替换

        2.3 可以做简单的运算

        2.4 :key="idx" 加与不加，影响不大，但是推荐加上 -->

    <li v-for="v,idx in arr" :key="idx">{{v}} -> {{idx+1}}</li>

</ul>

<ul>

    <!-- 3. 此处与 Python 的字典有所不同

        3.1 key 与 value 顺序相反

        3.2 有索引值，排在第三位 -->

    <li v-for="v,k,idx in obj">{{k}} -> {{v}} -> {{idx}}</li>

</ul>
  • 把 code1 的 b 用下方语句替换
new Vue({

    el: "#app",

    data: {

        arr: ["铅笔", "橡皮", "尺子", "圆规"],

        obj: {

            name:   "张三",

            gender: "1",  // 一般地，男：1，女：0

            length: "180cm"

        }

    }

});

3. v-if

  • 显示和隐藏

    • v-if
    • v-else-if
    • v-else
    • 使用时，中间不能穿插别的元素

举例

  • 把 code1 的 c 用下方语句替换
<div class="box1" v-if="1<0">1</div>

<div class="box2" v-else-if="1==0">2</div>

<div class="box3" v-else>3</div>

<!-- 穿插一些 v-show

    若判断一次即确定显示或隐藏，推荐使用 v-if

    若频繁地显示与隐藏，推荐使用 v-show

-->

<div class="box2" v-show="true">4</div>

<div class="box2" v-show="false">5</div>
  • 把 code1 的 b 用下方语句替换
new Vue({

    el: "#app",

    data: {

    }

});
  • 把 code1 的 d 用下方语句替换
div{

    width: 200px;

    height: 200px;

}

.box1{

    background: red;

}

.box2{

    background: green;

}

.box3{

    background: blue;

}

4. 事件绑定

  • v-on: 事件类型

    • 简写：@事件类型
    • 鼠标事件
      • mouseout
      • mouseover
      • mousemove
      • click
      • dblclick
    • 键盘事件
      • keydown
      • keyup

举例

  • 把 code1 的 c 用下方语句替换
<button v-on:click="al">单击</button> <br>

<button v-on:dblclick="al">双击</button> <br>

<button v-on:mouseover="al">鼠标移入</button> <br>

<button v-on:mouseout="al">鼠标移出</button> <br>

<input @keydown="down1"> <br>

<input @keydown.50="down2">
  • 把 code1 的 b 用下方语句替换
new Vue({

    el: "#app",

    data: {

        msg: "ok",

    },

    // 主要用来写函数

    methods: {

        al: function(){

            alert(this.msg);

        },

        down1: function(e){

            // alert("你按下了键盘");

            // console.log(e);

            console.log(e.keyCode);

        },

        down2: function(e){

            console.log("你按下了 2");

        }

    }

});

5. v-show

  • 与元素的 display 属性有紧密的关联

举例

  • 把 code1 的 c 用下方语句替换
<button @click="show">show</button>

<div class="box1" v-show="flag"></div>
  • 把 code1 的 b 用下方语句替换
new Vue({

    el: "#app",

    data: {

        flag: false,

    },

    methods: {

        show: function(){

            // this.flag = true;

            this.flag = ~this.flag;  // this.flag = !this.flag; 也行

        }

    }

});
  • 把 code1 的 d 用下方语句替换
.box1{

    width: 200px;

    height: 200px;

    background: red;

}

[Web 前端] 033 Vue 的简单使用的更多相关文章

  1. EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  3. [Web 前端] 032 vue 初识

    目录 0. 先下载 1. 先写个轮廓 2. 牛刀小试 2.1 例子 1 2.2 例子 2 3. 模板语法 上例子 4. 文本指令 上例子 5. 属性操作 上例子 6. 样式操作 上例子 类名的操作 s ...

  4. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  5. web前端网页开发一般过程

    看见很多新手同学前端开发,效率比较慢.总是拿起代码就敲,不分析,没有逻辑,反而使效率变慢.所谓磨刀不误砍柴工,有一个良好的过程,才是最主要的: 1.分析平面效果图,在草稿纸上画出基本结构图 2.建立项 ...

  6. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  7. （转）web前端知识精简

    Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...

  8. web 前端安全问题

    转载自:https://segmentfault.com/a/1190000006672214?utm_source=weekly&utm_medium=email&utm_campa ...

  9. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

随机推荐

  1. Redhat 关闭防火墙和selinux

    查看防火墙状态.systemctl status firewalld 临时关闭防火墙命令.重启电脑后,防火墙自动起来.systemctl stop firewalld 永久关闭防火墙命令.重启后,防火 ...

  2. Vue框架使用sass

    引入: cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader@7.3.1 --save-dev cnpm i ...

  3. C++、java、python的一些区别

    1.变量类型 变量赋值命名不同 Python 中的变量赋值不需要类型声明 counter = 100 # 赋值整型变量 miles = 1000.0 # 浮点型 name = "John&q ...

  4. java——SimpleDateFormat与DateTimeFormatter

    https://www.jianshu.com/p/b212afa16f1f SimpleDateFormat不是线程安全的 DateTimeFormatter是线程安全的

  5. anaconda 安装caffe,cntk,theano-未整理

    一,anancona 安装 https://repo.anaconda.com/archive/ conda create -n caffe_gpu -c defaults python=3.6 ca ...

  6. webUploader---实现大文件断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  7. 大哥带的MSsql注入（SQL Server）--预习

    ①判断数据库类型and exists (select * from sysobjects)--返回正常为mssql(也名sql server)and exists (select count(*) f ...

  8. 关于MySQL去除查询结果重复值

    下面先来看看例子: table:  id name  1 a  2 b  3 c  4 c  5 b 库结构大概这样,这只是一个简单的例子,实际情况会复杂得多. 比如我想用一条语句查询得到name不重 ...

  9. PTA编程总结二

    7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成“贰万叁仟壹百零捌”元.为了简化输出,用小写英文字 ...

  10. jsp四种属性范围

    在JSP提供了四种属性的保存范围.所谓的属性保存范围,指的就是一个设置的对象,可以在多个页面中保存并可以继续使用.它们分别是:page.request.session.appliction. 1.pa ...