快速入门vue,爆肝一万多字,“建议收藏”,用到省的百度了(含实战案例

34 阅读3分钟

最后

开源分享:docs.qq.com/doc/DSmRnRG…

v-bind

基本使用

v-bind动态绑定class(对象语法)

v-bind动态绑定style(对象语法)

computed 计算属性

基本使用

v-on事件的监听

v-on的参数问题

v-on的修饰符

条件判断

v-if和v-else的使用

用户登录切换案例

v-for循环遍历

基本使用

补充:数组中那些方法是响应式

点击切换颜色 案例

v-mode(双向绑定)

v-mode基本使用

v-mode结合checkbox

v-mode修饰符


初识Vue

=====

{{message+name}}

{{mesage+' '+neme}}

{{message}}

{{name}}

遍历数组

  • {{item}}

v-bind

======

基本使用

v-bind动态绑定class(对象语法)

//哪个类名为true就添加哪个类

{{message}}

v-bind动态绑定style(对象语法)

//fontSize = font-size 在vue里前面有-要大写字母

{{message}}

{{message}}

computed 计算属性

=============

基本使用

总价格:{{totalPrice}}

v-on事件的监听

=========

v-on的参数问题

<button @click="btn1Click()">按钮一

<button @click="btn1Click">按钮一

<button @click="btn2Click">按钮二

<button @click="btn3Click(abc,$event)">按钮三

v-on的修饰符

<button @click.stop="btnClick">按钮

<input type="submit" value="提交" @click.prevent="submitClick">

<input type="text" @keyup.enter="keyUp">

<button @click.once="btn2Click">按钮2

条件判断

====

v-if和v-else的使用

abc
abc
abc

isShow为false时,显示我

用户登录切换案例

用户账号

用户邮箱

<button @click="isUser = !isUser">切换类型

v-for循环遍历

=========

基本使用

  • {{value}}-{{key}}
  • {{value}}-{{key}}-{{index}}

补充:数组中那些方法是响应式

  • {{item}}

<button @click="btnClick">按钮