For You > vue2.0用法分析

vue2.0用法分析

2018-10-15

vue2.0用法分析

vue2.0用法分析

HTML

1
2
3
4
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

js

1
2
3
4
5
6
7
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});/*不需要使用$mount('#app')*/

路由注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var router = new Router({
  routes: [
    {
      path: '/goods',
      component: goods
    },
    {
      path: '/ratings',
      component: ratings
    },
    {
      path: '/seller',
      component: seller
    }
  ],
  linkActiveClass: 'Active'
});
//routes也可以单独写出来
var routes={path: '/goods', component: goods};
var router = new Router({
    routes//等同于routes: routes
})

<router-link to="/goods">商品</router-link> vue2.0用法，更改了1.0版本中的a标签包裹的写法，router-link会被解析成a标签；

vue中 stylus文件引入

npm install stylus stylus-loader --save-dev

或者在package.json文件中写好依赖(百度写法，很简单)，然后在执行npm install

代码规范问题

引入后空格和tab键问题报错

由于这个原因引起的错误需要在编辑器修改配置，以sublime为例，打开设置->用户设置

1
2
3
4
5
6
7
8
9
10
11
12
{
    "color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
    "font_size": 14,
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Boxy Tomorrow.sublime-theme",
    "translate_tabs_to_spaces": true,
    "tab_size": 4,
    "expand_tabs_on_save": true
}

图标字体制作文件导入问题

由于制作好的图标字体分开放在了两个文件夹，所以要多css文件中引用的相关路径进行更改，否则找不到相关资源文件；

路由链接设置

1
2
3
4
5
6
7
8
9
10
11
<router-link to="home">Home</router-link> /*渲染的标签会默认加上exact-active-class类，也可以通过以下方式修改默认项*/
exact-active-class 
- type: string 
- default: "router-link-exact-active"   
Configure the active CSS class applied when the link is active with exact match. Note
the default value can also be configured globally via the linkExactActiveClass router 
constructor option.
方法演示
var router = new Router({
    linkExactActiveClass : Active/*Active为你自定义的样式*/
})

Vue-Resource

Vue.js的插件提供了使用XMLHttpRequest或JSONP 发出Web请求和处理响应的服务 ;

  • 支持Promise API和URI模板
  • 支持请求和响应的拦截器
  • 支持最新的Firefox，Chrome，Safari，Opera和IE9 +
  • 支持Vue 1.0和Vue 2.0
  • 紧凑的大小14KB（压缩5.3KB）

使用方式

1
2
3
4
5
6
7
8
9
10
11
{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

Documentation

Response（常用函数返回值类型）

A request resolves to a response object with the following properties and methods:

Property Type Description
url string Response URL origin
body Object, Blob, string Response body
headers Header Response Headers object
ok boolean HTTP status code between 200 and 299
status number HTTP status code of the response
statusText string HTTP status text of the response
Method Type Description
text() Promise Resolves the body as string
json() Promise Resolves the body as parsed JSON object
blob() Promise Resolves the body as Blob object