11-vue_day02

day02内容

2. 畅想
   vue/react/angular/支付宝小程序【钉钉】/微信小程序 (语法都是基于es6)
   （看点资讯精选）案例：
   编程过程：
   1. 页面重构 -> 2. 样式添加 -> 3. ajax与服务器进行交互$.ajax() -> 4. dom操作【vue 数据绑定】
   1. 底层代码操作阶段 【10平米 - 扫把打扫（dom操作）】
      组件、页面布局 - 完全自己比那些
      交互 - ajax XMLHttpRequest
      dom操作 - DOM
   2. dom驱动框架操作阶段 【100平米 - 戴森吸尘器（jquery）】
      组件、页面布局 - bootstrap
      交互 - jquery
      dom操作 - jquery
   3. vue企业级开发阶段 【1000平米 - 佣人（dom操作）】
      组件、页面布局 - bootstrap
      交互 - jquery【axios】
      vue 框架
      0 - dom操作
3. vue基础
   在使用vue的时候，一定要先去除掉dom思想！！！

1. 如何使用

1. 引入第三方库
  1) 离线包 js(下载)
  2) cdn在线引用（必须连接外网）
  3) npm引用（企业级开发，模块化）
    node 模块化
    npm ：node 模块 管理机制
    > npm install jQuery --save
    > npm install vue --save
2. 调用第三方库
  jQuery - $
  Vue 构造函数

  let vm = new Vue({
    el:"",
    data:{

    }
  })

2. 知识点

html css ecmascript ppt
jquery vue vueRouter vuex element   查看官方文档 
vue 作者 尤雨溪（浙江）
0. vue实例对象
  let vm = new Vue({data:{message:"hello"}})

  vm属于Vue的实例对象，这个对象可以直接访问Vue构造函数参数中的data中的值
  vm.message

  vue可以对data中的数据进行监听，当data中数据发生改变的时候，vue会自动进行网页的重新渲染。
    message:'hello world',
    array:[1,2,3]
    默认情况下，vue监听栈区的改变，message为基本类型的变量，其值保存在栈区，对于array来说，为引用数据类型，引用地址保存在栈区；
  
  如果引用类型的值的改变无法引起视图的更新，那么解决方案只有一个，就是强制更新引用地址

    let vm = new Vue({
      el:"#app",
      data:{
        obj:{},
        array:[]
      }
    })

    vm.array = [...vm.array,3]        // 将一个新的数组赋值给了vm.array
    vm.obj = {...vm.obj,name:"terry"} // 将一个新的对象赋值给了vm.obj
    vm.obj = Object.assign({},vm.obj)
1. 声明式渲染 
  1) 直接输出变量
    {{message}}
  2) 输出表达式
    {{++num}}
2. 列表渲染
  <li v-for="(p,index) in peoples" v-bind:key="p.id">
    {{p.name}}
  </li>

  1) v-for="p in peoples"
  2) v-for="(p,index) in peoples"
    p为数组元素，index为索引
  3) v-for="n in 10"
    可以对数字直接进行遍历，从1开始
  4) v-for="(v,k) in people"
  5) 
  在遍历的时候，key属性的值应该绑定不同的值，这样可以区分每个li,在后期进行dom操作的时候，是整个dom节点都进行操作。 

3. 条件渲染
  登录逻辑(重点！)
    1) 点击登录按钮
    2) 弹出模态框，要求用户输入用户名密码
    3) 通过ajax调用后端的登录接口,如果用户名密码没有问题，返回一个token
    4) 通过token获取用户的基本信息
    5) 将用户信息缓存到浏览器中（H5 API ）
      sessionStorage
      localStorage
    6) 退出
      将用户信息从浏览器缓存中移除掉
  <div v-if="user==null"></div>
  <div v-else></div>

4. 属性绑定
  <li v-for="(p,index) in peoples" v-bind:key="p.id">
    {{p.name}}
  </li>
  动态为key绑定一个属性，这个属性为p.id
  v-bind具有简写形式
    v-bind:key="p.id"
    =>
    :key="p.id"
5. 事件绑定
  jquery中使用的是先获取dom，再在dom中进行事件绑定

  使用声明式的事件绑定（简单）
  事件绑定
    <div v-on:click="clickHandler"></div>
    <div v-on:click="alert(item)"></div>

  传递参数（常量）
    <div v-on:click="clickHandler(1)"></div>
  传递参数（变量）
    <div v-on:click="clickHandler(item)"></div>
  获取时间对象【不建议使用】
    <div v-on:click="clickHandler(item,$event)"></div>
  事件修饰符
    v-on:click.xxx
      .prevent
      .stop 
  按键码
    <input v-on:keyup.13="submit">
      .enter
      .tab
      .delete (捕获“删除”和“退格”键)
      .esc
      .space
      .up
      .down
      .left
      .right



6. 表单输入绑定
7. vue实例的生命周期
8. 计算属性与监听器
9. 过滤器
10.组件基础
11.高级组件
12.渲染函数

---

云服务器搭建（阿里云）

1. mysql数据库
2. sql导入到数据库中
3. 安装jdk环境
4. 运行jar包

-----思考-----

1. 如何理解语义化标签
   html标签具有语义，让程序员看到代码就知道该代码表示的是什么意思
   < header>
   < div class=“logo”>
   < img src="">
   </ div>
   < nav>
   < ul>
   < li>< a>首页< /a>< /li>
   < li>< a>首页</ a>< /li>
   < li>< a>首页</ a></ li>
   < li>< a>首页< /a>< /li>
   < /ul>
   < /nav>
   < /header>
2. 一般在重构的时候，我们都会选择重置样式（reset），请问为什么？
   body {
   margin:0;
   }
   ul,ol {
   margin:0;
   padding:0;
   list-style:none;
   }
3. 布局目的？？
   突破块元素的默认特性（独占一行、宽度为100%、高度由内容决定），布局就是为了让块在一行中并列显示，或者是在z轴上折叠显示