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

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

webpack编译

• webpack编译文件基础插件
  • babel-cli
  • babel-core
  • babel-loader@7.1.5
  • 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文件的基本格式
  • <template></template>：模板，里面设置标签节点，注意，最外围必须为一个标签；
  • <script></script>：设置此vue组件的配置，通过export default {配置}；设置data,method的属性等；
  • <style scoped></style>：设置组件的样式，若设置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
          <h1 :class="[bgc,col]">这是动态绑定的测试文本</h1>
          //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为变量；

         <h1 :class="{bg1:true,col:isCol}">这是动态绑定的测试文本</h1>
          //js
          data:{
              isCol: false
          }
        

    • 验证代码：

     <template>
         <div>
             <h1>验证v-bind绑定class属性</h1>
             <!--1.绑定一个类名-->
             <!--class属性设置-->
             <div class="bigFont">我们的世界</div>
             <!--v-bind绑定一个类名-->
             <div :class="'redcol'">美好的明天aa</div>
             <div :class="isRed?'redcol':'bluecol'">我们的爱太无奈</div>
             <!--2.绑定多个类名-->
             <!--class属性设置-->
             <div class="redcol bigFont">我是class属性设置绑定两个类名</div>
             <!--v-bind绑定多个类名-->
             <div :class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}]>我是v-bind绑定多个类名</div>
             <div :class={bluecol:true,bigFont:true,bgcRed:isReds}>我是v-bind绑定多个类名</div>
             <!--3.验证列表-->
             <ul>
                 <!--整体思想：返回字符串-->
                 <li v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]">我是name为{{stu.name}}的一列</li>
             </ul>
     
         </div>
     </template>
     <script>
         export default {
             data(){
                 return {
                     isRed: false,
                     isReds: true,
                     stus:[{name:"jack",score:"A"},{name:"rose",score:"B"}]
                 }
             }
         }
     </script>
     <style scoped>
         .redcol{
             color: red;
         }
         .bluecol{
             color: blue;
         }
         .bigFont{
             font-size: 30px;
         }
         .bgcRed{
             width: 300px;
             height: 100px;
             background-color: lightcoral;
         }
     </style>
    

• style结合v-bind使用：绑定行间样式
  • 1）赋值为对象：v-bind:style="{}",其中{} 为：{color: bluecol, fontSize: size+'px'},其中bluecol和size为变量；变量值为字符串；
  • 代码：

   //template
   <h1 v-bind:style="{color: bluecol, fontSize: size+'px'}">绑定行间样式</h1>
   //js
   data: {
       bluecol: "blue",
       size: "30"
   }
  

  • 2）赋值为变量名：v-bind:style="objdata"，其中objdata为变量；注：color赋值为字符串类型；
  • 代码：

   //template
   <h1 v-bind:style="objdata">绑定行间样式</h1>
   //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文件代码：

   <template>
       <div>
           <h1>英雄的武力值</h1>
           <ul>
               <li v-for="(item,index) in heros" :key="index" :class="{'A':'redcol','B':'bluecol','C':'greencol','D':'pinkcol'}[item.wu]">
                   {{item.name}},{{item.wu}}
                   <input type="button" style="margin-left: 200px;" @click="delBtn(index)" value="删除">
               </li>
           </ul>
           <h4>添加英雄</h4>
           <form>
               <label for="user">英雄：</label>
               <input type="text" id="user" name="user" v-model="heroname"/>
               <br>
               <label for="wuli">武力等级：</label>
               <input type="text" id="wuli" name="wulizhi" v-model="herowu"/>
               <br>
               <input type="button" style="background-color: deepskyblue;" @click="addBtn" value="添加">
           </form>
       </div>
   </template>
   <script>
       export default {
           data(){
               return {
                   heroname:"",
                   herowu:"",
                   heros:[
                       {
                           id:1,
                           name:"乔峰",
                           wu:"A"
                       },
                       {
                           id:2,
                           name:"段誉",
                           wu:"B"
                       },
                       {
                           id:3,
                           name:"虚竹",
                           wu:"C"
                       },
                       {
                           id:4,
                           name:"郭靖",
                           wu:"D"
                       }
                   ]
               }
           },
           methods:{
               addBtn(){
                   this.heros.push({
                       id:this.heros.length+1,
                       name:this.heroname,
                       wu:this.herowu
                   });
                   this.heroname="";
                   this.herowu=""
               },
               delBtn(index){
                   this.heros.splice(index,1);
               }
           }
       }
   </script>
   <style scoped>
       ul> li{
           width: 500px;
           height: 30px;
       }
       .redcol{
           background-color: red;
       }
       .bluecol{
           background-color: skyblue;
       }
       .greencol{
           background-color: yellowgreen;
       }
       .pinkcol{
           background-color: hotpink;
       }
   </style>
  

