- Node 是js的运行环境
- Node.js的运行环境是非阻塞式的(异步的),所以可以承载高并发的响音。
例如:京东抢购 ,淘宝的抢购。
- Npm是包管理器
- Npm常见的命令 安装包 npm install 包名
- 参数 –s ,--save 安装包信息将加入到d ependencies(生产阶段的依赖)
- –g或者—global 全局安装
- Npm uninstall 包名 卸载模块
- Npm update 包名 更新模块
- Npm outdated 检查更新
- Npm init 在项目中引导创建一个package.Json文件
- Npm start 启动一个项目(有package.Json文件的目录)
- Node.js的所有命令都是异步的,都是采用回调函数,并且参数都一致
模块.操作(function(err,data){ })
多步异步操作分步执行:不建议回调函数嵌套。
建议使用 async 函数
复杂的建议使用co模块
- MySQL 数据库 关系行数据库
- Vue 模块实例
- 一个vue实例需要html的一个标签作为载体
一个页面建议只有一个vue实例
New Vue({
el:’选择器’ , 选择载体
data:{}, 数据(在这里定义的数据发生改变会重绘页面)
methods:{ 方法
xx:function(){}
}
Computed:{ 方法
xx:function(){}
}
Watch:{ 数据的监听器设置
Data1:function(){}
}
Components:{
‘组件的名称’:{
Template:’ ’,
Data:function(){组件的数据只能是函数返回 return{} },
Methods:{
‘ submethod’:function(){
代码
组件的内容定义的方法需要使用 this.$emit(名称)来发送出组件
组件在调用时使用
<组件的名称@
}
}
用于接收来自父组件的数据
静态传递:直接在调用时加属性传递
动态传递:属性来绑定变量
props可以是对象也可以是数据 对象用来做复杂处理
Props:[‘ ’]
Props:{
Height:number,
Age:{
Type:number,
Default:0,
}
}
}
Directives:{ 自定义指令
‘指令名称’:{钩子函数 }
}
路由模块对应的是router-link
Router :new VueRouter({ routes:[ {path:’/foot’}] })
})
- Ajax方法
Vue.$http.get(‘/try/ajax/ajax_info.txt’).then(function(res){
Document.write(res.body)
},function(){
Consol.long})
总结
node是js的运行环境
nodejs 的运行环境是非阻塞式的(异步的),所以,可以承载高并发的响应。
npm是 包管理器
npm 常见命令
安装包
npm install 包名
参数:
-S --save 安装包信息将加入到dependencies(生产阶段的依赖)
-g --global 全局安装
卸载
npm uninstall 包名
更新
npm update 包名
检查更新
npm outdated
npm init 在项目中引导创建一个package.json文件
npm start 启动一个项目(有package.json的目录)
nodejs
nodejs的所有命令都是异步的,都是采用回调函数,且参数都一致。
模块.操作(function(err,data){
})
多步异步操作分步执行:
不建议回调函数嵌套。建议:
async 函数。
复杂的建议使用co 模块。
VUE
一个vue实例需要html的一个标签作为载体。
一个页面建议只有一个vue实例。
new Vue({
el :'选择器', //选择载体
data :{data1:1}, //数据,在这里定义的数据发生改变会重绘页面。
methods:{ //方法。
xx:function(){}
},
computed:{ //方法。
xx:function(){}
},
watch:{ //数据的监听器设置
data1:function(){}
},
components:{
'组件名称':{
template:'<div @click="submethod"></div>',
data:function(){ //组件的数据只能是函数返回
return {}
},
methods:{
'submethod':function(){
//代码
//组件内容定义的方法需要使用
//this.$emit(名称)来发送出组件
//组件在调用时使用:
//<组件名称 @组件方法='全局的方法'></组件名称>
this.$emit('组件方法')
}
},
// 用于接收来自父组件的数据。
// 静态传递:直接在调用时加属性传递
// 动态传递::属性来绑定变量
//props可以是数组也可以是对象
//对象用来做复杂处理
props:[],
props:{
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
}
},
directives:{ //自定义指令
'指令名称':{
// 钩子函数
//钩子函数执行的顺序 bind、inserted
//当重新渲染时,执行的顺序是update、componentUpdated
//当指令解绑时,执行unbind
inserted:function(el,binding){
// <td>${binding.name}</td><td>name(指令名,不包括 v- 前缀。)</td>
// <td>${binding.value}</td><td>value(指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。)</td>
// <td>${binding.oldValue}</td><td>oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</td>
// <td>${binding.expression}</td><td>expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。</td>
// <td>${binding.arg}</td><td>arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。</td>
// <td>${JSON.stringify(binding.modifiers)}</td><td>modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。</td>
}
}
},
// 对应的是router-link
// <router-link to='/bar'>链接名称</router-link>
router:new VueRouter({
routes:[
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
})
// ajax方法:
Vue.$http.get('/try/ajax/ajax_info.txt').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
vue全家桶
首先执行 npm install –g vue-cli
全局安装vue 脚手架
进入到一个目录 执行
vue init webpack 目录名
Project name(vuetest) 项目名称
Project description 项目描述
Author 作者
Runtime + Compiler: recommended for most users
上下可选,选第一个回车
Install vue-router? (Y/n)
是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行。
目录结构:
bulid
里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件。
config
配置文件,执行文件需要的配置信息。
src
资源文件,所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。
assets
资源文件夹,放图片之类的资源,
components
组件文件夹,写的所有组件都放在这个文件夹下,
router
路由文件夹,这个决定了页面的跳转规则,
App.vue
应用组件,所有自己写的组件,都是在这个组件之上运行了。
main.js
webpack入口文件。
webpack 是项目打包工具