vue入门笔记 day1

webpack属性配置

javascript(参考webpack.config.js)

const path=require(‘path’)
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={ 
    entry:{ //main是默认入口,也可以是多入口
        main:’./src /main.js’,
    },
    output:{ //出口
        path:path.join(__dirname , ’..’ , ’dist’)’’, //最好是绝对路径
        //代表当前目录的上一级的dist
        filename:’./build.js’ //指定js文件
    },
    module:{
        //loader与rules一样的功能，rules是webpack2.x之后新加的,用一种即可
        loaders:[  
            {
                test:/\.css$/,
                loader:’style-loader!css-loader’,//顺序是反过来的2!1
            },
            {
                test:/\.(jpg|svg|png|gif)$/i,
                loader:’url-loader?limit=4096&name=[name].[ext]’,
                    // [name].[ext]内置提供的，文件名，后缀名
                options:{//参数可以拼在loader里也可以写在options里，选一种即可
                    limit:4096,
                    name:’ [name].[ext]’
                }
            }
    
        ]
    },
    plugins:[
        //插件的执行顺序是依次的，和loader是相反的
        new htmlWebpackPlugin({
            template:’./src/index.html’
            //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        })
    ]
}

webpack-ES6的处理

• ES6的模块，vue本身默认支持es6的模块导入导出
• babel
  • babel-loader ( 内部依赖babel-core )
    • 关键字 （presets es2015）

• 函数 ( plugins babel-plugin-transform-runtime )

ES6中的模块

• 默认

  • 导出export default temp;
  • 导入import defaultObj from './cal.js';

• 声明式

  • 1导出export var obj1="我是声明式导出1"
  • 2导出export var obj2="我是声明式导出2"
  • 3单独导出var obj4="我是声明式导出4"; export {obj4};
  • 导入import {obj1,obj2,obj4} from './cal.js';

• 全体

  • 导入import * as allObj from './cal.js'

运行结果：

Object {default: "我是默认导出的结果", obj1: "我是声明式导出1", obj2: "我是声明式导出2", obj3: "我是声明式导出3",obj4: "我是声明式导出4"…}
1.  __esModule:true
2.  default:"我是默认导出的结果"
3.  obj1:"我是声明式导出1"
4.  obj2:"我是声明式导出2"
5.  obj3:"我是声明式导出3"
6.  obj4:"我是声明式导出4"
7.  __proto__:Object

• 默认导入和声明式导入在使用上的区别
  • 要注意：声明式导入的时候，必须名称要一致（按需导入）
  • 默认导入 可以随便使用变量名
• import 和 export 一定要写在 顶级作用于内 ，不能写在 {}里

ES6中的代码变化

• 对象属性的声明

var name='abc';

var person={name};  简写   - 》 var person={name:name}

• 声明函数

var cal={
    add1:function(){
        return 1;
    },
    add2 (){
        return 2;
    }

}

• 当属性的key与变量名相同，并且以变量值为value，就可以简写{name}->{name:name}
• es6函数里干掉了function

vue单文件

• 单文件就是以.vue结尾的文件。最终通过webpack也会编译成.js在浏览器运行
• 内容：<'template'><'/template'> + <'script'><'/script'> + <'style'><'/style'>

• 1: template中只能有一个根节点 2.x
• 2: script中 按照 export default 来写
• 3: style中 可以设置 scoped属性，让其只在template中生效

以单文件的方式启动

• webpack找人来理解你的单文件代码
  • vue-loader,vue-template-compiler,代码中依赖vue
• 启动命令
  ..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open 默认8080端口
  ..\\node_modules\\.bin\\webpack-dev-server --inline --hot –open --port 8090 指定8090端口

关于启动的目录结构

my-project
    - src  存放人可以看懂的代码，具有一定的功能划分 ，mvc
    - dist 存放真实上线的代码（减少请求，混淆代码），机器能看懂
    - webpack.config.js 打包生成dist下的代码
    - package.json   包信息描述  还能做命令简化

命令行  webpack           开发   
立刻读取webpack.config.js,生成到dist目录下
webpack-dev-server     测试

运行src下的代码，虚拟出build.js 
在含有packge.json文件下
npm install       安装所有devDependencies + dependencies
npm install –production  只安装 dependencies

package.json里   npm run dev  npm run build
{
    "scripts": {   
        "dev": "..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open",  开发的命令简化
        "build":"webpack"   打包代码到生产环境
    }
}

vue介绍

• 2014年诞生，2013年react，09年angularjs
• 作者 尤雨溪
• 核心概念：
  组件化 双向数据流（基于ES5中的defineProperty来实现的），IE9+才支持
• angular核心 ：
  模块化 双向数据绑定（脏检测：一个数组（$watch））
  • 开发一个登陆的模块，登录需要显示头部、底部、中部
  • 组件 ：组合起来的一个部件 （头部、底部、中部）
  • 细分代码
    • 头部：页面、样式、动态效果
    • 代码：template style script
• 框架对比：
  https://cn.vuejs.org/v2/guide/comparison.html

双向数据流

• 1.js内存属性发生改变，影响页面的变化
• 2.页面的改变影响js内存属性的改变

vue中常用的v-指令演示

• 常用指令
• v-text 是元素的innerText,只能在双标签中使用
• v-html 是元素的innerHTML，不能包含
• v-if 元素是否移除或者插入
• v-show 元素是否显示或隐藏
• v-model 双向数据绑定，v-bind 单向数据绑定（内存js改变影响页面）

class结合v-bind使用

• 需要根据可变的表达式的结果来给class赋值，据需要用到v-bind:class=”xxx”
• v-bind:属性名=”表达式”，最终表达式运算结束的结果复制给该属性名
  • 简化写法 :属性名=”表达式”
• class:结果分类
  • 一个样式： 返回字符串（三元表达式和key和央视的清单对象）
    
    单个class
  • {{v.name}}
  • 多个样式： 返回对象 （样式做key，true或false做值）
    
    多个class 对象方式

methods 和v-on的使用

• 绑定事件的方法
  • v-on:事件名=”表达式||函数名”
  • 简写@事件名=”表达式||函数名”
• 函数名如果没有参数 调用时候可以不加小括号
• 声明组件内内函数，在export default这个对象的跟属性上加上methods属性，其是一个对象
  • key 是函数名， 值是函数体
• 在export default这个对象的跟属性上加上data属性, 其是一个对象,返回一个对象
  • 对象的属性是我们初始化的变量名称
• 凡是在template中使用变量或者函数，不需要加this
• 在script中使用就需要加上this

v-for的使用

• 可以单独使用操作数组 （item,index）
• 可以单独使用操作对象 （value,key,index）
• key是类似track by的一个属性
• 为的是告诉vue，js中的元素，与页面之间的关系，当视图删除元素的时候，是单个元素的删除二不是整版替换，所以需要关联其关系，设置（必须，性能） 2.xxx之后必须设置

父子组件的使用

• 父和子 使用的是父，被用的是子
• 父需要声明子组件，引入子组件对象，声明方式如下

javascript

import 子组件对象 from './xxxr.vue';
export default {   
    components: {
        组件名: 子组件对象
    }
}

• 全局组件，使用更为方便，不需要申明，直接用
• 在mian.js中引入一次，在main.js中使用Vue.component(‘组件名’,组件对象)
• 所有的组件就可以直接通过组件名使用

父传子

• 父组件通过子组件的属性将值进行传递
  • 方式有2
    • 常量：prop1=”常量值”
    • 变量：prop2=”变量名”
• 子组件需要声明
  • 根属性props：[‘prop1’,’ prop2’]
  • 在页面中直接使用{{ prop1’}}
  • 在js中应该如何使用prop1？ this.props1来获取

看文档的对象分类

• 1.全局的代表Vue.的
• 2.实例的代表this.或者new Vue().
• 3.选项代表 new Vue()的参数 或者 export default 里边的属性

子向父组件通信（vuebus）（扩展）

• 通过new Vue()这样的一个对象，来$on(‘事件名’,fn(prop1，prop2))
• 另一个组件引入同样的vuebus，来$emit(‘事件名’，prop1，prop2)