vue框架视频学习第一天笔记

vue框架视频学习第一天笔记

webpack编译

  • webpack编译文件基础插件
    • babel-cli
    • babel-core
    • [email protected]
    • babel-preset-es2015
    • babel-preset-stage-0
    • babel-plugin-transform-runtime 为了编译函数
    • webpack
    • webpack-dev-server
    • webpack-cli
    • url-loader
    • file-loader
    • css-loader
    • style-loader
    • extract-text-webpack-plugin@next 为了支持webpack4
    • html-webpack-plugin
  • 下载插件时注意
    • babel-loader版本为7.1.5
    • extract-text-webpack-plugin必须设置@next,因为正常下载版本不支持webpack4;
  • webpack.config.js配置
    • rules设置中的依赖是倒叙执行;
    • plugins设置中的插件是正序执行;
    • webpack.config.js配置代码:
     //引入模块
     const webpack=require("webpack");
     const path=require("path");
     const HtmlWebpackPlugin=require("html-webpack-plugin");
     const ExtractTextPlugin=require("extract-text-webpack-plugin");
     //配置
     module.exports={
         //1.入口文件
         entry:path.resolve(__dirname,"src/main.js"),//main默认入口文件
         //2.出口文件
         output:{
             path: path.resolve(__dirname,"dist"),
             filename: "my_bundle.js"
         },
         //3.模型文件
         module:{
             //转化规则
             rules:[
                 {
                     test:/\.js(x)?$/,
                     exclude:/node_modules/,
                     use:{
                         loader:"babel-loader",
                         options: {
                             presets: ["es2015","stage-0"]
                         }
                     }
                 },
                 {//配置css
                     test: /\.css$/,
                     use: ExtractTextPlugin.extract({
                         fallback: "style-loader",
                         use: "css-loader"
                     })
                 },
                 {
                     test:/\.(eot|svg|ttf|woff)(\?\w*)?$/,
                     use:"url-loader?limit=50000"
                 },
                 {
                     test:/\.(png|git|jpg|jepg)$/,
                     use:"url-loader?limit=50000"
                 }
             ]
         },
         devServer: {
             disableHostCheck: true
         },
         plugins:[
             new ExtractTextPlugin({
                 filename:"my_style.css"
             }),
             new HtmlWebpackPlugin({template:"./src/index.html"})
         ],
         mode:"development"
     };
    
  • webpack运行
    • webpack:目的是压缩生成新的文件,将webpack.config.js设置中的入口文件压缩后,输出到output.path路径下,通过html插件,将index.html放在输出路径下,并经压缩后的js文件插入到html文件中;与npm run build效果相同;
      • 注:运行webpack命令,必须在webpack.config.js文件所在的目录下运行;
    • 在package.json中设置scripts选项中的参数dev和build,通过以下命令运行
      • npm run dev:运行webpack-dev-server;
      • npm run build:运行webpack,生成压缩文件,放在dist文件夹下,将js文件插入到html文件中;
      • 注:运行此命令必须在package.json所在目录下运行;否则会报日志错误;

项目目录结构

  • 目录结构
    • src:存放人可以看懂的源代码,具备一定的功能划分,MVC
    • dist:存放真实上线的代码,通过webpack打包后的文件;
    • webpack.config.js:配置webpack的打包路径和规则等;
    • package.json:通过命令npm init -y快速创建,显示下载的插件信息
    • node_module:项目中的包文件,在gitHub上传时,不用上传;
  • 命令:
    • webpack:打包文件,生成dist目录;
    • webpack-dev-server:运行src下的代码,虚拟出打包后的js文件,在服务器端运行,多用于测试阶段;
      • 命令webpack-dev-server --inline --hot --open --port 1234即在浏览器中自动打开服务器;修改文件后保存,服务器会自动更新;其中--port xxxx可以设置端口号;
  • package.json
    • 设置scripts属性,将开发命令简化,输入过多的代码,只需输入对应的设置即可,如npm run dev
    • 在package.json文件夹下
      • 运行npm i即可下载所有的依赖包,即node_module文件夹;包括devDependencies和depandencies两个对应的依赖;
      • 运行npm i --production只下载depandencies对应的依赖;
  • 项目目录结构图:
    项目目录结构图

