Java学长的博客_vue

vue学习01

idea安装vue插件第一个vue页面先使用idea创建一个空项目，然后随便创建一个html页面，页面内容如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> {{messa

vue

html

ide

html页面

页面效果

原创 2021-09-04 12:56:51 199 阅读

Vuejs的初体验

安装方式是下载到本地引入；开发工具是webstorm<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/vue.js"></script><div id="app">

html

开发工具

vue.js

读取数据

Java

原创 2021-09-04 12:01:12 321 阅读

vue前端框架三种安装方式

直接CDN引入可以选择引入开发环境版本还是生产环境版本；开发环境版本，未经压缩，包含了帮助的命令行以及警告，打印日志等；<script src="https://cdn.jsdelivr.net/npm/ve/dist/vue.js"></script>生产环境版本优化了大小和速度,介绍用户流量<script src="https://cdn.jsdelivr.net/npm/vue"></script>下载到本地引入；开发环境下载.

生产环境

开发环境

.net

打印日志

vue.js

原创 2021-09-04 11:58:16 359 阅读

Vuejs列表编码体验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <ul> <li v-for="item in movies">{{item}}</li>

html

vue.js

HTML

原创 2021-09-04 11:52:26 154 阅读

Vue实现计数器的学习笔记

效果图如下：点击加号技术开始加1，点击减号计数开始减1源代码如下：实现了两种方式，1种直接修改变量值，一种调用函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><h2>当前计数为{{c

html

调用函数

vue.js

HTML

原创 2021-09-04 11:52:25 488 阅读

Vuejs中Mustache语法

Mustache 翻译：胡子、胡须在vue中其实就是双括号表达式，读取vue对象中的数据，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h1>{{message}}<

html

数据

vue.js

读取数据

HTML

原创 2021-09-04 11:52:24 289 阅读

webstorm编写vue时快速创建模板代码

abbreviation那里设置的是关键字，设置完后，在html页面里面编写vue，然后按tab键，则会出现我们复制粘贴到Template text:框框里的代码块

html页面

代码块

复制粘贴

HTML

原创 2021-09-04 11:52:24 1321 阅读

VueJs指令学习

v-once指令该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><h2>当前计数为{{message}}</h2><

html

百度

vue.js

数据

微信公众号

原创 2021-09-04 11:52:23 232 阅读

VueJs监听事件参数笔记

无参语法按钮1有参语法按钮2举例源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <button v-on:click="bt1">按钮1</butt

html

微信公众号

架构师

java

vue.js

原创 2021-09-04 11:52:22 201 阅读

vuejs 计算属性+es6 循环实例应用

需求data中数据有一个数组数据，数组中是一个个对象，比如一本书，有id，有价格，那么我们要通过计算属性计算出来所有的书本的总价格，展示出来。源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ di

html

数据

数组

vue.js

HTML

原创 2021-09-04 11:43:05 395 阅读

vue计算属性和methods区别

作用区别methods 用来声明函数使用计算属性computed计算的是属性实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2>{{mt()}}</h

html

微信公众号

vue.js

架构师

实例代码

原创 2021-09-04 11:43:04 166 阅读

const使用注意事项

注意事项使用const 定义的常量，定义后的常量不能指向另外一个数据，但是可以修改常量的值。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> const a="aa"; a="bb";

html

数据

HTML

Java

原创 2021-09-04 11:43:03 268 阅读

VueJs中dom元素属性值动态绑定

我们还记得在dom元素内容中显示vue对象中的data数据时，是使用两个花括号，但是在dom元素的属性值需要动态绑定数据时，需要用到v-bind；v-bind直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div

html

数据

vue.js

动态绑定

3d

原创 2021-09-04 10:36:39 1136 阅读

v-bind绑定class对象

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style></head><body> <div i

html

多次点击

vue.js

属性值

Vue

原创 2021-09-04 10:36:38 187 阅读

VueJs之绑定样式，v-bind:style笔记

前言首先我们要想一想，为什么要动态绑定样式？因为vue后面会涉及到很多组件，那么组件是可以复用的，这时根据业务的不同，组件展示的效果样式就不同，那么我们就可以动态的绑定样式。语法v-bind:style=“key(属性名):value(属性值)”代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g

html

微信公众号

复用

架构师

java

原创 2021-09-04 10:36:37 195 阅读

VUE学习笔记-v-for和v-bind作业题

作业题目列表展示任意文字数据，点击某一行则对应的字体变为红色，使用v-for和v-bind命令实现；效果图如下，点击bbb时bbb字体变为红色；点击aaa时，aaa字体变为红色；实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a

html

微信公众号

数据

架构师

java

原创 2021-09-04 10:36:37 249 阅读

VueJs 计算属性

语法computed:{ key（属性名）：function(){ }}实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </

html

vue.js

Vue

Java

原创 2021-09-04 10:36:36 145 阅读

VueJs事件监听v-on应用

语法v-on:click@clickv-on和v-bind的区别v-on是绑定事件v-bind是绑定属性比如：v-on:clickv-bind:href实例源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <di

html

绑定事件

语法糖

vue.js

Java

原创 2021-09-04 10:22:45 114 阅读

VueJs学习笔记，v-on修饰符

阻止冒泡.stop<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app" @click="divClick"> aaaa <button v-on:click.stop

html

vue.js

Java

线程

Vue

原创 2021-09-04 10:22:44 84 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

11969181

vue学习01

Vuejs的初体验

vue前端框架三种安装方式

Vuejs列表编码体验

Vue实现计数器的学习笔记

Vuejs中Mustache语法

webstorm编写vue时快速创建模板代码

VueJs指令学习

VueJs监听事件参数笔记

vuejs 计算属性+es6 循环实例应用

vue计算属性和methods区别

const使用注意事项

VueJs中dom元素属性值动态绑定

v-bind绑定class对象

VueJs之绑定样式，v-bind:style笔记

VUE学习笔记-v-for和v-bind作业题

VueJs 计算属性

VueJs事件监听v-on应用

VueJs学习笔记，v-on修饰符