入门 vue 学习笔记
Vue 学习笔记
学习资料来源：网易云Vue视频：
- ES6 语法
- Vue 语法
- Vue 组件使用
- Vue 组件间通讯
- Vue router
- Vue resource
目录
用 [TOC]来生成目录：
- Vue 学习笔记
- 目录
- ES6 语法
- Vue 语法
- Vue 组件使用
- Vue 组件间通讯
- Vue router
- Vue resource
ES6 语法
变量声明 let 需要注意作用域
常量 const
数据类型 set map
- iterable类型 for( let a of set)
操作
- 解构赋值 let [a, b, c] = [1, 2, 3]
- 箭头函数 let sum = (num1, num2) => { return num1 * num2; }
- 延展操作符 ‘…’, function foo(a, b, …rest)
类 class
Vue 语法
文档
1、数据驱动 MVVM 模式
<div id="app">div> // View
new Vue({ // Vue 实例 ViewModel
el: "#app",
data:{ // Model
total_count: 0
}
})2、生命周期
Vue 组件使用
组件使用步骤
1、组件构造器
let Computer = Vue.extend({
template: `
<div>我是 Computerdiv>
`
});2、实例化组件
Vue.component("computer",Computer);3、使用组件
<div id="app">
<computer>computer>
div>组件常用方式
<div id="app">
<computer2>computer2>
div>
<template id="My_computer">
<div> 我是 Computer div>
template>
<script>
Vue.component("computer2", {
template: "#My_computer"
});
script>Vue 组件间通讯
[组件相关文档]
(https://cn.vuejs.org/v2/guide/components.html)
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。
实践代码
<body>
<div id="app">
<child1 first_name="陈" second_name="欢">child1>
<child1 first_name="蔡" second_name="喜">child1>
<div>
<my-botton @totalcount="totalCount()">my-botton>
<my-botton @totalcount="totalCount()">my-botton>
<my-botton @totalcount="totalCount()">my-botton>
<my-botton @totalcount="totalCount()">my-botton>
div>
<div>按钮总共被点击了{{total_count}}次div>
div>
<template id='child1'>
<div>
<p>{{first_name}}{{second_name}} p>
div>
template>
<template id="my_botton">
<div>
<button @click="totalCount()"> 我被点击了{{ counter }}次button>
div>
template>
<script src="js/vue.js">script>
<script>
// 组件通讯 从父到子通讯，通过 props 属性：表明可以传入的属性
Vue.component("child1",{
template: "#child1",
props: ["first_name", "second_name"]
});
Vue.component("my-botton", {
template: "#my_botton",
data(){
return {
counter: 0
};
},
methods:{
totalCount(){
this.counter += 1;
this.$emit("totalcount");
}
}
})
new Vue({
el: "#app",
data:{
total_count: 0
},
methods:{
totalCount(){
this.total_count += 1;
}
}
});
script>
body>Vue router
学习资料文档
直接上例子
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Titletitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<style>
body{
background-color: rgb(231, 231, 231);
}
style>
head>
<body>
<div id="app">
<div class="col-8 offset-2">
<h1>标题h1>
div>
<div class="row">
<nav class="col-2 offset-2">
<router-link class="list-group-item" to="/html5">html5 学院router-link>
<router-link class="list-group-item" to="/java">java 学院router-link>
<router-link class="list-group-item" to="/python">python 学院router-link>
nav>
<div class="col-6">
<router-view>router-view>
div>
div>
div>
<template id="html5">
<div>
<h1>html5 学院h1>
<div>
<router-link to="/html5/basic">基础router-link>
<router-link to="/html5/big">高级router-link>
div>
<div >
<router-view>router-view>
div>
div>
template>
<template id="java">
<div>
<h1>java 学院h1>
div>
template>
<template id="python">
<div>
<h1>python 学院h1>
div>
template>
<template id="basic">
<div>
基础
div>
template>
<template id="big">
<div>
高级
div>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.js">script>
<script>
// 组件构造器
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
let Html5 = Vue.extend({
template: "#html5"
});
let Java = Vue.extend({
template: "#java"
});
let Python = Vue.extend({
template: "#python"
});
let Basic = Vue.extend({
template: "#basic"
});
let Big = Vue.extend({
template: "#big"
});
// 路由配置
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由
const routes = [
{
path: "/html5",
component: Html5,
children:[
{path: "basic", component: Basic},
{path: "big", component: Big},
]},
{ path: "/java", component: Java},
{ path: "/python", component: Python},
];
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
let router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
router
}).$mount("#app")
script>
body>
html>Vue resource
文档
数据请求