VUE整理笔记

 

• Node 是js的运行环境
• Node.js的运行环境是非阻塞式的（异步的）,所以可以承载高并发的响音。

例如：京东抢购 ，淘宝的抢购。

• Npm是包管理器

1. Npm常见的命令    安装包  npm   install  包名
2. 参数 –s ，--save 安装包信息将加入到d ependencies（生产阶段的依赖）
3. –g或者—global   全局安装
4. Npm  uninstall   包名   卸载模块
5. Npm  update    包名   更新模块
6. Npm  outdated          检查更新
7. Npm  init       在项目中引导创建一个package.Json文件
8. Npm  start    启动一个项目（有package.Json文件的目录）

• Node.js的所有命令都是异步的，都是采用回调函数，并且参数都一致     

模块.操作（function（err,data）{   }）

多步异步操作分步执行：不建议回调函数嵌套。

建议使用 async 函数  

复杂的建议使用co模块

• MySQL  数据库 关系行数据库
• Vue  模块实例

1. 一个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’}]  })

})                            

1.  

• 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 是项目打包工具