VUE笔记

• 建立项目
• 安装npm

npm实际上是Node.js的包管理工具（package manager）。npm能够根据依赖关系，把全部依赖的包都下载下来并管理起来。不然，靠咱们本身手动管理，确定既麻烦又容易出错。要安装npm只需安装node.js便可，经过node.js官网（https://nodejs.org/en/）下载node.js，按步骤安装便可，在Windows上安装时务必选择所有组件，包括勾选Add to Path。安装完成后，请打开命令提示符，而后输入node -v，若是安装正常有版本信息输出表明安装完成，此时能够输入npm -v 检测npm是否安装成功，若是安装成功，则会有npm版本信息。

• 安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

• 安装VUE

npm install -g vue-cli

• 初始化项目

vue init webpack demo / vue init webpack-simple demo（完整的/简化的）

• 下载依赖

cd demo(项目目录)

cnpm install（下载依赖）

• 运行项目

npm run dev

• Vue-resource使用（https://github.com/pagekit/vue-resource#cdn）
• 安装：在项目根目录中执行如下命令（必须添加--save   这样依赖才能加入到package.json中）

cnpm install vue-resource --save

• 导入到mian.js

<script>

  import VueResource from 'vue-resource';

  Vue.use(VueResource);

</script>

• 使用

var api = api;

this.$http.get(api).then((response)=>{

  console.log(response);

  var list = response.body.data;

  this.list = list;

},response=>{

  console.log(err);

})

• axios使用(https://github.com/axios/axios)
• 安装：在项目根目录中执行如下命令（必须添加--save   这样依赖才能加入到package.json中）

cnpm install axios  --save

• 引入：哪里用哪里引入（在哪一个文件中使用就在哪一个文件中引入）

<script>

  import Axios from 'axios';

</script>

• 使用

Axios.get(api).then((response)=>{

  console.log(response);
 
  var list = response.data.data;

  this.list = list;

}).catch((err)=>{

  console.log(err);

})

• 引入组件
• 首先建立一个组件页面
• 在须要引入的页面引入组件

import Home from '组件的相对路径';

• 在components注册组件

components:{

  'v-home':Home,  //v-home 为自定义标签

}

• 在页面中须要使用组件的地方引用自定义标签

<v-home></v-home>

• 父组件给子组件传值
• 在调用子组件标签中绑定属性

<!--父组件给子组件传值：在调用子组件标签中绑定自定义属性title并赋值title  如果方法  不要加()-->

<v-header :title="title" :run="run"></v-header>

• 接收父组件的传值

props:['title','run']//接收父组件传过来的值 props是一个数组

• 使用父组件传过来的值

<div>我是头部组件--{{title}}</div>//这里的title就是props中接收的值
<button @click="run()">子组件执行父组件run方法</button>

• 父组件主动获取子组件数据和方法
• 在home组件引用子组件的时候定义ref

<v-header ref="header"></v-header> //header 至关于给子组件给一个id

• 在须要用到子组件方法或属性的时候进行调用

this.$refs.header.msg   //获取子组件中msg属性

this.$refs.header.run();  //执行子组件中的run()方法

• 子组件主动获取父组件数据和方法
• 在子组件中须要用到父组件属性或方法的地方直接调用

this.$parent.msg   //获取父组件中msg属性

this.$parent.run();  //执行父组件中的run()方法

• 非父子组件传值

• 新建一个空的vue实例

import Vue from 'vue'

var VueEvent = new Vue();

• 将新建的Vue实例暴露出去

export default VueEvent;

• 广播数据

//在须要传值的页面引入vue实例
import VueEvent from "新建空的Vue实例.js文件的相对路径"
//VueEvent为新建的Vue实例 to-news 为该广播数据的key  this.msg为要广播的数据
VueEvent.$emit("to-news",this.msg)

• 接收广播数据

//在须要接收广播数据的页面引入新建的Vue实例
import VueEvent from "新建空的Vue实例.js文件的相对路径"
//监听广播数据
mounted(){
  //to-news为广播数据时的key
  VueEvent.$on("to-news",data=>{
     console.log(data);
  })
}

• Vue路由
• 介绍

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的连接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为
• 安装

npm install vue-router --save  /  cnpm install vue-router --save

• 在main.js中引入并Vue.use(VueRouter)

import VueRouter from 'vue-router'

Vue.use(VueRouter)

• 配置路由

1. 建立组件，引入组件

//引入组件
import News from "组件1的相对路径";
import Home from "组件2的相对路径";

     2. 定义路由

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', component: Bar } //默认页面
]

   在这里，也能够为路由命名，例如：

const routes = [
  { path: '/foo', component: Foo,name:'Foo' },
  { path: '/bar', component: Bar,name:'Bar' }
]

     3. 实例化VueRouter

const router = new VueRouter({
  routes // (缩写) 至关于 routes: routes
})

    4. 建立和挂载根实例

const app = new Vue({
  router
}).$mount('#app')

     5. 使用router-link组件导航

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

    若是是已命名路由，也能够写成：

<router-link to="{name:'Foo'}">Go to Foo</router-link>
 <router-link to="{name:'Bar'}">Go to Bar</router-link>

   若是要带参数形式以下：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

    这种形式下，目的地地址至关于： 

/user/123

    6. 渲染路由匹配到的组件

<router-view></router-view>

• Vue动态路由
• 使用场景

1.  把某种模式匹配到的全部路由，全都映射到同个组件
2. 传递参数

• 配置方法

在配置路由时，path参数动态变化部分用":参数名"代替，当匹配到一个路由时，参数值会被设置到 this.$route.params，能够在每一个组件内使用。举例以下：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

  3. 对于普通的路由，可使用get传值

模式	匹配路径	$route.params.qurey
/user?id=123	/user	{ id: '123' }

• 编程式导航（经过js跳转）

除了使用 <router-link> 建立 a 标签来定义导航连接，咱们还能够借助 router 的实例方法，经过编写代码来实现。

• router.push(location, onComplete?, onAbort?)

想要导航到不一样的 URL，则使用 this.$router.push() 方法。这个方法会向 history 栈添加一个新的记录，因此，当用户点击浏览器后退按钮时，则回到以前的 URL

相比：

声明式	编程式
<router-link :to="...">	this.$router.push(...)

 该方法的参数能够是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串  
router.push('home') // 跳转到/home

// 对象   home是配置路由时配置的组件路径 // 跳转到/home
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) // 跳转到/user/123

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) //跳转到 /register?plan=private

注意：若是提供了 path，params 会被忽略，上述例子中的 query 并不属于这种状况。取而代之的是下面例子的作法，你须要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

一样的规则也适用于 router-link 组件的 to 属性。

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调做为第二个和第三个参数。这些回调将会在导航成功完成 (在全部的异步钩子被解析以后) 或终止 (导航到相同的路由、或在当前导航完成以前导航到另外一个不一样的路由) 的时候进行相应的调用。

注意： 若是目的地和当前路由相同，只有参数发生了改变 (好比从一个用户资料到另外一个 /users/1 -> /users/2)，你须要使用 beforeRouteUpdate 来响应这个变化 (好比抓取用户信息)。

• router.replace(location, onComplete?, onAbort?)

跟 this,$router.push() 很像，惟一的不一样就是，它不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

• router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，相似 window.history.go(n)。

例子

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 若是 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)