采纳了vue-cli 生成了后生可畏套webpack的沙盘。

 1 !function(win, lib) {
 2     var timer,
 3         doc     = win.document,
 4         docElem = doc.documentElement,
 5         vpMeta   = doc.querySelector('meta[name="viewport"]'),
 6         dpr   = 1,
 7         scale = 1;
 8     // 插入 viewport meta
 9     if (!vpMeta) {
10         vpMeta = doc.createElement("meta");
11 
12         vpMeta.setAttribute("name", "viewport");
13         vpMeta.setAttribute("content",
14             "width=device-width,initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
15 
16         if (docElem.firstElementChild) {    //在头部添加viewpoint
17             docElem.firstElementChild.appendChild(vpMeta)
18         } else {            // 如果获取不到头部,就用创建元素然后写入发方法来写入到页面里
19             var div = doc.createElement("div");
20             div.appendChild(vpMeta);
21             doc.write(div.innerHTML);
22         }
23     }
24     function setFontSize() {
25         var winWidth = docElem.getBoundingClientRect().width;
26          if(winWidth>750){winWidth=750}  //限制最大宽度
27         // 根节点 fontSize 根据宽度决定(到时候算rem的时候,就用设计稿宽度/)
28         var baseSize = winWidth / 10;
29         docElem.style.fontSize = baseSize + "px";
30     }
31     // 调整窗口时重置
32     win.addEventListener("resize", function() {
33         clearTimeout(timer);
34         timer = setTimeout(setFontSize, 300);
35     }, false);
36     // orientationchange 时也需要重算下吧(翻转设备)
37     win.addEventListener("orientationchange", function() {
38         clearTimeout(timer);
39         timer = setTimeout(setFontSize, 300);
40     }, false);
41     // pageshow
42     // keyword: 倒退 缓存相关
43     win.addEventListener("pageshow", function(e) {
44         if (e.persisted) {
45             clearTimeout(timer);
46             timer = setTimeout(setFontSize, 300);
47         }
48     }, false);
49     // 设置基准字体
50     if ("complete" === doc.readyState) {
51         doc.body.style.fontSize = 24/75 + "rem";
52     } else {
53         doc.addEventListener("DOMContentLoaded", function() {
54             doc.body.style.fontSize = 24/75 + "rem";
55         }, false);
56     }
57     setFontSize();
58 }(window, window.lib || (window.lib = {}));

一、介绍

TypeScript是JavaScript的超集,扩充了JavaScript的语法,也表示她帮忙具有的
JavaScript 语法

它支持ES6规范

强大的IDE支持

是Angular2的成本语言

 

从此在中间练习 vue-router。

 页面样式CSS代码使用rem恐怕em相对单位就可以!

二、搭建TypeScript开采情状

以下是有的记录。

compiler(编译器)

作用:能将TypeScript编译成JavaScript。

 

1.安装Node.js

1.动态路由的布置

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'history'
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'Goodslist',
      component: Goodslist
    }
  ]
})

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表
        <!-- 获取参数 -->
        <p>{{$route.params.goodsId}}</p>
           <p>{{$route.params.name}}</p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

拜谒情势:history是带着地点访谈,hash则是用#来访问

图片 1

 

 

2.用npm包管理工科具下载TypeScript包并在大局碰到下安装

开辟cmd窗口输入

npm install -g typescript

图片 2

2.嵌套路由

  使用情况,菜单。

<!-- Goodslist.vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
    </div>

</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Title.vue -->
<template>
    这是商品标题
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Image.vue -->
<template>
    <div>this is goods image</div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'
import Title from '@/views/Title'
import Img from '@/views/Image'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'hash',
  routes: [
    {
      path: '/goods',
      name: 'Goodslist',
      component: Goodslist,
      // 使用嵌套路由
      // 一个数组,里面存的是对象,每个对象为一个组件
      children:[
          {
              path:'title',
              name:'title',
              component: Title
          },
          {
              path:'img',
              name:'img',
              component:Img
          }
      ]
    }
  ]
})

图片 3

 

3.应用WebStorm自动编写翻译

Settings -> Languaes & Frameworks -> TypeScript 中Enable
TypeScript Compiler打钩。

图片 4

图片 5

 

3.编制程序式路由

  以文害辞,正是经过写js代码来兑现路由啦。

  使用的函数: $router.push(“name”) 或 $router.push({ path :”name “}) 

  在跳转的时候还足以参加传递的参数。

  $router.push({ path:”name?b=222″}) 或 $router.push({path:’name’
,query:{a:111}})

  还足以应用 

  $router.go(1) //类似于 history()

  

  

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
        <router-link to="/cart">前往购物车</router-link>
        <button @click='jump'>btn跳转</button>
    </div>

</template>

<script type="ecmascript-6">
    export default{
        methods:{
            jump(){
                this.$router.push({path:'/cart?goodsId=333'})
            }
        }
    }
</script>

<style rel="stylesheet">

</style>

<!-- vue -->
<template>
    <div>
        this is cart page
        <p>
            {{$route.query.goodsId}}
        </p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

本次在cart页面接受参数使用的是query 而不是以前动态路由的 params那是因为

query是页面之间传递参数时候用的 而 params是组件之间传递参数用的。

 

三、字符串新特征

1.用”`”符号完结多行字符串(键盘上1边缘的不得了键 图片 6

图片 7

 

2.字符串模板

TypeScript:

var myname = "zzz";

var getName = function () {
    return "zzz";
}

console.log(`hello ${myname}`)
console.log(`hello ${getName()}`)

 

 JavaScript:

var myname = "zzz";
var getName = function () {
    return "zzz";
};
console.log("hello " + myname);
console.log("hello " + getName());

比较之下双引号越来越直观,在编辑html代码时非常非常好用!

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章