Vue
Vue的基础语法与实践
兮动人
世间味趣亦如此,万物且去轮浮生。
展开
-
vue之实现记事本功能
文章目录1. 记事本功能2. 新增1. 记事本功能记事本有基本的增删改查等操作功能,输入框输入内容回车添加,每添加一条内容左下角就会增加一条记录当想要删除一条内容时,鼠标放到内容上,就会出现一个删除箭头。右下角有个Clear按钮,点击后,记事本的全部内容都会被清除掉2. 新增...原创 2021-02-17 15:28:35 · 4523 阅读 · 2 评论 -
vue之v-model基本使用
v-model:获取和设置表单元素的值(双向绑定)<body> <div id="app"> <input type="text" v-model="message" @keyup> <h2>{{ message }}</h2> </div> <script src="../js/vue.js"></script> <script>原创 2021-02-14 10:50:11 · 672 阅读 · 0 评论 -
vue之v-on补充
<body> <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <script src="../js/vue.js"></script> <script>..原创 2021-02-14 10:13:15 · 310 阅读 · 0 评论 -
vue之v-for基本使用
<body> <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="(item,index) in arr"> {{ ..原创 2021-02-13 10:15:15 · 339 阅读 · 2 评论 -
vue之图片切换
图标切换原创 2021-02-13 09:46:05 · 4916 阅读 · 5 评论 -
vue之v-bind基本使用
v-bind 设置元素的属性(如:src,title,class)原创 2021-02-12 11:16:31 · 411 阅读 · 2 评论 -
vue之v-if基本使用
v-if:根据表达式的真假,切换元素的显示和隐藏(操作DOM元素)原创 2021-02-11 14:57:57 · 20207 阅读 · 5 评论 -
vue之v-show基本使用
v-show:根据表达值的真假,切换元素的显示和隐藏原创 2021-02-10 16:46:00 · 20951 阅读 · 0 评论 -
vue之计数器实现原理
计数器<body> <div id="app"> <button @click="add"> + </button> <span>{{ num }}</span> <button @click="sub"> - </button> </div>原创 2021-02-09 09:39:02 · 371 阅读 · 2 评论 -
vue之v-text、v-html及v-on标签基本使用
文章目录本地应用v-text:设置标签的文本值v-html:设置标签的innerHTMLv-on基础:为元素绑定事件本地应用v-text:设置标签的文本值<body> <div id="app"> <h2>{{ message }} xdr630</h2> <h2 v-text="message">xdr630</h2> <h2 v-text="info">x原创 2021-02-08 22:02:29 · 1659 阅读 · 0 评论 -
Vue之el和data基本使用
文章目录1. el:挂载点2. data:数据对象1. el:挂载点案例:分别用类、标签选择器来绑定挂载点<body> <div id="app" class="app"> {{message}}<br> <span>{{message}}</span><br> <span>{{ message }}</span> </div>原创 2021-02-08 12:36:02 · 1014 阅读 · 0 评论 -
vue之事件监听v-on的基本使用
事件监听v-on基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2>{{counter}}</h2> <butt原创 2020-10-07 17:18:37 · 405 阅读 · 0 评论 -
vue之计算属性的缓存computed的使用
计算属性的缓存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <!--1.直接拼接:语法过于繁琐--> <h2>{{firstName}原创 2020-10-05 09:34:02 · 1604 阅读 · 2 评论 -
vue之计算属性的setter和getter
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2>{{fullName}}</h2> </div> <scrip...原创 2020-09-29 22:34:18 · 627 阅读 · 0 评论 -
vue之computed计算属性的复杂操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2>总价格:{{totalPrice}}</h2> </div> <...原创 2020-09-28 19:50:17 · 744 阅读 · 0 评论 -
vue之computed计算属性的基本使用
案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{firstName + ' ' + lastName}}</h2> <h2>...原创 2020-09-10 11:27:29 · 758 阅读 · 0 评论 -
vue之v-bind绑定style(对象语法)
注意: key: value 表示时,key可以不加单引号或双引号,但value必须加上,或者直接在定义上加上符号对象语法案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style></style><body&g...原创 2020-09-10 09:48:57 · 4553 阅读 · 0 评论 -
Vue之v-bind动态绑定class(数组语法)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2 class="title" :class="['active','line']">{{message}...原创 2020-08-15 18:46:26 · 2776 阅读 · 1 评论 -
Vue之v-bind基本使用
v-bind基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><!--错误的做法:这里不可以使用mustache语法 --><!--<img src='{{imgU原创 2020-06-22 17:54:31 · 1878 阅读 · 0 评论 -
Vue之v-once、v-html、v-text、v-pre、v-cloak的基本使用
v-once基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{message}}</h2> <h2 v-once>{{messa原创 2020-06-22 15:08:24 · 443 阅读 · 0 评论 -
Vue之Mustache语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{message}}</h2> <h2>{{message}},兮动人</h2>...原创 2020-06-22 14:40:36 · 1855 阅读 · 0 评论 -
Vue中的MVVM
原创 2020-06-22 14:38:14 · 316 阅读 · 0 评论 -
Vue案例之计数器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>当前计数:{{counter}}</h2> <!-- <but..原创 2020-06-17 23:29:08 · 530 阅读 · 0 评论 -
Vue之v-for列表展示
Vue列表展示<!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}}</l原创 2020-06-17 23:18:26 · 874 阅读 · 0 评论 -
Vue初体验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1></div.原创 2020-06-17 23:06:25 · 326 阅读 · 0 评论 -
webstrom创建vue常用模板
打开webstrom的设置,Editor–>Live Template添加自己定义的模板代码,如:<div id="app"> {{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: 'hello vue' })</.原创 2020-06-13 15:51:01 · 479 阅读 · 0 评论 -
04_Vue之v-bind、v-on的使用
v-bind:是Vue中,提供的用于绑定属性的指令注意:v-bind: 指令可以简写为 :要绑定的属性,如:v-bind:title=:title,v-bind 中,可以写合法的JS表达式v-on: 事件绑定机制,也可以简写为 @要绑定的属性,如:v-on:click=@:click,在methods定义方法<!DOCTYPE html><html lang="en"...原创 2020-05-02 00:01:02 · 400 阅读 · 0 评论 -
03_Vue之v-cloak、v-text、v-html的学习使用
v-cloak:能够解决插值表达式闪烁的问题。如果想慢速观察,可以把浏览器的响应速度调慢些,这样就可以观察到v-text 是没有闪烁问题的,v-text会覆盖元素中原来的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素 的内容给清空<!DOCTYPE html><html lang="en"><head> <met...原创 2020-05-01 23:58:42 · 330 阅读 · 0 评论 -
02_Vue 的基本代码
编写Vue采用vscode或hbuilder X都是不错的选择,我这里采用的是vscode,插件多功能也强大。VSCode中代码在浏览器中打开及实时刷新需要安装livereload插件,步骤如下:在VSCode中:Ctrl + Shift+ P,搜素livereload,并回车/点击“LiveReload: Enable/disable server”。或直接按照下图来安装即可:这样使...原创 2020-05-01 23:56:14 · 405 阅读 · 0 评论 -
01_Vue的简单介绍
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,...原创 2020-05-01 18:10:12 · 387 阅读 · 0 评论