lianchen728的博客

原创 Vue循环遍历

v-for遍历数组<div id="app"> <!-- 在遍历过程中没有使用下标值 --> <ul> <li v-for="item in names">{{item}}</li> </ul> <!-- 在遍历过程中，获取索引值 --> <ul> <li v-for="(item,index) in names">{{index+1}

原创 Vue条件判断

v-ifv-if后面的条件为false时，对应元素及子元素不会渲染，也就是说不会有对应的标签出现在DOM中。<div id="app"> <h2 v-if="isShow">{{message}}</h2> </div> <script src="../../js/vue.js"></script> <script> const app = new Vue({ el: '#app'

原创 v-on语法

v-on参数在前端开发过程中，我们呢经常和用户交互，比如点击，键盘等事件，在Vue中监听事件用v-on指令。 <div id="app"> <h2>{{counter}}</h2> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> <!-- 语法糖写法 -->

原创 es6对象字面量的增强写法

属性增强 const name = "why"; const age = 17; const height = 1.9; //es5写法 const obj = { name: name, age: age, height: height } //es6增强写法 const obj = { name, age, height } console.log(obj);

原创 计算属性

什么是计算属性在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况下我们可能通过对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。比如我们有firstName和LastName两个变量，我们需要显示完整的名称，但是如果很多个地方都需要完整的名称，我们就需要写多个{{firstName}}和{{lastName}}<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <

原创 v-bind介绍

v-bind除了将值插入到模板内容中，我们也需要将一些属性动态绑定。比如动态绑定a元素的href属性或者动态绑定img的src属性，这个时候我们就需要v-bind方法了。v-bind基础v-bind用于绑定一个或多个属性值，通过Vue实例中的data绑定元素的src和href，代码如下:<div id="app"> <!-- 错误的做法这里不可以适应Mustache语法 --> <!-- <img src="{{imgURL}}" alt=""&g

原创 vue插值语法

Mustache语法（双大括号）<div id="app"> <h2>{{message}}</h2> <h2>{{message}},李银河</h2> <h2>{{firstName+lastName}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>{{firstName}} {{lastName}.

原创 ES6新增特性——解构赋值

ES6按照一定模式，从数组和对象中提取值，对变量进行赋值，称作解构赋值。数组解构赋值按照下面的形式进行解构赋值。let [a,b,c]=[1,2,3];console.log(a);//1console.log(b);//2console.log(c);//3若解构不成功，变量的值为undefined。 let [foo] = []; console.log(foo);//undefined let [a, b] = [1]; console

原创 let,var,const关键字

变量ES的变量松散类型，变量可以保存任何类型的数据。ES6之前只用var来声明，ES6之后添加了const和let。var 关键字var message;//定义变量未初始化，变量保存为undefinedvar message="hi";//变量初始化了，值为himessage=100;//message的值被覆盖成100.合法，但不推荐var 声明使用var声明的变量会成为包含它函数的局部变量。去掉var声明即为全局变量function test(){var message="hi

原创 JS DOM基础思维导图

原创 CSS基本知识点思维导图

原创 html基础知识点思维导图