vue基础学习笔记（一）

0.vue入门学习及常用指令

1.基本目录介绍

2.准备开始

---

2.1 学员反馈

下午感觉要起飞了,给我们点时间练一下
保留最终解释权
晕晕乎乎的一天就过去了
保留最终解释权

1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？

    输入服务 是需要使用的时候

    配置期  config -> 可以注入供应商服务对象，对于具体服务进行配置
    运行期  非config都算是运行期
        service/factory(通过return 返回任意类型对象)/controller/derective/filter
    以上都可以用来注入服务对象（service/factory）
    如何区分是否能依赖注入
        形参名基本以$开头
        //根据顺序来的
        link:function(scope,element,attrs)

2.自己建了一个服务器，数据库，可是这个项目还是不知道从哪开始敲起
看需求有哪些页面，配置路由显示页面，根据API接口完成页面上的动态数据交互

3.webpack-dev-server 再讲一下吧，还是不太懂
工具，在学校的时候，要掌握的东西是重点学习的东西，而不是工具
在企业开发中，遇上了相关问题，再去看看别的东西
让大家不用去关注除了主核心以外的东西
–inline --hot --open --port 9999

老师,能不能给点时间练练
保留最终解释权
黑马岳父, angular飞晕了, node飞丢了, vue稍微稳点飞, vue是最后的杀手锏了, 也是唯一能吹牛的资本了

1:主要学习的是VUE，快速进入VUE让大家体会VUE的使用
2:webpack前端构建构建，前期铺垫基本使用，后面看到不晕
3:在做完项目以后，模拟项目开发的真实打包，区分打包的意义所在(webpack)

2.2 复习

• webpack属性配置

    const path = require('path')
    module.exports = {
        entry:{ main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        出口
        output:{
            filename:'./build.js', 指定js文件
            path: path.join(__dirname,'..','dist',)          最好是绝对路径
            代表当前目录的上一级的dist
        },
        module:{
            一样的功能rules:   webpack2.x之后新加的
            loaders:[       require('./a.css||./a.js')
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                 顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 顺序是反过来的2!1 
                 [name].[ext]内置提供的，因为本身是先读这个文件
                 options:{
                    limit:4096,
                    name:'[name].[ext]'
                 }
                }
            ]
        },

        plugins:[
            插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html',
                })
                将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]



    }

2.3 今日重点

• 运行起来Vue
• vue常用指令
• 组件的使用

3. vue介绍

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

4.es6

---

4.1 webpack-ES6的处理

• ES6的模块,vue本身默认支持es6的模块导入导出
• babel
  • babel-loader(内部依赖babel-core)
    • 关键字(presets es2015)
    • 函数(plugins babel-plugin-transform-runtime)

4.2 ES6中的模块

• 默认
  • 导入import [,..xxx] [,..from] './xxx.ext'
  • 导出 export default obj;
• 声明式
  • 1导出 export var obj = xxx;
  • 2导出 export var obj2 = {};
  • 3单独导出 export {stu};
  • 导入 import {obj,obj2,stu} from './xxx.js'; 直接使用obj
• 全体
• 默认导出和声明式导入在使用上的区别
  • 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入)
  • 默认导入，可以随意的使用变量名

{
default:"我是默认导出的结果"    
        import xxx from './cal.js'会获取到整个对象的default属性
obj1:"我是声明式导出1"
obj2:"我是声明式导出2" 
obj3:"我是声明式导出3"     import {obj1,obj2}
obj4:"我是声明式导出4"
}
    import * as allObj from './cal.js';  获取的就是一整个对象

• import 和export一定写在顶级，不要包含在{}内

4.3 ES6中的代码变化

• 对象属性的声明

    var name = 'abc';
    var person = {name}; 简写-> var person = {name:name};

    声明函数 
    var cal = {
        add:function(){
            return 1;
        },
        add2(){
            return 2;
        },
        add3:funtion(n1,n2){
            return n1 + n2;
        },
        add4(n1,n2){  干掉了function
            return n1 + n2;
        }
    }

• 当属性的key和变量的名相同,而要使用变量的值做value,
• 就可以简写{name}->{name:name}
• es6中的函数声明
  • 就是干掉了:function add(){ }

5.vue基础

5.1 vue单文件方式

• 单文件就是以*.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行
• 内容： + +
  • 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