es6语法

  • es5中模块的导入和导出
    • 导入自定义模块:var cal=require("./cal.js")
    • 导出:module.exports={};
  • es6中模块的导入和导出
    • 默认导出,导入
      • 导出:export default {};
      • 导入:import xxx from "./cal.js";
      • 注:导入时的变量名可以是任意的名字;可以与导出时的对象名不同;
    • 声明式导出导入(按需导入)
      • 导出:
        • 声明与导出一同:export var obj1="xxx";或export var obj2={};
        • 先声明后导出:声明:var obj3={};导出:export {obj3};
      • 导入:
        • 代码:import {obj1,obj2,obj3,obj4} from "./cal.js"
        • 注:导入时对象中属性名必须与导出时相同;
    • 全体导入(添加* as
      • 代码:import * as obj from "./cal.js"
      • 获取的obj为一个对象,对象中默认导出的数据作为default属性名的属性值,其余的声明式导出的数据作为属性呈现;
      • obj的形式:
       {
          default: "我是默认导出的结果"
          obj1: "我是声明式导出1"
          obj2: "我是声明式导出1"
          obj3: "我是声明式导出1"
          obj4: "我是声明式导出1"
       }
      
    • 注:import和export只能放在顶级作用域,不能放在函数内部;
  • es6中的代码变化
    • 对象字面量:若对象中属性名与属性值为同一个名字,可以只写一个;
      • 变量声明:var name="guo"
      • 定义对象:var obj={name:name},此时可以简写为var obj={name};
    • 函数声明的变化
      • 与es5的不同是,去掉了:function
       var obj={
           //es5书写形式
           add:function(n1,n2){
             return n1+n2;
           }
           //es6简写形式
           add(n1,n2){
             return n1+n2;
           }
        }
      
    • 解构赋值:将对象中的属性名解构出来,直接使用;
      • 代码:
       var objn={
           name1:"xiehe",
           age:3,
           showName(){
               console.log("this指向为:"+this)
           }
       };
       var {name1,age,showName}=objn;
      
    • 箭头函数:
      • 代码:var add=()=>{};
      • 简写:
        • 条件:1)当参数是一个的时候,可以省略小括号;2)当返回值为一行代码事件,可以省略return和大括号;
        • 代码:var add=(c)=>{ return c(d) };简写:var add= c => c(d)

