nodejs--vue

nodejs--vue

---

基础知识认识：

前端工程化

	最近才兴起，nodejs（包的管理更加方便）,webpack

数据双向绑定

		mvm 	数据驱动vue，vue改变数据

组件化开发

vue 中的常见 概念：

	webpack 

		目的：把所有的 vue文件或者其他文件 转换成  js文件

	vue （框架），vuex（组件间的通信）， vue-router（路径--组件关联，跳转），axios（ajax，http请求包）

	ES6（ES6语法），babel（转换器--转换成ES5）

vue框架的优势：
	比 jquery 效率更好

		前后端分离  ---   只提供数据
		前后端融合 --- render

速度快，灵活，学习快

vue的基本语法

• {{}} 插入值，里面可以放表达式

• 指令 v-*：是带有V-前缀的特殊属性，通过属性来操作元素

事件绑定-- v-on： @

属性绑定 -- v-bind: :

	v-text 在元素中插入值

	v-html 文本 加 标签

	v-if  控制标签是否被注释

	v-show 控制标签是否显示 (display)

	v-for 循环渲染 标签

		数组循环
			v-for='(item,index) in arr'

			{{item}}:{{index}}

		对象循环
			v-for='(item,key,index) in obj'

			{{item}}:{{key}}:{{index}}

	v-on 监听元素时间，并且执行相应的操作

		函数
			v-on:click='show()'
			简写
				@click='func1()'

	对数组进行操作

		push
		pop
		shift
		unshift
		splice
		reverse

		元素删除

			修改 定义在new Vue 中的变量，相应的dom元素也会改变

			this.arr.pop();

	v-bind 绑定元素的属性 来执行相应的操作
		v-bind:href='url'
		简写
			:href='url1'

			v-bind:class='{div:isTrue}'

	v-model	实现了视图和数据的双向绑定

		把元素的值和数据绑定
		当输入内容时，数据相应变化
		当改变数据时，输入的内容也会发生改变

vue 的设计模式是MVVM

MVVM  Model- View-ViewModel  数据展示到视图是通过ViewModel控制上去的
组件的概念就是由html,css，js构成的一个模块

模块：一个js文件就是一个模块、
vue的组件是通过一个工具（webpack）进行打包，打包成一个*.vue
webpack:一个打包机，将我们html,css,js等等打包成一个文件让我们浏览器识别。捆绑

vue的核心用法 ：

1、模板语法：使用{{}}进行插值

2、指令系统：v-if,v-show,v-bind,v-on,v-for,v-model,v-html

v-if:真正的条件渲染
v-show：惰性的渲染，这个渲染方式会在标签上加style样式
v-bind：绑定属性，可以在任何的标签中绑定标签中自己的属性和自定义的属性
v-on:绑定事件，可以绑定js中所有的事件，包括click,hover,mouseover......
v-for:遍历数组
v-mode:表单控件中实现双向数据绑定
v-html:双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

3、computed计算属性
注意：使用computed的时候默认只有getter ,它能实时监听数据属性的变化。当然了，在必要的时候我们还可以加setter

如何使用npm

npm全称：node package manger

使用npm
1.执行npm init 初始化项目 自动生成一个package.json的文件

2.npm install jquery --save
下载相应的jquery的包，并自动的生成node_modules的文件夹到该文件夹下

3.npm uninstall jquery --save 卸载jquery的包

package.json管理着我们当前项目需要的包

有时候我们会讲我们的写好的项目代码上传到github上，但github只允许上传100兆以上的项目，这时候node_modules在上传的时候会被
忽略。但是package.json管理着我们当前项目需要的包，那么我们从github上下载当前项目中，安装readme的文档提示做需求即可，一般需要npm instal

vue中的数据流

 ===》自上而下

组件之间的通信：

1.父组件往子组件传值：使用自定义属性，子组件一定要验证自定义的属性的类型
2.子组件往父组件传值：使用自定义事件
3.同级组件之间的传值：官方建议使用vuex,第三天会讲

vue+vue-router 来创建单页面应用

单页面应用的网站：知乎、稀土掘金、少数派、网易云、饿了么移动端、豆瓣等等

使用vue-router

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

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
JavaScript
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

实例

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/store'

Vue.prototype.$axios = axios;
// 全局变量的声明 ---
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    username:Cookie.get('username'),
    token:Cookie.get('token')
  },
  mutations:{
    // 组件中 通过 this.store.commit 参数 调用
    saveToken(state,data){
      state.username = data.username;
      state.token = data.token;
      //设置到内存中
      Cookie.set('username',data.username,'20min');
      Cookie.set('token',data.token,'20min')
      //设置到cookie中
    },
    clearToken(state){
      state.username = null;
      state.token = null;
      Cookie.remove('username');
      Cookie.remove('token')
    }
  }
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
import Course from '@/components/Course'
import Luffy from '@/components/Luffy'
import News from '@/components/News'
import NotFound from '@/components/NotFound'
import CourseDetail from '@/components/CourseDetail'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
      {
      path: '/index',
      name: 'Index',
      component: Index
    },
      {
      path: '/login',
      name: 'Login',
      component: Login
    },
          {
      path: '/course',
      name: 'Course',
      component: Course
    },
            {
      path: '/course/detail/:id/',
      name: 'CourseDetail',
      component: CourseDetail
    },
      {
      path: '/luffy',
      name: 'Luffy',
      component: Luffy
    },
          {
      path: '/news',
      name: 'News',
      component: News
    },
      {
      path: '*',
      name: '*',
      component: NotFound
    },
  ],
  mode:'history'
})

Course.vue

<template>
  <div class="course">
    <ul>
      <li v-for="item in courseArray">
        <router-link :to="{'path':'/course/detail/'+item.id}">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Course',
  data () {
    return {
      courseArray:[
      ]
    }
  },
  mounted:function(){
    this.initCourse()},
  methods:{
    initCourse(){
      var that = this;
      this.$axios.request({
        url:'http://127.0.0.1:8000/course/',
        method:'GET',
        responseType:'json'
      }).then(function (response) {
        that.courseArray = response.data;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
  list-style: none;
}
</style>