• 父组件和子组件的使用
  • 父组件：使用其他组件的组件，为父组件；
  • 子组件：被使用的组件，为子组件；
  • 父组件引用子组件
    • 引入子组件对象；代码：import headerVue from "./xxx.vue"
    • 父组件声明子组件：在export default {}中设置components属性，声明子组件，声明结构为"子组件标签名"：子组件对象；
    • 引用子组件：在template中使用子组件标签名；
  • 代码：

   <template>
       <div>
           <h1>父组件和子组件</h1>
           <!--引入子组件-->
           <header-vue></header-vue>
           <body-vue></body-vue>
           <footer-vue></footer-vue>
       </div>
   </template>
   <script>
       //引入子组件对象
       import headerVue from "./components/header.vue";
       import bodyVue from "./components/body.vue";
       import footerVue from "./components/footer.vue";
   
       export default {
           //声明子组件
           components:{
               "header-vue":headerVue,
               "body-vue":bodyVue,
               "footer-vue":footerVue
           }
       }
   </script>
   <style>
   </style>
  

• 全局组件创建和调用
  • 创建位置：在引入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;
    • 验证代码：
      • 父组件代码：

       <template>
           <div>
               <h1>验证父组件给子组件传递数据</h1>
               <!--设置常量值和变量值-->
               <!--属性值为常量，直接设置；为变量，用v-bind设置-->
               <header-vue constdata="漂亮的美人" :changedata="bigdata"></header-vue>
           </div>
       </template>
       
       <script>
           //引入子组件对象
           import headerVue from "./components/header.vue";
       
           export default {
               //声明子组件
               components: {
                   "header-vue":headerVue,
               },
               //设置变量
               data(){
                   return {
                       bigdata:"美好的世界",
                   }
               }
           }
       </script>
       
       <style scoped>
       
       </style>
      

      • 子组件代码：

       <template>
           <div>
               <p>我是父组件传递过来的常量数据：{{constdata}}</p>
               <p @click="alertData">我是父组件传递过来的变量数据：{{changedata}}</p>
       
           </div>
       </template>
       <script>
           export default {
               //声明父组件传递过来的数据
               props:["constdata","changedata"],
               methods:{
                   alertData(){
                       //js中调用传递来的数据，用this.xxx
                       alert(this.changedata);
                   }
               }
           }
       </script>
       <style scoped>
           p{
               width: 500px;
               height: 200px;
               background-color: red;
           }
       </style>
      

  • 子组件向父组件传递参数数据(通信vuebus)
    • 思想：调用Vue类原型上的方法$on,$emit
    • 调用原型上的方法：封装一个js文件，返回vue实例对象；哪里使用引入到哪里
    • 父组件：
      • 绑定click事件，事件函数中，通过调用vue实例对象原型上方法$on，绑定一个监听事件，接收子组件发送的参数；
    • 子组件：
      • 绑定click事件，事件函数中，通过调用vue实例对象原型上的方法$emit，绑定同一个监听事件，发送子组件传递给父组件的参数；
    • 代码：
      • 父组件代码：

       <template>
           <div>
               <!--调用子组件-->
               <sub-vue></sub-vue>
               <button @click="parLis">父组件监听某个事件的运行</button>
           </div>
       </template>
       
       <script>
           //引入vue实例对象
           import con from "./connect.js";
           //引入子组件
           import subVue from "./components/header.vue";
           export default {
               name: "app",
               //声明子组件
               components: {
                   "sub-vue": subVue,
               },
               methods: {
                   parLis(){
                       //通过实例调用原型上的方法$on
                       //当事件触发后，父组件就监听toPhone事件，当自己发射时，就会触发；
                       con.$on("toPhone",function (sonarg) {
                           console.log(sonarg)
                       })
                   }
               }
           }
       </script>
       
       <style scoped>
       
       </style>
      

      • 子组件代码：

       <template>
           <div>
               <p>我是子级组件</p>
               <button @click="sonLis">子组件发射事件</button>
           </div>
       </template>
       <script>
           //引入connect.js文件
           import con from "../connect.js";
       
           export default {
               methods:{
                   sonLis(){
                       //调用vue实例原型上的$emit方法
                       con.$emit("toPhone","子组件传递给父组件的参数信息");
                   }
               }
           }
       </script>
       <style scoped>
           p{
               width: 500px;
               height: 200px;
               background-color: red;
           }
       </style>
      

  • 父子组件传递数据图解： 父子组件
• Vue文档
  • VueAPI地址：API-Vue.js
  • Vue功能图解： VueAPI图解