VUE基础

语雀课件地址 Vue.js框架

Vue中文文档 Vue.js

创建vue项目

①在一个空项目中引入vue的js文件

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

②语法格式





以上图的语法格式实现MVVM的关系

MVVM框架

M：指需要在前端显示的数据

V：前端的视图页面

VM：实现M与V的双向绑定

基础指令



不严格要求可以把框框的语句放在head里面

①严格要求用v-cloak来解决



v-cloak是标签体属性，在加载中添加，加载完成后自动删除

②v-text

③v-html



再次注意v-html和v-text的区别

事件绑定



出错：用let声明的VM实例重复，需要改名字



show（）函数省略了function；

alert中记得加this，因为调用的是VM的data中的变量

v-on:click可以改为@click

属性绑定



v-bind可以简写为:



用户名上没有数据，页面上显示为空



用v-bind进行单项绑定，用:进行简写

走马灯练习



如果在setInterval中直接写

let start = this.msg.substr(0,1);

let ene = this.msg.substr(1,this.mag.length-1);

this.msg = end + start ;

报错msg未定义

因为setInterval中的this指向的是window，此时要使用的this应该是vm的

或者可以用箭头函数获取到vm的this



把定时器放在data里面，在run和stop里面调用





当前问题：不停点击run会一直开启定时器，速度越来越快，stop停住不了所有的定时器

解决：加判断

当定时器不为NULL是无法开启



出现问题：停止后无法开启

原因，关闭后定时器仍有值，所以不为null无法开启

解决：在关闭时把定时器设为null

完整代码

<html>

	<head>

		<meta charset="UTF-8">

		<title>跑马灯</title>

	</head>

	<body>

		<div id="app">

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

			<button @click="go()">跑</button>

			<button @click="stop()">停止</button>

		</div>

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

		<script type="text/javascript">

			let vm = new Vue({

				el: "#app",

				data: {

					msg: "好好学习  天天向上！",

					intervalId: null

				},

				methods: {

					go() {

//						let _this = this;

//						//开启定时器

//						//setInterval 中的this指向的是window，此时要使用的this应该指向vm实例。

//						setInterval(function() {

//							//字符串处理

//							let start = _this.msg.substr(0,1);

//							let end = _this.msg.substr(1,_this.msg.length-1);

//							_this.msg = end + start ;

//						},1000);

						//判断intervalId是否为null，如果为null再开启定时器

						if(this.intervalId != null) {

							return;

						}

						//使用箭头函数，解决this指向问题

						this.intervalId = setInterval(() => {

							//字符串处理

							let start = this.msg.substr(0,1);

							let end = this.msg.substr(1,this.msg.length-1);

							this.msg = end + start ;

						},200);

					},

					stop() {

						clearInterval(this.intervalId);

						//把intervalId的值设置为null

						this.intervalId = null;

					}

				}

			});

		</script>

	</body>

</html>

事件修饰符



写一个三层嵌套的box



点击蓝色输出父亲的父亲

点击粉色输出father 父亲的父亲

点击child输出child father 父亲的父亲



称之为冒泡，点击内层事件会触发外层的

可以用stop停止



给father加上capture，点击child，先执行father



再给box加上capture，冒泡顺序反过来

.self只有点击自身菜触发，点击子事件不触发外层事件，也可以用来停止冒泡

其他





加上.once让事件只触发一次

双向数据绑定





v-model双向数据绑定（应用在表单）

页面数据变化时，data的属性跟这变

v-bind单项数据绑定，把M的绑到V中，页面数据变化时，data的不变

样式处理





数组中间要加","三元表达式falg要记得在data定义



通过变量控制样式是否应用

样式切换



绑定click事件进行切换



v-for

1、迭代数字



优化：把死数字10改为count

2、迭代数组



3、迭代对象属性

4、迭代对象数组

5、for中key的使用



push在尾部加，unshift在头部加



在选中5添加后，选中框变为4





