vue的使用

直接引用或安装npm依赖

---

学习网站：https://cn.vuejs.org/v2/api/#vm-mount
vue路由：https://router.vuejs.org/zh-cn/essentials/getting-started.html?q=
登录成功跳转：https://segmentfault.com/a/1190000008558024

组件：
iVew组件：https://www.iviewui.com/components/color
element组件：http://element.eleme.io/#/zh-CN/component/icon

vue安装：
网站：http://www.runoob.com/w3cnote/vue2-start-coding.html
https://cn.vuejs.org/v2/guide/installation.html#main

npm init // 初始化文件夹

npm install vue –save //安装依赖的库、加–dev会安装到开发的依赖库里去

npm install vue-resource –save

npm install –save axios //调用json数据，需要install –save axios;然后 import axios from ‘axios’

安装淘宝镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
npm install -g cnpm –registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]
安装webpack
cnpm install webpack -g
安装vue脚手架
npm install vue-cli -g
在硬盘上找一个文件夹放工程用的，在终端中进入该目录
cd 目录路径
安装项目依赖
npm install //一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。
cnpm install //不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)
cnpm install vue-router vue-resource –save //安装 vue 路由模块vue-router和网络请求模块vue-resource

全局安装
vue-cli $ npm install –global vue-cli

创建一个基于 webpack 模板的新项目
$ vue init webpack my-project #

安装依赖，走你 cdmy−project
npm run dev

---

路由：
首先引入vue-router
npm：在main.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import About from '@/pages/About'import Login from '@/pages/Login'Vue.use(Router)export default new Router({  routes: [    {      path: '/Login',      component: Login    }, {      path: '/',      meta: {        requireAuth: true      },      component: Home    }, {      path: '/About',      component: About    }  ]})

或直接引用js：http://jsfiddle.net/yyx990803/xgrjzsup/

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

1.方法一：设定点击几秒后跳转

  setTimeout(() => {           this.$router.push({ path: '/' }) // 登录成功》跳转到主页        }, 1000)

2.npm方法二

在页面template里

<router-link to="/">首页</router-link><router-view></router-view>

html:

<div id="app">  <router-link to="/foo">Go to Foo</router-link>  <router-link to="/bar">Go to Bar</router-link></div>

css:

.router-link-active {  color: red;}

js:

const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }const routes = [  { path: '/foo', component: Foo },  { path: '/bar', component: Bar }]const router = new VueRouter({  routes})const app = new Vue({  router}).$mount('#app')

---

数据缓存：

1.在src里建一个store.js:
// 数据储存

const STORAGE_KEY = 'todos-vuejs'export default{  fetch: function () {    return JSON.parse(window.localStorage.getItem(      STORAGE_KEY) || '[]')  },  save: function (items) {    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))  }}

2.在js里引用：

import Store from ‘./store.js’

3.在data方法里：

data: function () { return { items: Store.fetch(), } } 

4.在方法加上：

  watch: {    items: {      handler: function (items) {        Store.save(items)      },      deep: true    }  },  methods: {    doThis: function (item) {      item.isFinished = !item.isFinished    },    addNew: function () {      console.log(this.items)      this.items.push({        label: this.newItem,        isFinished: false      })      this.newItem = ''    },    handleChange: function (msg) {      this.username = msg    }  }

5.在页面template里调用addNew方法，并将输入的内容更新到页面：

<input type="text" v-model="newItem" v-on:keyup.enter="addNew"><ul>    <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="doThis(item)">{{item.label}}</li></ul>

---

vue 请求后台数据

方法一：http://blog.csdn.net/vergilgeekopen/article/details/68954940
在入口函数中加入

import VueResource from ‘vue-resource’ Vue.use(VueResource);

在package.json文件中加入

 "dependencies": {    "vue": "^2.2.6",    "vue-resource":"^1.2.1"  },

请求如下:

 mounted: function () {        // GET /someUrl        this.$http.get('http://localhost:8088/test').then(response => {             console.log(response.data);            // get body data            // this.someData = response.body;        }, response => {            console.log("error");        });    },

注意

1.在请求接口数据时,涉及到跨域请求
出现下面错误:

XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

解决办法:在接口中设置

response.setHeader(“Access-Control-Allow-Origin”, “*”); 

或

　　1）恳求的url是PHP的，须要PHP中echo：header（""Access-Control-Allow-Origin: *""）;　　2）html的，须要 <meta http-equiv="Access-Control-Allow-Origin" content="*">

2.使用jsonp请求
但是出现如下错误

Uncaught SyntaxError: Unexpected token 

查看请求,数据已返回,未解决.