![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE2.0
香菜大魔王(✪ω✪)
在人下人的时候要把自己当人,尊重自己。在人上人的时候要把别人当人,尊重其他人。
展开
-
4. VUE中 v-model的使用
目录1.v-model的基本使用2.v-model修饰符的使用3.v-model结合checkbox类型4.v-model结合radio类型5.v-model结合select类型1.v-model的基本使用<body> <div id="app"> <!-- 双向绑定 方法1 --> <!-- <input type="text" v-model="message...原创 2022-01-21 17:22:26 · 757 阅读 · 0 评论 -
vue实现点击变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-01-20 20:07:03 · 2262 阅读 · 0 评论 -
对象字面量的增强写法
<body> <script> /* 原始写法 const obj = new Object() const obj = { name:'zhao', age:18, eat:function(){ console.log('在恰饭'); }, sleep:function().原创 2022-01-20 20:05:06 · 210 阅读 · 0 评论 -
高阶函数示例
// 编程范式: 命令式编程/声明式编程// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)// filter/ map/ reduce// filter 中的回调函数有一个要求: 必须返回一个boolean值// true: 当返回true时,函数内部会自动将这次回调的n加入到新的数组中// false: 当返回false时,函数内部会过滤掉这次的n// 需求: 找出小于100的数字const nums = [10, 20, 111, 222, 444, 40.原创 2022-01-20 20:02:48 · 185 阅读 · 0 评论 -
书籍购物车
原创 2022-01-20 19:59:43 · 166 阅读 · 0 评论 -
3. 事件监听、条件判断、循环遍历
1.v-for遍历数组和对象<body> <div id="app"> <!-- 遍历数组 --> <!--1. 在遍历的过程中,没有使用索引值(下标值)--> <ul> <li v-for="item in names">{{item}}</li> </ul>.原创 2022-01-20 19:47:58 · 121 阅读 · 0 评论 -
哪些数组的方法是响应式的?
<body> <div id="app"> <ul> <li v-for="item in letters">{{item}}</li> </ul> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js">.原创 2022-01-20 18:33:08 · 267 阅读 · 0 评论 -
vue的一些指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-01-20 18:26:08 · 56 阅读 · 0 评论 -
5. v-bind动态绑定
1. v-bind动态绑定属性<body> <div id="app"> <!-- 错误的做法: 这里不可以使用mustache语法 只能在标签内容这里才可以使用mustache语法 <img src="{{imgURL}}" alt=""> --> <!-- 正确做法 使用v-bind指令--> <img v-bind:src="imgU原创 2022-01-20 18:21:23 · 266 阅读 · 0 评论 -
1. 计算属性和methods的对比
<body> <div id="app"> <!--1. 直接拼接: 语法过于繁琐,不采用--> <h2>{{firstName}} {{lastName}}</h2> <!--2. 通过定义methods--> <!-- <h2>{{getFullName()}}</h2> <h2>{{getFullN.原创 2022-01-20 18:03:02 · 137 阅读 · 0 评论 -
2. 计算属性的setter和getter
<body> <div id="app"> <h2>{{fullName}}</h2> <!-- fullName后面不需要加小括号() 因为他是一个属性,不是方法 --> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ .原创 2022-01-20 17:59:50 · 204 阅读 · 0 评论 -
Vue2.0(不断更新)具体内容查看VUE2.0专栏
一、为什么学习Vuejs?答:① 公司原有项目使用Vue重构或者公司新项目决定使用Vue的技术栈; ② 招聘前端需求中,对Vue或多或少都有要求;③ 作为学习者,Vue是前端必备的一个技能。二、Vue是一个渐进式的框架,什么是渐进式的呢?答:①渐进式意味着可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 (举例:原项目用JQuery开发,后续需要对项目重构,若全方位重构,任务量大。由于项目中有很多的界面,其中一个页面继续用JQ,...原创 2022-01-12 20:09:30 · 314 阅读 · 0 评论