前端-vue
记录学习vue的笔记
方方方DG
报之以歌
展开
-
09 VUE的书籍购物车案例
书籍购物车案例1、html文件:index.html<!DOCTYPE html><html lang = "en"> <head> <meta charset = "UTF-8"> <title>练习</title> <link rel = "stylesheet" href = "style.css"> </head> <body> <di原创 2020-11-17 15:59:01 · 107 阅读 · 0 评论 -
08 vue中的循环遍历及数组的补充
循环遍历1、v-for遍历数组<div id=app> <ul> <li v-for="item in names">{{item}}</li> </ul></div><script src = "../js/vue.js"></script><script> const app = new vue({ el : "#app", data : {原创 2020-11-17 15:57:07 · 709 阅读 · 0 评论 -
07 条件判断小案例
案例点击按钮切换用户要登录的方式,分别为用户名和邮箱<div id = app> <span v-if = "isUser"> <!--for的作用为连接lable和input连接在一起,点击用户账号时光标会跳到连接在一起的输入框--> <lable for = "userName">用户账号</lable> <input type = "text" id = "userName" placeholder =原创 2020-11-17 15:55:20 · 220 阅读 · 0 评论 -
06 vue中的条件判断
条件判断1、v-ifv-if后面的条件为false时,对应的元素以及其子元素不会渲染,也就是不会有对应的标签出现在DOM中。案例一:<div id = app> <div v-if = "isShow"> <p>aaa</p> <p>bbb</p> <P>ccc</P> <p>ddd</p> <p>{{score}}</原创 2020-11-17 15:54:46 · 297 阅读 · 0 评论 -
05 vue中的事件监听
事件监听1、v-on作用:绑定事件监听器缩写:@预期:Function | InLine Statement | Object参数:event(1)基本用法<div id = "app"> <h2>{{counter}}</h2> <!-- 这两行是最基本的写法,基本不用,因为有复杂操作的话会写的很多 --> <!-- <button v-on:click = "counter++">+</button&g原创 2020-11-17 15:54:01 · 219 阅读 · 0 评论 -
04 vue中的计算属性 computed
计算属性 (computed)1、案例<div id = "app"> <h2>{{fullName}}</h2></div><script src = "../js/vue.js"></script><script> const app = new vue({ el : "#app", data : { firstName : "Lebron", lastName原创 2020-11-17 15:52:56 · 63 阅读 · 0 评论 -
03 vue中的基础语法
插值操作1、Mustache<p>{{message}}</p>就是双大括号{{}}2、v-once<h2 v-once> {{message}} </h2>该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。3、v-html<h2 v-html> {{message}} </h2>某些情况下,从服务器请求到的数据本身是一个HTML代码,如果直接用{{}}来输出,会将HTML代码也一起输出,但我们希望的是按原创 2020-11-17 15:52:26 · 65 阅读 · 0 评论 -
02 vue基础
vue一、样式代码ps:代码间隔要为两个空格<body> <div id = "app">{{massage}}</div> <script src = "../js/vue.js"></script> //引入vue <script> //let (变量) const (常量) const app = new vue({ el : "app", //用于挂载要管理的元素原创 2020-11-17 15:43:20 · 74 阅读 · 0 评论 -
1、vue及element的安装及运用
typora-root-url: imagetypora-copy-images-to: image基本概念:1.VueVue.js是目前最火的一个前端框架,它和Angular.js、React.js一起,并成为前端三大主流框架。Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发),前端的主要工作,主要负责MVC中的V这一层,主要工作就是和界面打交道,来制作前端页面效果。Vue的核心库只关注视.原创 2020-11-17 15:42:30 · 323 阅读 · 0 评论 -
简单了解ES6的一些新特性
一、块级作用域ES5中的 var 没有块级作用域,ES6中的 let 有块级作用域,所以定义变量要用 let 。二、const的使用1、主要作用是将某个变量修饰为常量,用const修饰的常量不可再次赋值。2、在使用const定义标识符时,必须进行赋值。3、常量的含义是指向的对象不能修改,,但是可以改变对象内部的属性。4、在ES6开发中,建议优先使用const,只有需要改变某一个标识符的时候才使用let三、对象字面量的增强写法1、字面量:const obj = new Object() /原创 2020-11-17 15:19:13 · 82 阅读 · 0 评论