对象是唯一的

报错，key绑的类型错误



key的使用是必须的：

6、v-if与v-show



隐藏与显示切换

v-if与v-show的区别



v-if直接删除标签

v-show更改显示属性

记录21.07.22 —— Vue.js基础（一）的更多相关文章

  1. 记录21.07.23 —— Vue.js基础（二）

    Vue基础(二) 过滤器 过滤器作用 全局过滤器 输出结果 私有过滤器 输出结果 把其中一个做点修改 错误信息 自定义指令 全局自定义指令 私有自定义指令 钩子函数 注意:fond-weight是粗细 ...

  2. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

  3. 记录21.07.26 —— Vue/cil

    VUE搭载脚手架 搭载环境 下载node node.js下载地址 控制台输入 npm install -g @vue/cil 查看版本 创建vue项目 创建完后会显示启动服务的指令 这个指令可以在pa ...

  4. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  5. Vue.js基础拾遗

    本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...

  6. Vue.js 基础快速入门

    Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...

  7. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  8. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  9. Vue.js基础语法（三）

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...

随机推荐

  1. 利用 V8 深入理解 JavaScript 设计

    JavaScript 代码运行 以大家开发常用的 chrome 浏览器或 Node 举例,我们的 JavaScript 代码是通过 V8 运行的.但 V8 是怎么执行代码的呢?当我们输入 const ...

  2. 简述MSTP与配置

    一.简介 二.MSTP概述 三.功能 四.配置命令 一.简介 多生成树协议MSTP(Multiple Spanning Tree Protocol)是IEEE 802.1s中定义的生成树协议,通过生成 ...

  3. 基于xtrabackup的主从同步

    基于xtrabackup的主从同步 作者 刘畅 时间 2020-9-21 服务器版本:CentOS Linux release 7.5.1804 主机名 ip地址 服务器配置 安装软件 密码 mysq ...

  4. 22、oracle子查询

    22.1.什么是子查询: 1.子查询就是在一条sql语句中嵌入select语句: 2.子查询可区分为关联子查询和非关联子查询,他们和主查询之间的执行顺序和关系是不同的: 22.2.关联子查询: 1.说 ...

  5. P2P技术(2)——NAT穿透

    P2P可以是一种通信模式.一种逻辑网络模型.一种技术.甚至一种理念.在P2P网络中,所有通信节点的地位都是对等的,每个节点都扮演着客户机和服务器双重角色,节点之间通过直接通信实现文件信息.处理器运算能 ...

  6. C# DataGridView单元格画斜线

    功能要求:不符合条件的单元格使用斜线形式表现出来. 1.定义两个变量,一个是存储单元格位置的数组,一个是Graphics 变量 Graphics gdi; List<DataGridViewCe ...

  7. POJ 2236 Wireless Network 第一次做并查集，第一次写博客

    题意是判断两台电脑是否能通讯,两台修好的电脑距离在指定距离内可直接通讯,且两台修好的电脑能通过一台修好的电脑间接通讯.代码如下: #include <iostream> #include ...

  8. 两台主机间docker容器网络互通

    服务器1: 网络172.30.0.0/16 服务器2: 网络172.31.0.0/16 服务器1和服务器2上的docker容器网络之间是无法互通的,如果需要互通,需要做以下配置: 服务器1上执行: i ...

  9. easyswoole实现线上更新代码

    众所周知,easyswoole作为常驻内存的框架,修改代码并不能直接生效,而是需要重启服务,那么,当你的easyswoole项目上线之后,该如何保证旧请求的同时去更新代码呢? nginx reload ...

  10. 数据源连接数据库配置相关xml文件

    学完数据源连接数据后,做个笔记,当我们的程序对数据库访问频繁时,为了提高程序运行效率,我们可以通过 数据源连接数据库,从数据库连接池中直接取得出于空闲状态的数据库连接对象,以下是相关xml文件的配置: ...