Vue学习之路
会飞的土拨鼠呀
你必须穷尽一生磨练技能,这就是成功的秘诀
展开
-
Vue实现书籍购物车
书籍购物车代码展示index.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--导入CSS文件--> <link rel="stylesheet" href="style.css"></head><body><div原创 2022-05-29 23:11:17 · 855 阅读 · 0 评论 -
v-for循环遍历
v-for循环遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red; } </style></head><body><div id="app">原创 2022-05-29 21:20:19 · 101 阅读 · 0 评论 -
Vue响应式的方法
Vue响应式的方法push() pop() shift() unshift() splice() sort() reverse()方法作用push()添加元素,可以多个执行pop()删除数组中的最后一个元素shift()删除数组中的第一个元素unshift()在数组最前面添加元素 可以多个执行splice()删除元素/插入元素/替换元素sort()对元素进行排序reverse()对元素进行反转代码展原创 2022-05-23 21:19:16 · 233 阅读 · 0 评论 -
javascript 传入多个数值
javascript 传入多个数值 //三个数相加 function sum(num1 + num2 + num3) { return num1 + num2 + num3 } // 传入多个数值 function sum(...num) { console.log(num); var nums = 0; for (var i=0; i< arguments.length; i++) { i原创 2022-05-23 20:15:58 · 538 阅读 · 0 评论 -
如何使用v-for遍历数据
v-for遍历数据<div id="app"> <!--1.在遍历的过程中,没有使用索引值(下标值) --> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--2.在遍历的过程中,获取索引值--> <ul> <li v-for="(item,index) in names"> {原创 2022-05-23 17:47:56 · 2612 阅读 · 0 评论 -
v-if和v-else和v-else的使用
v-if和v-else和v-else的使用if-elseif-else条件判断,如果您之前学过一门编程语言,相信一定非常好理解。当分数大于90为优秀,大于80小于90为良好,以此类推。最后条件不包含的情况(else)为不及格。<!-- v-if和v-else和v-else的使用 --><div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80原创 2022-05-22 12:10:53 · 1385 阅读 · 0 评论 -
ES6语法--块级作用域var和let
块级作用域var和let<script> //1.变量作用域:变量在什么范围内是可用 // { // var name = 'pengfei'; // console.log(name); // } // console.log(name); // 2.没有块级作用域引起的问题 (if的块级) var func; if (true) { var name = 'pengfei'; func = function () {原创 2022-05-07 21:29:42 · 591 阅读 · 3 评论 -
Vue的计算属性setter和getter
每一个计算属性都包含一个getter和一个setter一般情况,我们只是使用getter来读取。在某些情况下,你也可以提供一个setter方法(不常用)<div id="app"> <h2>{{firstName}}</h2> <h2>{{lastName}}</h2> <h2>{{fullName}}</h2> <h1>{{fullName02}}</h1>原创 2022-05-07 18:21:02 · 1258 阅读 · 3 评论 -
自定义Vue的template
自定义vue的templateSettings ===> Editor ===> Live Templates ===> Vue ===> 新增templatesAbbreviation:vueDescription: a vue templates准备好的模板<div id="app"> <h2>你好Vue,{{message}}</h2></div><!--从CDN引入vue.j原创 2022-05-05 16:02:37 · 483 阅读 · 0 评论 -
Vue 动态属性数据绑定
v-bind的基本用法<div id="app" style="background: springgreen"> <a v-bind:href="bilibili">哔哩哔哩(v-bind:href) </a> <br> <!--语法糖的写法--> <a :href="bilibili">哔哩哔哩(语法糖的写法)</a></div><!--从CDN引入vue原创 2022-04-23 18:56:04 · 801 阅读 · 0 评论 -
Vue页面插值操作
用样例详细的说明插值表达式{{}}的使用,将模型数据插入到页面当中。<div id="app" style="background-color:springgreen"> <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--> <h2>{{firstName.length}}(使用‘.’获取属性)</h2> <h2>{{firstName + lastName}}(字符串拼接)</h2&g原创 2022-04-22 18:13:49 · 1275 阅读 · 0 评论 -
Vue实现用户的点击事件
定义数据counter,用于表示计数器数字,初始值设置为0方法一<!--从CDN引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><div id="app"> <h3>点击次数:{{counter}}</h3> <button v-on:click="counter++">+&原创 2022-04-22 18:00:14 · 1346 阅读 · 0 评论 -
第一个Vue程序
vue是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。如何安装Vue尝试 Vue.js 最简单的方法是使用 [Hello World 例子]你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以[创建一原创 2022-04-21 21:05:02 · 161 阅读 · 0 评论 -
Vue学习----hello Vue
Vue学习1 安装vue方式一:直接通过CDN引入开发环境引入,最好有明确的版本号:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>2 实现第一个vue程序在一个html页面``标签中写如下代码 <div id="app"> <h2>你好啊,{{message}}</h2> </div>原创 2020-10-01 23:47:17 · 141 阅读 · 0 评论