Vue基础知识

  • .vue文件的基本格式
    • :模板,里面设置标签节点,注意,最外围必须为一个标签;
    • :设置此vue组件的配置,通过export default {配置};设置data,method的属性等;
    • :设置组件的样式,若设置scoped代表只是该组件的样式;不设置则为全局样式;
  • .vue文件使用
    • 依赖webpack对vue文件进行打包处理,将vue文件转化为js文件插入到html模板中显示;
    • webpack不能对vue文件结构进行处理,必须依赖插件将vue文件格式转化为基本的dom结构;
    • 依赖的插件
      • vue:下载模块,引入该模块,相当于通过script引入vue.js文件,通过实例调用进行使用
      • vue-loader:是一个webpack的loader,可以将vue文件转化为JS模块;
      • vue-template-compiler:是对vue模板的编译插件,不用引入模块,但必须下载;
    • webpack.config.js配置
      • 引入vue-loader
        • 若下载的版本为14.x,则无需引入,无需配置;
        • 若下载的版本为15.x,则必须引入模块,并设置rules和plugins;
         //引入模块,注意必须用{}括起来;
         const { VueloaderPlugin } =require("vue-loader");
         //配置
         module.exports={
            //设置vue文件转化规则
            module:{
              rules:[
                 {
                    test:/\.vue$/,
                    use:"vue-loader"
                 }
              ]
            }
            //设置插件
            plugins: [
              new VueloaderPlugin()
            ]
         }
        
    • .vue文件为一个组件,将组件渲染到挂载点中显示
      • 引入vue模块,用于实例创建
      • 引入.vue文件:import App from "./app.vue"
      • 实例创建设置参数render,渲染组件
        • render值为匿名函数,函数中设置一个任意形参,然后返回此形参函数,函数参数为该组件
         //引入Vue模块
         import Vue from "vue";
         //引入自定义Vue文件
         import App from "./app.vue";
         //Vue实例创建
         new Vue({
             el:"#app",//挂载点
             render:function (createElement) {
                 //返回函数值,形参可以是任何值
                 return createElement(App)
             }
         });
        
  • Vue介绍
    • 核心概念:
      • 组件化
      • 双向数据流:基于ES5中的defineProperty来实现的,IE9及以上浏览器才支持
        • 1)js内存属性发生变化,影响页面的变化;
        • 2)页面的改变,影响js内存属性的改变;
    • 结构
      • 开发一个登陆的模块,登陆需要显示的头部、底部、中部;
      • 组件:组合起来的一个部件
      • 细分代码:
        • 头部:页面、样式、动态效果
        • 代码:template、style、script
    • 数据流
      • 常用指令
        • v-text="xxx":是元素的innerText,纯文本内容;
        • v-html="xxx":是元素的innerHTML,可带格式的内容;
        • v-if="xxx":赋值为布尔值,决定标签的存在与否;
        • v-show="xxx":赋值为布尔值,决定标签的显示和隐藏,标签始终存在;
        • v-for="(val,index) in ary":赋值为数组,指的是遍历数组,即遍历标签;
        • v-bind:property="xxx":绑定元素的属性;注:在webstorm中省略为:property="xxx";单向数据绑定(内存js改变影响页面)1
        • v-model:数据的双向绑定;
  • class结合v-bind使用
    • class绑定格式:v-bind:class="表达式",最终表达式运算结束的结果赋值给该属性名;
      • 简化::class="表达式"
    • class:表达式结果的分类
      • 一个样式:返回字符串
        • 整体思想:通过判断一个变量值的改变来赋值不同的类名;通过三目表达式来赋值,表达式返回的结果为一个字符串;
        • 1)单个字符串或三元表达式:
          • 单个字符串::class="'redcol'",其中redcal为类名;
          • 三元表达式::class="isRed?'redcol':'bluecol',其中isRed为data属性中设置的变量,而redcol和bluecol为类名;
        • 2)key和样式清单对象:就是通过验证变量中的样式,返回对应的字符串类名,如:v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]",其中[stu.score]代表的为A或B。
      • 多个样式:返回对象
        • 数组:
          • 1)数组中元素为变量,变量值为类名字符串;
          • 代码:其中bgc,col为变量,bg1,redcol为类名;
            //template
            

          这是动态绑定的测试文本

          //js data:{ bgc:"bg1", col:"redcol" }
          • 2)数组中元素为对象,对象中key为类名,value为布尔值,可以直接设置布尔值,也可以设置变量,变量值为布尔值;如::class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}],其中bluecol为类名,isReds为变量;
        • 对象:
          • 格式::class={样式类名:boolean,样式类名2:变量},其中样式类名可不加双引号,变量在data()中定义,变量值为布尔值;
          • 代码:其中bg1,col为类名;isCol为变量;
           

          这是动态绑定的测试文本

          //js data:{ isCol: false }
      • 验证代码:
       
       
       
      
  • style结合v-bind使用:绑定行间样式
    • 1)赋值为对象:v-bind:style="{}",其中{} 为:{color: bluecol, fontSize: size+'px'},其中bluecol和size为变量;变量值为字符串;
    • 代码:
     //template
     

    绑定行间样式

    //js data: { bluecol: "blue", size: "30" }
    • 2)赋值为变量名:v-bind:style="objdata",其中objdata为变量;注:color赋值为字符串类型;
    • 代码:
     //template
     

    绑定行间样式

    //js data: { objdata: { color: "blue", fontSize: "30px" } }
  • methods和v-on的使用
    • 绑定事件的方法
      • 代码:v-on:事件名="表达式 || 函数名"
        • 简写:@事件名="表达式 || 函数名"
      • 表达式:@click="isRed==!isRed"其中isRed为data中设置的变量;
      • 函数名:@click="changeCol()"其中changeCol为methods中设置的函数名;
        • 注:若函数名不需要传参,则可以省略(),即:@click="changeCol"
    • methods属性,属性值为一个对象
      • 对象:key是函数名,值是函数体;
    • data属性:属性值为一个函数体,函数体内返回值为一个对象;
    • 凡是在template中调用的变量或函数,不需要加this;
    • 在script中调用变量,必须加this;
  • v-for的使用
    • 遍历数组:v-for="(item,index) in stuAry"其中stuAry为data中设置的变量,变量值为数组;遍历后获得的item为数组元素,index为对应元素的索引;
    • 遍历对象:v-for="(val,key,index) in objs其中objs为data中设置的变量,变量值为对象;遍历后获得的val为对象中的属性值,key为对象中的属性名,index为属性名对应的索引值;
    • v-for使用时,配合ul,li使用,需注意的是,在每个遍历出的li中都要设置key属性,通过v-bind绑定,key值唯一,不能相同;
    • key:类似trank by的一个属性;
      • 作用:告诉vue.js中的元素,与页面之间的关联,当识别删除元素的时候,是单个元素的删除而不是整版替换,所以需要关联其关系;必须设置;
      • 注:2.2.0+的版本中,当组件中使用v-for时,必须设置key属性;
  • 小实例:列表的添加和删除
    • vue文件代码:
     
     
     
    
  • 父组件和子组件的使用
    • 父组件:使用其他组件的组件,为父组件;
    • 子组件:被使用的组件,为子组件;
    • 父组件引用子组件
      • 引入子组件对象;代码:import headerVue from "./xxx.vue"
      • 父组件声明子组件:在export default {}中设置components属性,声明子组件,声明结构为"子组件标签名":子组件对象
      • 引用子组件:在template中使用子组件标签名;
    • 代码:
     
     
     
    
  • 全局组件创建和调用
    • 创建位置:在引入Vue模块的位置,一般在main.js中设置;
    • 方法:调用Vue类的静态方法component
    • 代码:Vue.component("组件名",组件对象)
    • 调用:可以在任何组件中调用;
    • 代码:main.js中创建全局组件
     import Vue from "vue";
     import App from "./app.vue";
     
     //引入全局组件对象
     import globalVue from "./components/global.vue";
     //创建全局组件
     Vue.component("global-vue",globalVue);
       
     new Vue({
         el: "#app",
         render(createEle){
             return createEle(App);
         }
     });
    
  • 父组件与子组件之间的数据传递
    • 父组件给子组件传递数据
      • 父组件:给子组件标签设置自定义属性
        • 属性值为常量:直接设置;
        • 属性值为变量:通过v-bind绑定;
      • 子组件:声明传递过来的属性名
        • 声明:在子组件对象中设置根属性props,属性值为数组,数组中元素为父组件设置的自定义属性名,要一一对应;
        • 调用:
          • 子组件template中调用,直接用{{xxx}}
          • script中js调用,使用this.xxx;
      • 验证代码:
        • 父组件代码:
         
         
         
         
         
        
        • 子组件代码:
         
         
         
        
    • 子组件向父组件传递参数数据(通信vuebus)
      • 思想:调用Vue类原型上的方法$on,$emit
      • 调用原型上的方法:封装一个js文件,返回vue实例对象;哪里使用引入到哪里
      • 父组件:
        • 绑定click事件,事件函数中,通过调用vue实例对象原型上方法$on,绑定一个监听事件,接收子组件发送的参数;
      • 子组件:
        • 绑定click事件,事件函数中,通过调用vue实例对象原型上的方法$emit,绑定同一个监听事件,发送子组件传递给父组件的参数;
      • 代码:
        • 父组件代码:
         
         
         
         
         
        
        • 子组件代码:
         
         
         
        
    • 父子组件传递数据图解:
      父子组件
  • Vue文档
    • VueAPI地址:API-Vue.js
    • Vue功能图解:
      VueAPI图解

你可能感兴趣的:(vue框架视频学习第一天笔记)