正文

nodejs--vue

IP云
IP云V管理员/4 阅读
08/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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-htmlv-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>