5.2 数据流

• 双向数据流（基于ES5中的Object.defineProperty来实现的（IE9及以上）
• 双向数据流 js内存属性的改变引起页面的变化 页面的改变会影响js内存属性的改变
• 1向：js内存属性发生改变，影响页面的变化
• 1向：页面的改变影响js内存属性的改变

5.3 vue中常用的v-指令演示

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

5.4 class结合v-bind使用

• 需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class=“xxx”
• v-bind:属性名=“表达式”，最终表达式运算结束的结果赋值给该属性名
  • 简化的写法是: :属性名="表达式"
• class:结果的分类
  • 一个样式: 返回字符串(三元表达式和key和样式的清单对象)
  • 多个样式：返回对象(样式做key，true或flase做值) :class="{'A':'red','B':'blue','C':'yellow'}[person.score]"

5.5 methods和v-on的使用

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

5.6 v-for的使用

• 可以使用操作数组 (item,index)

• 可以使用操作对象 (value,key,index)

• key 是类似trank by 的一个属性

• {{index}}
--> 提升性能

• 为的是告诉vue，js中的元素，与页面之间的关联，当试图删除元素的时候，是单个元素的删除而不是整版替换，所以需要关联其关系，设置key(必须,性能)

• 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

5.7 漂亮的列表

• 增删改操作 --> 绑定的key
• 数组方法splice()
• v-model 传入数据 定义变量
• 输入框清空 this.pro = '';

5.8 父子组件使用 （SPA）

• 父和子，使用的是父（谁用谁是父），被用的是子（谁被用谁是子）
• 并在 template标签中使用
• 可以在各自的子组件设置样式，别忘了scoped
• 父需要声明子组件，引入子组件对象，（组件内使用组件）声明方式如下

//引用子组件对象
import 子组件对象 from './xxx.vue';

    {
        //声明子组件
        components:{
            组件名:子组件对象
        }
    }

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

5.9 父传子

• 父组件通过子组件的属性将值进行传递 （在子组件中传值）
  • 方式有2:
    • 常量: prop1=“常量值”
    • 变量: :prop2=“变量名” （需在data的return中定义变量）
• 子组件需要声明 （用props接受父组件值的传入 props:['prop1','prop2']之后就可以使用）
  • 根属性props:[‘prop1’,‘prop2’]
  • 在页面中直接使用{{prop1}}
  • 在js中应该如何使用prop1？ --> this.prop1获取

5.10 看文档的对象分类技巧

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

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

• 父要先聆听 父子在同一频率 子传来消息就触发通信
• 通过new Vue()这样的一个对象来做通信的电话，父子组件都引入 import connect from './connector.js'

import Vue from 'vue';
var connector = new Vue();
export default connector;

• 通过监听自定义事件 来connect.$on('同一事件名phone',fn(prop1,pro2))
• 另一个组件引入同一个vuebus,通过监听自定义事件 再来调用connect.$emit('同一事件名phone',prop1,pro2)

6. 总结

• 0 : 已经存在node_modules包，已经存在package.json和webpack.config.js文件
• 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系
• 2: 在index.html div->id->app
• 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系
• 4: 在main.js中引入vue,和相关组件对象
• 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容
• 6: 编写app.vue
  • template 在2.x以后只能有一个根节点
  • script 格式是export default { 选项options}
  • style 加上scoped（范围的）之后，样式只对当前模板有效
• 7: 可能使用组件或者使用函数或者接受参数
  • options(根属性):
    • data 是一个函数,return一个对象
    • methods 是一个对象,key是函数名,value是函数体
    • components 是一个对象,key是组件名,值是组件对象
    • props 是一个数组,元素是多个接受的参数
• 8: 套路总结
  • 凡是在上边可以使用的东西
  • 在下边就可以使用，通过this.
• 9:启动
  • 进入到webpack.config.js 和package.json文件同在的目录中启动命令行
  • 输入: 正在编码: npm run dev
    • 报错: 检查命令所执行的…/ 上级,是否存在node_modules目录及相关文件是否存在
  • 输入: 代码编写完毕，提交到公司 : npm run build
• 10:全局配置
• 11:全局API
• 12:选项 数据/资源
• 13:实例方法 事件
• 14:指令

7.过滤器

8.获取元素

9.vue构建方式