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. 如何优雅的实现Mysql 增删改查，看完你就会了

    接着上期说,上期没写一条sql就把数据查询出来了,那如果要保存或者更新数据怎么办呢?能不能自己写sql呢? 保存数据 @GetMapping("save")//保存数据 publi ...

  2. Linux 中的 AutoHotKey 键映射替代方案

    1. Windows 之 AutoHotKey 初次了解AutoHotKey,是在Win 下最爱效率神器:AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不 ...

  3. vue elementui table 内按钮跳转页面

    vue : <el-table-column label="操作" v-if="isColumOperate"> <template slot ...

  4. UI自动化学习笔记- Selenium一些特殊操作的处理

    一.特殊操作处理 1. 下拉选择框操作 1.1 如何操作下拉选择框 实现方式一 思路:先定位到要操作的option元素,然后执行点击操作 driver.find_element_by_css_sele ...

  5. 删除有序数组中的重复项II

    题目描述 给你一个有序数组 nums ,请你原地删除重复出现的元素,使每个元素最多出现两次,返回删除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 并在使用O(1)额外空间的条件下 ...

  6. Docker：docker部署Sqlite3数据库

    1.依赖Ubuntu系统安装sqlite3生成镜像 dockerfile文件 FROM ubuntu:trusty RUN sudo apt-get -y update RUN sudo apt-ge ...

  7. 17 shell break与continue

    使用 while.until.for.select 循环时,如果想提前结束循环(在不满足结束条件的情况下结束循环),可以使用 break 或者 continue 关键字. 在C语言.Python.Ja ...

  8. MySQL 删除devices表中id最大的一行

    原想法:delete from devices where id in (select max(id) from devices); 报错:ERROR 1093 (HY000): You can't ...

  9. PHP获取文件扩展名的常用方法小结【五种方式】

    方法1:   function getExt1($filename) {    $arr = explode('.',$filename);    return array_pop($arr);; } ...

  10. Nacos配置中心功能

    目录 Nacos的配置管理模型 命名空间(Namespace) 配置分组(Group) 配置集(Data ID) 配置项 一个最佳实践 命名空间管理 配置管理 参考 Nacos的配置管理模型 对于Na ...