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>
读书使人心眼明亮
