• 样式绑定

  • 事件处理

  • 表单

  • Vue组件

　　样式绑定

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  6.         <title>vue的样式绑定</title>
  7.         <style>
  8.             .a{
  9.                 /* 颜色 */
  10.                 color: #52CCBA;
  11.             }
  12.             .b{
  13.                 /* 字体大小 */
  14.                 font-size:50px;
  15.             }
  16.             .c{
  17.                 /* 字体样式 */
  18.                 font-family: 楷体;
  19.                 font-size: 36px;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div id="ht">
  25.             <ul>
  26.                 <li>
  27.                     <h3>文本</h3>
  28.                     {{qd}}
  29.                 </li>
  30.                 <li>
  31.                     <h3>样式一</h3>
  32.                     <div :class="as">{{qd}}</div>
  33.                 </li>
  34.                 <li>
  35.                     <h3>样式二</h3>
  36.                     <div :class="bs">{{qd}}</div>
  37.                 </li>
  38.                 <li>
  39.                     <h3>样式二</h3>
  40.                     <div :class="cs">{{qd}}</div>
  41.                 </li>
  42.             </ul>
  43.         </div>
  44.     </body>
  45.     <script type="text/javascript">
  46.         new Vue({
  47.             el:"#ht",
  48.             data(){
  49.                 return {
  50.                     qd:'本是青灯不归客',
  51.                     as:'a',
  52.                     bs:'b',
  53.                     cs:'c',
  54.                 }
  55.             }
  56.         })
  57.     </script>
  58. </html>

效果图：

　　事件处理

Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once

如何调用修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  6.         <title>vue的事件处理器</title>
  7.         <style>
  8.             div{
  9.                 padding: 30px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="ht">
  15.             <ul>
  16.                 <li>
  17.                     <h3>文本</h3>
  18.                     {{qd}}
  19.                 </li>
  20.                 <li>
  21.                     <h3>防止事件冒泡</h3>
  22.                     <div style="height: 300px;width: 300px;background: #D1E9FE;" @click="a">
  23.                         <div style="height: 200px;width: 200px;background: #F57A7A;" @click="b">
  24.                             <div style="height: 100px;width: 100px;background: #FCE1E1;" @click="c">
  25.                                 <div style="height: 60px;width: 60px;background: #C8CCCF;" @click.stop="d">
  26.  
  27.                                 </div>
  28.                             </div>
  29.                         </div>
  30.                     </div>
  31.                 </li>
  32.                 <li>
  33.                     <h3>事件只点击一次</h3>
  34.                     {{ltqd}}<input type="text" v-on:keyup.enter="send" v-model="qd" />
  35.                     <button @click="send">发送</button>
  36.                     <button @click.once="send">点我</button>
  37.                 </li>
  38.             </ul>
  39.         </div>
  40.     </body>
  41.     <script type="text/javascript">
  42.         new Vue({
  43.             el:"#ht",
  44.             data(){
  45.                 return {
  46.                     qd:'本是青灯不归客',
  47.                     ltqd:null
  48.                 };
  49.             },
  50.             methods:{
  51.                 a(){
  52.                     alert('山有木兮木有之')
  53.                 },
  54.                 b(){
  55.                     alert('却因浊酒留风尘')
  56.                 },
  57.                 c(){
  58.                     alert('星光不问赶路人')
  59.                 },
  60.                 d(){
  61.                     alert('岁月不负有心人')
  62.                 },
  63.                 send(){
  64.                     this.ltqd=this.qd;
  65.                     this.ltqd=null;
  66.                 }
  67.             },
  68.         });
  69.     </script>
  70. </html>

防止冒泡效果图：

  1. @click.stop="d"是防止冒泡循环的关键；
    如果不调用这个修饰符，那么按照我上面的描述会循环弹窗四次(从内至外)；
    加了这个方法弹了一次d方法中赋值的东西就自动结束。

事件点击一次也是因为调用了修饰符的原因，效果如下（仿聊天发送）：

Vue允许为v-on在监听键盘事件时添加按键修饰符：

　　例如：

　　<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
　　<input v-on:keyup.13="submit">

全部的按键名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

　　Vue表单

用v-model指令在表单控件元素上创建双向数据绑定

常用控件

  • 文本框/密码框/文本域/隐藏域
  • 单选复选框/多选复选框
  • 单选按钮
  • 下拉框
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  6.         <title>vue表单</title>
  7.         <style>
  8.             div{
  9.                 padding: 30px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="ht">
  15.             <ul>
  16.                 <li>
  17.                     <p>表单</p>
  18.                     姓名：<input v-model="uname"/><br />
  19.                     密码：<input v-model="upwd" type="password"/><br />
  20.                     <!-- 将用户的输入值转为 Number 类型 -->
  21.                     年龄：<input v-model.Number="age"/><br />
  22.                     性别：
  23.                     <input type="radio" v-model="sex" name="sex" value="1" />男
  24.                     <input type="radio" v-model="sex" name="sex" value="0" />女<br />
  25.                     爱好：
  26.                     <div v-for="h in hobby">
  27.                         <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
  28.                     </div>
  29.                     类别：
  30.                     <select v-model="type">
  31.                         <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
  32.                     </select><br />
  33.                     备注：
  34.                     <!-- 文本域 -->
  35.                     <textarea v-bind:value="mark"></textarea><br />
  36.                     <!-- 选定之后才能提交 -->
  37.                     确认<input type="checkbox" v-model="flag" />
  38.                     <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
  39.             </ul>
  40.         </div>
  41.     </body>
  42.     <script type="text/javascript">
  43.         new Vue({
  44.             el:"#ht",
  45.             data(){
  46.                 return {
  47.                     uname: null,
  48.                     upwd: null,
  49.                     age: 10,
  50.                     sex: 1,
  51.                     hobby: [{
  52.                         id: 1,
  53.                         name: '汉服'
  54.                     }, {
  55.                         id: 2,
  56.                         name: '古琴'
  57.                     }, {
  58.                         id: 3,
  59.                         name: '刺绣'
  60.                     }],
  61.                     hobbies: [],
  62.                     types: [{
  63.                         id: 1,
  64.                         name: '啦啦'
  65.                     }, {
  66.                         id: 2,
  67.                         name: '哈哈'
  68.                     }, {
  69.                         id: 3,
  70.                         name: '小小'
  71.                     }],
  72.                     type: null,
  73.                     mark: '学生备注',
  74.                     flag: false
  75.                 }
  76.             },
  77.             computed: {
  78.                 show: function() {
  79.                     return !this.flag;
  80.                 }
  81.             },
  82.             methods: {
  83.                 doSubmit: function() {
  84.                     console.log('doSubmit')
  85.                     var obj = {
  86.                         uname: this.uname,
  87.                         upwd: this.upwd,
  88.                         age:this.age+10,
  89.                         sex: this.sex,
  90.                         hobbies:this.hobbies,
  91.                         type: this.type,
  92.                         mark: this.mark,
  93.                     }
  94.                     console.log(obj);
  95.                 },
  96.             },
  97.  
  98.         });
  99.     </script>
  100. </html>

效果图：

vue组件

组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  • 父传子值（props）

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  6.         <title>vue表单</title>
  7.         <style>
  8.             div{
  9.                 padding: 30px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="ht">
  15.             <ul>
  16.                 <li>
  17.                     <h3>组件 父传值给子</h3>
  18.                     <my-button m="aa"></my-button>
  19.                 </li>
  20.             </ul>
  21.         </div>
  22.     </body>
  23.     <script type="text/javascript">
  24.         new Vue({
  25.             el:'#ht',
  26.             data(){
  27.                 return{
  28.  
  29.                 };
  30.             },components: {
  31.                 'my-button': {
  32.                     props: ['m'],
  33.                     data() {
  34.                         return {
  35.                             n: null
  36.                         };
  37.                     },
  38.                     template: '<button @click="doxxx">自定义按钮，被{{m}}点击了多少下{{n}}</button>',
  39.                     methods: {
  40.                         doxxx() {
  41.                             this.n++;
  42.  
  43.                         },
  44.                     },
  45.                 },
  46.             },
  47.         });
  48.     </script>
  49. </html>

效果图：

　　子传值给父

　　循环弹窗一遍为一次

　　弹窗说明他已经传值过去了

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  6.         <title>vue表单</title>
  7.         <style>
  8.             div{
  9.                 padding: 30px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="ht">
  15.             <ul>
  16.                 <!-- <li>
  17.                     <h3>组件 父传值给子</h3>
  18.                     <my-button m="aa"></my-button>
  19.                 </li> -->
  20.                 <li>
  21.                     <h3>组件 子传值给父</h3>
  22.                     <my-button @tree-click="doht"></my-button>
  23.                 </li>
  24.             </ul>
  25.         </div>
  26.     </body>
  27.     <script type="text/javascript">
  28.         new Vue({
  29.             el:'#ht',
  30.             data(){
  31.                 return{
  32.                 };
  33.             },
  34.             components: {
  35.                 'my-button': {
  36.                     props: ['m'],
  37.                     data() {
  38.                         return {
  39.                             n: null
  40.                         };
  41.                     },
  42.                     template: '<button @click="doxxx">自定义按钮，被{{m}}点击了多少下{{n}}</button>',
  43.                     methods: {
  44.                         doxxx() {
  45.                             this.n++;
  46.                             this.$emit('tree-click', this.n, 'haungting', '哈哈哈哈');
  47.                         },
  48.                     },
  49.                 },
  50.             },
  51.             methods: {
  52.                 doht(a, b, c) {
  53.                     alert(b);  //haungting
  54.                     alert(c);  //哈哈哈哈
  55.                     // 循环弹窗一遍为一次
  56.                 },
  57.             },
  58.         });
  59.     </script>
  60. </html>

效果图：

　　全局组件

  1. <body>
  2.         <div id="ht">
  3.             <ul>
  4.                 <!-- <li>
  5.                     <h3>组件 父传值给子</h3>
  6.                     <my-button m="aa"></my-button>
  7.                 </li> -->
  8.                 <li>
  9.                     <h3>组件 子传值给父</h3>
  10.                     <my-button @tree-click="doht"></my-button>
  11.                 </li>
  12.             </ul>
  13.         </div>
  14.     </body>
  15. <script type="text/javascript">
  16. Vue.component('my-button', {
  17.             props: ['m'],
  18.             data() {
  19.                 return {
  20.                     n: null
  21.                 };
  22.             },
  23.             template: '<button @click="doxxx">自定义按钮，被{{m}}点击了多少下{{n}}</button>',
  24.             methods: {
  25.                 doht() {
  26.                     this.n++;
  27.                     this.$emit('tree-click', this.n, 'liuting', '描述');
  28.                 },
  29.             },
  30.             methods: {
  31.                 doht(a, b, c) { //测试是否成功传值
  32.                     alert(b); //haungting
  33.                     alert(c); //哈哈哈哈
  34.                     // 循环弹窗一遍为一次
  35.                 },
  36.             },
  37.         });
  38.     </script>

谢谢观看！

Vue基础语法(样式绑定,事件处理,表单,Vue组件)的更多相关文章

  1. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  2. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  3. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. 一、vue基础语法（轻松入门vue）

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  6. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  7. WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  8. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  9. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

随机推荐

  1. MITMProxy如何配置二次代理

    MITMProxy如何配置二次代理 0.2172018.09.05 11:13:15字数 232阅读 2609 前序: mitmproxy真的很强大,或许是大家都各自使用,或者没有相关的需求,导致我废 ...

  2. python matplotlib生成图形

    y=2x+3 import matplotlib.pyplot as plt#约定俗成的写法plt #首先定义两个函数(正弦&余弦) import numpy as np #plt.figur ...

  3. 【转】adb server is out of date. killing完美解决

    今天,久未出现的著名的“adb server is out of date.  killing”又发生了,在此,将解决方法记下,以便日后查看. 1. 错误信息: C:\Users\lizy>ad ...

  4. CMU Database Systems - Embedded Database Logic

    正常应用和数据库交互的过程是这样的, 其实我们也可以把部分应用逻辑放到DB端去执行,来提升效率 User-defined Function Stored Procedures Triggers Cha ...

  5. 100-continue

    https://wiki.open.qq.com/wiki/技术优化原则#1._.E7.A8.8B.E5.BA.8F.E8.AE.BE.E8.AE.A1.E6.97.B6.E9.9C.80.E8.A6 ...

  6. JS正则表达式使用

    <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+[_|\_ ...

  7. MyBatis：MyBatis操作MySQL存储过程

    一 . 数据库中创建存储过程,并查看创建结果 1.创建存储过程 DROP procedure IF EXISTS net_procedure_request; DELIMITER $$ )) BEGI ...

  8. Redis数据库漏洞防护

    Redis是一个高性能的数据库,Redis Crackit及Redis安全漏洞本质上是由于Redis自身缺乏安全防护机制,同时Redis的使用者又未曾遵循官方的安全规范所导致的. Redis安全漏洞 ...

  9. flutter中使用shared_preferences的存储

    添加依赖 shared_preferences: ^+ 工具类 import 'dart:async'; import 'package:shared_preferences/shared_prefe ...

  10. vue plupload 的使用

    1.  首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> aaa ...