乐优商城day04

所有代码发布在 [https://github.com/hades0525/leyou]

 

day04

2019年1月21日

15:30

 

ES6新特性：

1. 新的关键字
   1. let：定义局部变量
   2. const：定义常量
2. 解构表达式
   1.  

let arr =[2,5,-1,9]

取得前两个值 let [x,y]=arr

取得后两个值 let [,,a,b]=arr

取得处了第一个后面的值放到一个数组中 let [,…rest] = arr

1.  

let p ={name:"jack",age:21}

取得对象中的值 let {name,age}  = p

取得对象中的值并且赋值给n  let {name:n} = p

复制对象到obj  let {…obj} = p;

1. 函数优化
   1. const add = (a,b) => a+b;
   2. cosnt p ={

name:"mary",

age:21,

sayhello(){

console.log("hello es6");

}

}

1. const hello = ({name,age}) => console.log(name,age);

hello(p);

1. map和reduce
   1.  

let arr=['2','5','-10']

把字符数组变为int数组 let arr2=arr.map(s => parseInt(s));

1. 1.   arr2.reduce((a,b) => a+b,0)

 

Vue前端框架：

1. 1. 2005年，前端主要用ajax与后台交互，操作dom实现动态界面，用jquery框架
   2. 2009年发布基于时间循环的异步IO框架:Node.js.使JS成为前后端统一编程语言。

在node的基础上，涌现了一大批前端框架。

1. 1. MVVM模式：
      1. M：model，模型，包括诗句和一些基本操作

V：view，视图，页面渲染结果

VM:View-Model,模型与视图间的双向操作(无需开发人员干涉)

1. 1. 把dom操作完全封装，开发人员无需考虑model与view如何互相影响，只需关注如何操作model。

使用：

1. 1. 安装node.js
      1. 切换镜像  npm install nrm -g

nrm ls        nrm use taobao           nrm test taobao   安装完后，重启一次

1. 1. 新建空项目，新建static web module。

终端引入vue：npm inti -y                 npm install vue --save

1. 1. 新建html，引入依赖<scriptsrc="node_modules/vue/dist/vue.js"></script>
   2. 示例

<div id="app">     <button @click="handleClick()">点我</button>     <br>     <input type="text" v-model="num"> <button @click="num++">+</button>     <h1>         {{name}}  非常帅！！<br>         {{num}}为人     </h1> </div>   <script src="node_modules/vue/dist/vue.js"></script> <script>     const app = new Vue({         el:"#app",//element,vue作用的标签         data:{             name:"虎哥",             num:1         },         methods:{             handleClick(){                 console.log("hello!");             }         }     }); </script>

1. 1. Vue的生命周期

beforecreate,created等等…

1. 1. Vue的指令(用在标签上)
      1. 插值表达式{{}}:一般不用，因为当网速较差时会出现插值闪烁
      2. v-text：如果数据有html代码,会作为普通文本输出

v-html：会把html代码渲染

1. 1. v-model：双向绑定，view和model相互影响

可用于：input,select,textarea,checkbox,radio等

<h1>开设的课程</h1>     <input type="checkbox" v-model="lessons" value="java"/>java <br>     <input type="checkbox" v-model="lessons" value="python"/>python <br>     <input type="checkbox" v-model="lessons" value="c# "/>c# <br>       <h1>         以购买课程：{{lessons.join("","")}}     </h1>   data:{ lessons:[] },

1. 1. v-on：用于绑定事件 ，可以简写 v-on:click简写为@click
      1. 阻止事件冒泡(即点击子标签触发了父标签的事件):@click.stop
      2. @click.prevent:阻止事件发生
      3. .capture:使事件捕获模式
      4. .self：只有元素自身触发事件才执行
      5. .one：之执行一次
   2. v-for:for循环遍历

users:[                 {name:"aa",gender:"女",age:22},                 {name:"a1a",gender:"女",age:22},                 {name:"a2a",gender:"女",age:22},                 {name:"a3a",gender:"女",age:22}             ]

 

1. 1. 数组遍历

<!--数组遍历-->     <ul>         <li v-for="(user,idx) in users">             {{idx}}  {{user.name + ","+user.gender+","+user.age}}         </li>     </ul>

1. 1. 对象遍历

<ul>         <li v-for="(value,key,idx) in users[0]">             {{key+"::"+value+"_"+idx}}         </li>     </ul>

1. 1. 数字遍历

<ul>         <li v-for="i in 5">             {{i}}         </li>     </ul>

1. 1. :key  <liv-for="(user,idx)inusers"  :key="idx">

为遍历的每一项添加一个key，当data里面的数据项变更时，根据key可以直接找到修改的那一项，只重新渲染修改那一项，不去重新渲染其他的，提高渲染的效率。

1. 1. v-if：当得到结果为true，所在元素才会被渲染，不然会被在页面删除，更加消耗性能

<!--v-if-->     <button @click="show = !show">点击切换</button><br/>     <h1 v-if="show">         你好     </h1>     <ul>         <li v-for="i in 5">{{i}}             <span v-if="i%2 === 0">偶数：{{i}}</span>             <span v-else style="background-color: blue;">奇数：{{i}}</span>         </li>     </ul>

1. 1. v-show：和v-if类似，但是它是通过css的style="display:none"实现隐藏
   2. v-bind：把普通的html属性变成vue的特有属性，可以简写为冒号:

<divid="box":class="color"> 我是盒子 </div>
<button@click="isRed=!isRed">点击切换颜色</button> <divid="box":class="{red:isRed,blue:!isRed}"> 我是盒子 </div>

1. 1. 计算属性：

computed:{ birth(){ console.log(1); constday=newDate(this.birthday); returnday.getFullYear()+"年"+day.getMonth()+"月"+day.getDay()+"日"; } }

1. 1. watch：监控

浅监控：对于值。 深监控：对于对象，要加deep属性。

watch:{             num(val,oldval){                 console.log(val,oldval);             },             person:{                 deep:true,                 handler(val){                     console.log(val.age);                 }             }         }

1. 1. 组件化
      1. 组件创建

全局组件 /*定义全局组件*/ /*    Vue.component("counter",{         template:"<button @click='count++'>点我试试,点了{{count}}次</button>",         data(){             return {                 count:0             }         }     });*/

1. 1. 局部组件

/*局部组件*/     const counter = {         template:"<button @click='count++'>点我试试,点了{{count}}次</button>",         data(){             return {                 count:0             }         }     };   components:{ counter:counter }