![](https://img-blog.csdnimg.cn/20210527163941536.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端-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 · 109 阅读 · 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 · 732 阅读 · 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 · 224 阅读 · 0 评论 -
06 vue中的条件判断
条件判断 1、v-if v-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 · 313 阅读 · 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 · 225 阅读 · 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 · 65 阅读 · 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 · 68 阅读 · 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 · 77 阅读 · 0 评论 -
1、vue及element的安装及运用
typora-root-url: image typora-copy-images-to: image 基本概念: 1.Vue Vue.js是目前最火的一个前端框架,它和Angular.js、React.js一起,并成为前端三大主流框架。Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发),前端的主要工作,主要负责MVC中的V这一层,主要工作就是和界面打交道,来制作前端页面效果。Vue的核心库只关注视.原创 2020-11-17 15:42:30 · 331 阅读 · 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 · 85 阅读 · 0 评论