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 事务，锁，隔离机制

    mysql架构 锁 为了解并发问题,引入锁,mysql中锁分为读锁和写锁,即share lock和exclusive lock.故名思义,share lock之间不互斥,share lock和excl ...

  2. Redis并发竞争key的解决方案详解

    1. 需求由来 1.Redis高并发的问题 Redis缓存的高性能有目共睹,应用的场景也是非常广泛,但是在高并发的场景下,也会出现问题:缓存击穿.缓存雪崩.缓存和数据一致性,以及今天要谈到的缓存并发竞 ...

  3. 《手把手教你》系列技巧篇（七）-java+ selenium自动化测试-宏哥带你全方位吊打Chrome启动过程（详细教程）

    1.简介 经过前边几篇文章和宏哥一起的学习,想必你已经知道了如何去查看Selenium相关接口或者方法.一般来说我们绝大多数看到的是已经封装好的接口,在查看接口源码的时候,你可以看到这个接口上边的注释 ...

  4. Html：id,name,class之间的有什么区别？

    name 一个name可以同时对应多个控件,比如checkbox和radio,主要用于获取提交表单的某表单域信息, 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input.select. ...

  5. [心得]redis集群环境搭建的错误

    安装redis集群需要版本号在3.0以上 redis-cluster安装前需要安装ruby环境 搭建集群需要使用到官方提供的ruby脚本. 需要安装ruby的环境. yum -y install ru ...

  6. linux 开机自启动的两种方式

    方法 1 – 使用 rc.local sudo vi /etc/rc.local 在文件最后加上: sh /root/script.sh & 如果是 CentOS,我们修改的是文件 /etc/ ...

  7. Kong的API管理方式

    目录 Kong 的管理方式 1. kong的关键术语 Service: Route: Upstream: Target: API: Consumer: Plugin: 2. 如何通过配置KONG AP ...

  8. GitBook在Windows上安装及使用

    GitBook是基于Nodejs,使用Git/Github和Markdown制作电子书的命令行工具. 1.安装Nodejs 首先,安装Nodejs,官网地址:https://nodejs.org/en ...

  9. python 异常获取方法

    import sys #第1:print(6/0) #直接运行该命令,出现异常,程序终止 #异常提示: '''Traceback (most recent call last): File " ...

  10. ES6新增语法(四)——面向对象

    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...