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

Hello App!

Go to Foo
Go to Bar

JavaScript
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

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

foo

' }
const Bar = { template: '

bar

' }

// 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: ''
})

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