精华内容
下载资源
问答
  • 前言:这是使用vue-element-admin框架开发的。开发通过后端返回的权限列表判断是否隐藏导航栏,效果图: 有权限的,显示 2。部分没有显示的,隐藏效果图 1.代码写在这里 2. 方法体 在这里插入代码片 ...

    前言:这是使用vue-element-admin框架开发的。开发通过后端返回的权限列表判断是否隐藏导航栏,效果图:

    1. 有权限的,显示在这里插入图片描述
      2。部分没有显示的,隐藏效果图
      在这里插入图片描述

    1.代码写在这里在这里插入图片描述

    2. 方法体

    <template>
      <div :class="{'has-logo':showLogo}">
        <logo v-if="showLogo" :collapse="isCollapse" />
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :background-color="variables.menuBg"
            :text-color="variables.menuText"
            :unique-opened="true"
            :active-text-color="variables.menuActiveText"
            :collapse-transition="false"
            mode="vertical"
          >
            <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
          </el-menu>
        </el-scrollbar>
      </div>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    import Logo from './Logo'
    import SidebarItem from './SidebarItem'
    import variables from '@/styles/variables.scss'
    export default {
      components: { SidebarItem, Logo },
      computed: {
        ...mapGetters([
          'sidebar'
        ]),
        //  routes() {
        //   return this.$router.options.routes
        // },
        activeMenu() {
           const route = this.$route
          const { meta, path } = route
          // if set path, the sidebar will highlight the path you set
          if (meta.activeMenu) {
            return meta.activeMenu
          }
          return path
        },
        showLogo() {
          return true
          // return this.$store.state.settings.sidebarLogo
        },
            variables() {
          return variables
        },
        isCollapse() {
          return !this.sidebar.opened
        }
      },
      data(){
        return{
          module_list:"",
          routes:[]
        }
      },
      created() {
        //调用后端封装的接口,我们不一样,自行修改
        this.getMerchantUserInfo()
      },
      mounted() {
        //必须延迟更新,不然数据更新不上去
        setTimeout(()=>{
          this.forHputai()
        },500)
      },
       methods:{
       forHputai(){
         for(var key in this.module_list){
           this.ifRouter("enterprise_user","/userMagage",key)
           this.ifRouter("merchant","/storeManage",key)
           this.ifRouter("goods","goods_list",key)
           this.ifRouter("goods_apply","apply_list",key)
           this.ifRouter("order","/orderManage",key)
           this.ifRouter("money_change","/financeManage",key)
           this.ifRouter("discount_sales_rule","/promotion",key)
           this.ifRouter("banner","banner",key)
           this.ifRouter("button","functionBlock",key)
           this.ifRouter("area","division",key)
           this.ifRouter("about_us","aboutUs",key)
           this.ifRouter("role","role_auth",key)
           this.ifRouter("admin","administrators",key)
         }
         this.routes = this.$router.options.routes
         this.$forceUpdate() //强制刷新
       },
           //匹配方法,传入后台需要的mate值判断,path拦截路径,key为对象名的值
        ifRouter(mate,path,key){
          //
          if(key==mate && this.module_list[key]==0){
              let routes = this.$router.options.routes
              //一级路由
              for(let i=0;i<routes.length;i++){
                //二级路由
                for(var key in routes[i].children){
                  if(routes[i].path==(path)){
                    routes[i].hidden=true
                  }else if(routes[i].children[key].path==(path)){
                    routes[i].children[key].hidden=true
                  }
                  //如果子路由所有都显示了,父级导航也隐藏
                  if(routes[i].children[key].hidden ==true){
                    routes[i].hidden=true
                  }
                }
              }
          }
        },
            //获取权限,0没权限,1有权限
        async getMerchantUserInfo() {
          await this.$api.getMerchantUserInfo().then(res => {
            if (res.data.level == "success") {
              this.module_list = res.data.data.module_list
            }else{
              this.$message.error(res.data.message)
            }
          })
        }
      }
    }
    </script>

    源码贴上了,实在不知道咋说。看注释吧。

    这是后端返回的数据,所以只能用for(var key in xxxx)这种方法取出来,key是前面的名字,xxx[key]是后面的数值
    在这里插入图片描述

    展开全文
  • I'm new to vue and I would like some help getting a value from an input field:So in my form I have:And with jQuery I would do:var group_id = $('#groupId').val();In vue I don't know how to bind the hid...

    I'm new to vue and I would like some help getting a value from an input field:

    So in my form I have:

    And with jQuery I would do:

    var group_id = $('#groupId').val();

    In vue I don't know how to bind the hidden field:

    //Where do I put the value?

    new Vue({

    el: '#app',

    data: {

    groupId: //What do I put here to get the field's value?

    }

    Can someone please help?

    解决方案

    Update to the update: See this answer. Previously updated answer was wrong.

    Original answer:

    In Vue, you don't get things from the view and put things into the view. Vue does that. You do all manipulations in the viewmodel, and make bindings in the view so that Vue knows how to synchronize it. So you'd bind the input to your model data item:

    and set its value in your viewmodel:

    data: {

    groupId: 1

    }

    展开全文
  • Vue

    2021-03-29 08:01:38
    认识Vue Vue.js是一套用于构建用户界面的渐进式javascript框架。 渐进式框架:说明vue.js的轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。 Vue 不支持 IE8 及以下版本,因为 Vue 使用了...

    认识Vue

    Vue.js是一套用于构建用户界面的渐进式javascript框架。
    渐进式框架:说明vue.js的轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。
    Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。在使用vue之前,先将IDEA中JavaScript语法的版本指定为ECMAScript5以上。

    Vue功能的认识

    • 声明式渲染
      Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
      比如:使用vue.js的插值表达式放在Dom的任意地方,差值表达式的值将被渲染在Dom中。

    在这里插入图片描述

    • 条件与循环
      dom中可以使用vue.js提供的v-if、v-for等标签,方便对数据进行判断、循环。
    • 双向数据绑定
      Vue 提供v-model指令,它可以轻松实现Dom元素和数据对象之间双向绑定,即修改Dom元素中的值自动修改绑定的数据对象,修改数据对象的值自动修改Dom元素中的值。
    • 处理用户输入
      为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法

    Vue的优点

    • 体积小
    • 更高的运行效率
      基于虚拟的dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM
    • 双向数据绑定
      让开发者不用再去操作dom对象,把更多的精力投入到业务逻辑上
    • 生态丰富、学习成本低
      市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来即用实现快速开发!

    了解两种模式

    • MVVM框架
      MVVM拆分解释为:将视图 UI 和业务逻辑分开
      Model:负责数据模型和业务模型 (开发人员要进行相关的代码开发)
      View:负责页面展示数据 (view负责页面数据的渲染
      View Model: 模型和视图之间的双向操作(无需开发人员进行代码开发)
      MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单。

    在这里插入图片描述

    • MVC框架
      模型-视图-控制器
      MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。
      在这里插入图片描述

      Vue的入门开发程序


      编写HTML文件必须要引入vue脚本
      编写vue入门:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello-vue</title>
    
    </head>
    <body>
    <div id="app">
        标签获取数据模型绑定数据<br>
        {{name}}
        <p>
            {{sex}}
        </p>
    </div>
    <script src="vue/vue-v2.6.10.js"></script>  
    <!--js  vue 数据模型层 -->
    <script>
    
        //   获取  vue 对象    json
        var   vue =  new Vue({
            el:"#app",  //  el   绑定页面标签
            //   数据模型声明
            data:{
                name:'你好 ',
                age:12,
                sex:'male'
            }
        })
    
    </script>
    </body>
    </html>
    

    Vue() 对象 里面两个参数 : el和 data

    ​ el : 需要获取的页面标签名

    ​ data: 展示的数据 格式: {} js对象形式

    el

    每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。

    我们可以通过el属性来指定。
    例如一段html模板:

    在这里插入图片描述

    然后创建Vue实例,关联这个div

    在这里插入图片描述

    这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

    数据data

    当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且**监视**data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
    html:

    在这里插入图片描述

    js:

    在这里插入图片描述name的变化会影响到div标签内{ {} }的值

    方法methods

    Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。

    一般方法都会和对应的事件绑定:
    语法格式: v-on:click="函数名称"
    效果:点击事件触发对应的函数

    Vue指令----单向绑定

    • 插值表达式

    一般用来获取vue数据模型中定义的数据
    语法:{ {} }

    • 该表达式支持JS语法,可以调用js内置函数(必须有返回值)如:new Date()
    • 表达式必须有返回结果,例如 1 + 1。没有结果的表达式不允许使用,如:var a = 1 + 1。
    • 可以直接获取Vue实例中定义的数据或函数
    • 插值表达式 不可以使用在标签内的属性值上 一定注意!
    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    
    </head>
    <body>
    <div id="app" >
        <!--插值表达式 可以支持数学和逻辑运算-->
        {{1+1}}
        {{1==1?'true':'false'}}
        <br>
        <!--插值表达式可以支持js内置函数-->
        {{new Date()}}
        <br>
        <!--获取数据模型中数据-->
        {{name}}
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{name:'黑马程序员'}
        })
    
    </script>
    </body>
    </html> 
    

    测试效果:

    小结: 插值表达式一般用来获取数据模型中对应的数据,要求书写在标签体中 ,不可以出现在标签的属性中!

    举例: 在上面的题目中: div 标签 添加一个属性 aa=’’{{name}}"

    • v-text和v-html
      标签显示文本数据, 我们也可以使用v-text和v-html指令来替代{ {} }
      v-text=“数据模型定义的数据”
      v-html=“数据模型定义的数据”

    说明:

    • v-text: 将数据输出到元素内部,如果输出的数据有HTML代码,会作为**普通文本输出
    • v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会**被渲染
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    
    </head>
    <body>
    <div id="app" >
        v-html:<span v-html="hello"></span>
        <br>
        v-text:<span v-text="hello"></span>
    
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{hello:'<h1>大家好,我是刘德华</h1>'}
        })
    
    </script>
    </body>
    </html>
    

    小结: v-text 或者 v-html 一般都使用在页面标签,用于显示标签文本或html片段!

    v-bind:属性名或:属性名

    v-bind 用于将vue的值绑定给对应dom的属性值 主要用于对标签的元素属性赋值
    语法:
    v-bind:元素属性名="数据模型定义的初始数据"
    // 简化语法
    :元素属性名="数据模型定义的初试数据"
    实例:
    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <div id="app" >
        固定跳转
        <a href="http://www.baidu.com">百度</a><br>
        动态跳转
        <a v-bind:href="forwardUrl">{{forwardTitle}}</a><br>
        <br>
        原始语法如下:
        <div v-bind:hidden="hiddenValue">v-bind test</div><br>
        简化写法
        <div :hidden="hiddenValue">v-bind test</div>
    
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data: {
                hiddenValue:false, //  页面元素不影藏 , 如果是true表示隐藏页面元素
                forwardUrl:"http://www.baidu.com",
                forwardTitle:"百度"
            }
        })
    
    </script>
    </body>
    </html>
    

    双向绑定

    v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。

    接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
    语法:
    v-model=“vue中data的属性”
    目前v-model的可使用元素有: 作用范围

    • input
    • select
    • textarea
    • checkbox
    • radio
    • components(Vue中的自定义组件)

    基本上除了最后一项,其它都是表单的输入项。

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <div id="app" >
        <input v-model="name"/>
        <div>
            你输入了{{name}}
        </div>
        <hr>
        <input type="radio" name="sex" value="male" v-model="sex"> 男性
        <input type="radio" name="sex" value="female" v-model="sex"> 女性
        <div>
            你选择了{{sex}}
        </div>
        <hr>
        <div>
            <select name="xueli" v-model="xueli">
                <option value="chuzhong">初中</option>
                <option value="gaozhong">高中</option>
                <option value="daxue">大学</option>
                <option value="boshi">博士</option>
            </select>
        </div>
        <div>
            你选择了{{xueli}}
        </div>
        <hr>
        <input type="checkbox"  v-model="ischecked" />是否选中<br/>
        单选框:{{ischecked}}
        <hr>
        <input type="checkbox"  v-model="language"  value="Java" />Java<br/>
        <input type="checkbox"  v-model="language" value="PHP" />PHP<br/>
        <input type="checkbox"  v-model="language" value="GO" />GO<br/>
        <div>
            多选框:{{language}}
        </div>
    
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{
                name:"xiaoli",
                sex:"male",
                xueli:"boshi",
                language: [],//   对于多选框 我们用数组array来接受多个选项值!
                ischecked: true //   对于一个选项框: boolean 来定义
            }
        })
    
    </script>
    </body>
    </html>
    

    在这里插入图片描述
    小结:

    • 页面展示的数据,来源于我们的数据模型 data定义
    • 多个checkbox对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型
    • radio对应的值是input的value值
    • input 和textarea 默认对应的model是字符串
    • select单选对应字符串,多选对应也是数组

    事件绑定(v-on或@)

    v-on指令用于给页面元素绑定事件 语法:
    格式
    v-on:事件名="js片段或函数名"
    缩写:
    @事件名="js片段或函数名"

    例如:v-on:click=‘add’ 可以简写为 @click=‘add’

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    
    </head>
    <body>
    <div id="app" >
        <!--事件中,简单js片段可以直接写-->
        <button @click="crement">增加</button>
        <!--事件中复制逻辑可以调用函数-->
        <button @click="decrement">减少</button>
        <h1>{{num}}</h1>
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                decrement:function () {
                    num--;
                },
                crement:function () {
                    num++;
                }
            }
        })
    
    </script>
    </body>
    </html>
    

    运行效果:
    在这里插入图片描述

    遍历数组---(v-for)

    语法:v-for="item in items"
    • items:要遍历的数组需要在vue的data中定义好
    • item:迭代得到的数组元素别名
    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="UTF-8">
      <title>v-for</title>
    </head>
    <body>
    <div id="app">
      <!--遍历数组 -->
      <table width="100%" border="1px">
        v-for位置:在需要遍历的元素父元素中书写
        <tr v-for="user in users">
          <td >{{user.name}}</td>
          <td v-text="user.gender"></td>
          <td v-text="user.age"></td>
        </tr>
      </table>
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
      var app = new Vue({
        el: "#app",
        data:{
          //  定义数组对象  遍历的数据源
          users:[
            {name:'柳岩', gender:'女', age: 20},
            {name:'有哥', gender:'男', age: 30},
            {name:'范冰冰', gender:'女', age: 24},
            {name:'刘亦菲', gender:'女', age: 18},
            {name:'古力娜扎', gender:'女', age: 25}
          ]
        }
      });
    </script>
    </body>
    </html>
    

    运行测试:

    在这里插入图片描述

    遍历数组---(v-for)

    语法: v-for="(item,index) in items"
    • items:要迭代的数组
    • item:迭代得到的数组元素别名
    • index:迭代到的当前元素索引,从0开始。
    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <div id="app" >
        <table width="100%" border="1px">
            <tr v-for="(user,index) in users">
                <!--<td >{{index+1}}</td> 或者下面写法 -->
                <td v-text="index+1"></td>
                <td v-text="user.name"></td>
                <td v-text="user.age"></td>
                <td v-text="user.gender"></td>
            </tr>
        </table>
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{
                //  定义数组对象  遍历的数据源
                users:[
                    {name:'柳岩', gender:'女', age: 20},
                    {name:'有哥', gender:'男', age: 30},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ]
            }
        })
    
    </script>
    </body>
    </html>
    

    运行测试:
    在这里插入图片描述

    .v-if &v-else 使用

    v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
    语法:
    v-if="布尔表达式"
    v-else
    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    
    </head>
    <body>
    <div id="app" >
        <div @click="flag=!flag">
            点击我试试
        </div>
    
        <p v-if="flag">你好 黑马程序员</p>
        <p v-else>你好 传智播客</p>
    </div>
    
    <script src="../js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{
                flag: true
            }
        })
    
    </script>
    </body>
    </html>
    

    运行结果:
    在这里插入图片描述

    v-else-if嵌套(了解)


    v-else-if,顾名思义,充当v-if 的“else-if 块”,可以连续使用:

    <div id="app" >
        <div v-if="type=='A'">
            A
        </div>
        <div v-else-if="type=='B'">
            B
        </div>
        <div v-else-if="type=='C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>
    
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                type:"D"
            }
        })
    
    </script>
    

    类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者v-else-if 的元素之后。

    Vue生命周期

    • 每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。

    • Vue为生命周期中的每个状态都设置了监听函数。

    • 每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。

    • vue的生命周期中具体做了什么事情我们通常不需要关心,我们只要关注生命周期的8个监听函数。
      生命周期流程图:
      在这里插入图片描述上图描述了详细的Vue对象的整个生命周期,这里我们提取出里面重点的地方,简化为下面这个流程图:
      在这里插入图片描述

      监听函数


      vue的整个生命周期中,提供了8个监听函数,以便我们可以在某个生命周期段根据需要做相应的操作:

    • beforeCreate:在vue实例创建前调用

    • created:在vue实例创建后调用,这个监听函数是最常用的,这个时候会初始化data数据,通常去后端取数据;

    • beforeMount:在挂载开始之前被调用 。 什么是挂载?可以将vue对象和视图模板进行关联的过程看作是挂载

    • mounted:挂载到实例上去之后调用

    • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前

    • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子

    • beforeDestroy:实例销毁之前调用。在这一步,vue实例仍然完全可用。

    • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
      简单的案例演示:

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    
    </head>
    <body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    
    <script src="js/vue.js"></script>
    <!--js  vue 数据模型层 -->
    <script type="text/javascript">
        var vue = new Vue({
            el: '#app',
            data: {
                message: "we are 伐木累!"
            },
            beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
                console.log("%c%s", "color:red", "message: " + this.message)
            },
            created: function () {
                console.group('created 创建完毕状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》el');
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log(this.$el);    //已被挂载,就是当前指向的el元素
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeUpdate: function () {
                console.log('beforeUpdate 即将更新渲染=');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log(this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
    
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log(this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
    
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        })
    </script>
    
    </body>
    </html>
    

    运行效果:
    在这里插入图片描述当在控制台输入一个data数据 更改message 值是,此事 beforeUpdate 和 update 钩子方法触发

    在这里插入图片描述回车 此时的$el 是虚拟的dom 对象 会立刻更新为 hello heima ! 页面view还未更新最新的数据。
    等到update 方法执行 会实现页面view 的数据更新

    小结: 了解生命周期,掌握常用的 created方法! 可以理解 页面标签数据初始化之前执行的方法!

    通常在此方法中,我们发起后台数据请求,在渲染页面标签数据之前,先获取后台数据,进行data 数据的模型赋值!

    this对象的说明

    我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
    var vue = new Vue({
        el:"#app",
        data:{
            hello: '' // hello初始化为空
        },
        created(){
            thishello = "hello, world! 我出生了!";
            console.log(this);
        }
    })
    

    控制台的输出:
    在这里插入图片描述
    总结:
    this就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue中定义的data内属性、方法等

    HTTP请求与HTTP报文

    使用浏览器查看HTTP请求

    在这里插入图片描述
    HTTP请求传参方式:
    一个完整的HTTP报文分为请求报文(Request)返回报文(Response),这里我们主要讲解请求报文。请求报文又都分为请求头(header)请求体(body),如下图所示。
    在这里插入图片描述HTTP请求的传参方式很多,做网站的主要传参方式有:URL传参请求体传参

    Url传参

    URL传参就是将请求拼接在URL后面,传送到服务器。
    • 格式:
      http://xxx.xxx.com?param1=xxx&param2=xxx
    • 缺点:
      http协议对url长度是没有限制的,但是无论浏览器还是后端服务器(nginx、tomcat等)都会限制url的长度,所以URL传参会有参数长度限制问题

    请求体传参

    请求体可以用于传输任何可以二进制表示的数据。 服务端如何区分Http body里存的是什么内容?
    • http请求头Content-type用来指定body中的数据格式
    • 例如:
      application/json:json数据格式
      application/x-www-form-urlencoded :表单默认的提交数据的格式
      multipart/form-data : 需要在表单中进行文件上传时,可以使用该格式

    GET与POST

    在这里插入图片描述- 什么是幂等操作?

    • 可以简单理解为,可以重复多次操作,不会影响服务器状态(主要是数据),一般都是查询操作。
    • 如何判断应该使用POST还是GET?
      • 一般查询操作使用GET请求
      • 其他操作(创建、删除、更新)使用POST,在RESTFul风格,删除用DELETE、更新用PUT

    axios使用

    axios是对ajax技术的一种封装,就像jQuery实现ajax封装一样。
    简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。

    axios各种传参方式

    • GET请求(URL传参)
      两种使用方法:
    • axios.get(url).then((response)=>{}) ;
    • axios.get(url,{ params:实际参数}).then((response)=>{}) ;
      以用户登录请求为例,我们可以通过两种方式传参,如下:
    // 方式一
    axios.get("/vuedemo/user?username=admin&password=123").then((response) => {
         //处理返回结果  
     });
     
    // 方式二,axios会自动将第二个参数里的username和password拼接到URL后面,效果等同于方式一
    axios.get("/vuedemo/user",{ params: {"username":"admin","password":"123"}}).then((response) => {
       //操作返回结果
    });
     
    

    后端Controller的参数接收方式也有两种,效果相同:
    String username = request.getParameter(“username”);
    String password = request.getParameter(“password”);

    • POST请求(URL传参|Body传参)
      三种使用方法:
    1. axios.post(url).then((response)=>{}) ; //请求体为空
    2. axios.post(url,body).then((response)=>{}) ; //携带请求体,默认是JSON请求
    3. axios.post(url,body,config).then((response)=>{}) ; //可以通过config进行更多的配置,例如设置请求头
      场景一:URL传参
      前端:
    axios.post("/vuedemo/user?username=admin&password=123").then((response) => {
         //处理返回结果  
     });
    

    后端Controller的参数接收方式与GET请求的URL传参方式相同,如下:

    String username = request.getParameter("username");
    String password = request.getParameter("password");
    

    场景二:表单提交(Body传参)
    axios默认发送的请求是JSON请求,如果使用axios进行进行一个表单请求要怎么处理呢?这里还是举一个登录的例子:

     // axios默认发送请求的content-type为application/json
    //所以发送表单请求,则需要指定content-type为application/x-www-form-urlencoded
    axios.post("/vuedemo/user", "username=admin&password=123", {
         headers: {'content-type': 'application/x-www-form-urlencoded'},
     }).then((response) => {
         //处理返回结果  
     });
    

    这种情况下,后端Controller的参数接收方式,和URL传参的后端接收方式相同,不再赘述。
    场景三:JSON提交(Body传参)
    前端代码:

    axios.post("/vuedemo/user", {"username":"xxx","password":"xxx"}).then((response) => {
         //处理返回结果  
     });
    

    后端Controller的参数接收方式:

    ```html
    public class LoginParam {
        private String username;
        private String password;
        // setter
        // getter
        // 构造方法
    }
    
    LoginParam loginParam = JSON.parseObject(request.getInputStream(),LoginParam.class);
    System.out.println(loginParam);
    

    结论:只要确定前端传递的是JSON时,后端肯定要用流来接收,其他都是正常接收。

    axios返回值

    这里以get请求为例,axios的返回值获取方式如下所示:
    axios.get("http://xxxxxxxxx").then((response)=>{
    	//response.data就是服务器端返回的内容(例如json)
        console.log(response.data);
    }).catch((error)=>{
        console.log(error);
        this.$message.error("网络异常");
    });
    
    展开全文
  • VUE

    2020-06-15 22:16:20
    VUE 一.ES6语法 VUE基于是ES6的,所以在使用Vue之前我们需要先了解一下ES6的语法。 1.什么是ECMAScript ECMAScript是浏览器脚本语言的规范,可以狭义理解是javascript的规范。为什么会出现这个规范呢? 1.1.JS发展史...

    VUE

    一.ES6语法

    VUE基于是ES6的,所以在使用Vue之前我们需要先了解一下ES6的语法。

    1.什么是ECMAScript

    ECMAScript是浏览器脚本语言的规范,可以狭义理解是javascript的规范。为什么会出现这个规范呢?

    1.1.JS发展史

    • 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。

    • 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现。

    • 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范。

    1.2.ECMAScript发展历史

    • 97年而后,ECMAScript就进入了快速发展期。1998年6月,ECMAScript 2.0 发布。

    • 1999年12月,ECMAScript 3.0 发布。这时,ECMAScript 规范本身也相对比较完善和稳定了,但是接下来的事情,就比较悲剧了

    • 2007年10月,ECMAScript 4.0 草案发布。这次的新规范,历时颇久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。

      一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

      一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

      ECMAScript 4 的很多主张比较激进,改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议,决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1,而ES4的内容,则延续到了后来的ECMAScript5和6版本

    • 2009年12月,ECMAScript 5 发布。

    • 2011年6月,ECMAScript 5.1 发布。

    • 2015年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。

      ES6就是javascript用的最多语言规范.被各大浏览器厂商实现了.

    2.ES6语法规范

    2.1.let & var

    都是用来声明变量, let相较于var,他是块级的(局部)。

    for(var i == 0 ; i < 10 ; ++){
        console.debug(i);
    }
    console.debug("i="+i);	//正常打印
    ------------------------------------
    for(let i == 0 ; i < 10 ; ++){
        console.debug(i);
    }
    console.debug("i="+i);	//这里会报错,i会找不到
    

    2.2.const

    const声明常量不能修改 , 如同Java的final修饰符

    const c = 4;
    c = 5;	//编译报错,不能修改
    

    2.3.结构表达式

    数组赋值

    let arr = ["好","大"];
    ------------------------------------
    console.debug(arr[0],arr[1]);	//以前的取值
    ------------------------------------
    
    let [a,b] = arr;	//结构表达式数组赋值,定义了变量a,b并按照索引赋值。
    console.debug(a,b);	
    

    对象赋值

    var user = {
        id: 1,
        username:"zs",
        age: 11
    }
    --------------------------------------
    console.debug(user.id,user.username,user.age);	//以前的取值
    --------------------------------------
    var {id,username,age} = user;	//结构表达式,对象赋值,按照属性名赋值。
    console.debug(id,username,age);
    

    方法参数赋值

    var user = {
        id: 1,
        username:"zs",
        age: 11
    }
    --------------------------------------
    function showUser({id,username,age}){ 	//结构表达式,方法参数赋值,按参数名赋值。
    	console.debug(id,username,age);
    }
    showUser(user);	//把user对象作为参数传给showUser方法	
    

    注意:数组用 [ ] 赋值,对象用 { } 赋值

    2.4.箭头函数

    var user = {
        username:"zs",
        age:22,
        showUser:function(){	//以前定义方法的方式
            console.debug(this.username+" "+this.age);
        },
        //--------------------------------------
        showUser2:()=>{	//es6定义方法的方式
            //注意:这里的this指的是window对象了。不能用this.usename
    		console.debug(user.username+" "+user.age);        
        },
        showUser3(){	//简写
            console.debug(user.username+" "+user.age);        
        }
    }
    user.showUser();
    user.showUser2();
    user.showUser3();
    

    2.5.Promise对象

    Promise是异步编程的一种解决方案,比传统的解决方案(回调函数+事件)更加合理和强大。 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象,并在内部封装一个异步执行的结果。

      /**=======================================
         Promise 异步请求
         =======================================**/
        //1.执行异步请求
        const p = new Promise((resolve, reject) =>{
            //成功,调用 resolve 
            //失败,调用 reject
            // 这里我们用定时任务模拟异步
            setTimeout(() => {
                const num = Math.random();
                // 随机返回成功或失败
                if (num < 0.5) {
                    //2.调用成功的结果回调
                    resolve("成功!num:" + num)
                } else {
                    //3.调用失败的结果回调
                    reject("出错了!num:" + num)
                }
            }, 300)
        })
        // 调用promise
        p.then(function (msg) {
            //2.调用成功的结果回调
            console.log(msg);
        }).catch(function (msg) {
            //3.调用失败的结果回调
            console.log(msg);
        })
    

    2.6.模块化

    main.html
    main.js
    util.js
    

    util.js

    export const util = {
        sum(a , b){
            return a + b;
        }
    }
    -----------------------------或者
    const util = {
        sum(a , b){
            return a + b;
        }
    }
    export const;
    -----------------------------批量导出
    lef a = 1 ,let b = 2;
    export {a,b};
    

    main.js

    import {util} from './util.js';
    

    main.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
    </head>
    <script src="./main.js" type="model"></script>
    <script>
        alert(util.sum(1,1));   //运行会报错,浏览器不支持,要使用webpack之后才能运行
    </script>
    <body>
    
    </body>
    </html>
    
    

    运行会报错,浏览器不支持,要使用webpack之后才能运行

    2.7.总结

    • let
    • const
    • 结构表达式
    • 箭头函数
    • Promise
    • 模块化

    二.前端技术了解

    1.前段历史

    1.1.静态网页

    1990 html

    1.2.异步刷新-操作dom

    1995 javascprint

    1.3.动态网站

    Asp/jsp(java),php等,后台臃肿

    1.4.Ajax成为主流

    异步请求

    1.5.Html5

    被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。

    2.Nodejs介绍

    2.1.介绍

    Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码,其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能,更重要的是它构建了一个庞大的生态系统。

    2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

    JavaNodejs
    后端服务器开发前段服务器开发
    Maven管理jar包NPM管理JS库
    SSM架构开发项目VUE前段框架

    随后,在node的基础上,涌现出了一大批的前端框架:Angular(MVC->MVVM),Vue(MVVM)等等

    2.2.主流前端框架

    前端框架三巨头:

    • Vue.js:vue.js以轻量易用著称

    • React.js:vue.js和React.js发展速度最快, 集web前端与app于一身技术

    • AngularJS:AngularJS还是曾今老大。

    三.Nodejs和VUE的安装

    vue的安装方式有两种,

    • 手动下载VUE的js库,然后在html中导入JS库进行开发
    • 通过Npm安装VUE的JS库,然后在html中导入使用

    第一种方式我们玩其他JS库的时候一直都在用,我们主要使用Npm来安装VUE

    1.Nodejs的安装

    NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具.

    1.1.安装Nodejs

    Nodejs自带npm,安装好Nodejs就安装好了npm

    • NodeJs下载:https://nodejs.org/en/download/

    • 安装:双击安装

    • 升级:npm install npm@latest -g

    • 测试Node:cmd -> node -v

    • 测试Npm: cmd -> npm -v

    • 淘宝镜像:npm config set registry https://registry.npm.taobao.org

    1.2.cnpm的使用(可用可不用)

    淘宝团队做的国内镜像,因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

    • 安装:命令提示符执行
      npm install cnpm -g --registry=https://registry.npm.taobao.org
    • 测试cnpm :cnpm -v

    2.VUE的安装

    我们在IDEA中创建一个静态项目,通过Terminal来安装VUE

    2.1.IDEA准备

    IDEA安装Nodejs插件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKWCn6Jz-1592229882014)(images/image-20200423135515028.png)]

    IDEA配置Terminal
    在这里插入图片描述

    2.2.Vue安装和使用

    VUE官网地址:https://cn.vuejs.org/v2/guide/

    使用CDN方式

    Vue有两种使用方式,1是使用cdn方式直接引入JS库 ,2.使用Npn安装VUE库,第一种方式如下:

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    

    当然也可以手动下载该JS库到本地项目,然后引入JS库

    使用NPM安装VUE

    • 使用Terminal初始化 :npm init -y

      改名了是初始化NPM,会在项目中产生一个package.json文件。

    • 安装vue:

      全局安装(不推荐):npm install -g vue

      局部安装(推荐) :npm install vue

      安装成功后VUE的JS库:node_modules/vue/dist/vue.js

    注意:项目的名称不能使用“vue”,不然会报错

    NPM相关命令

    查看模块:npm list vue
    
    卸载模块:npm uninstall vue
    
    更新模块:npm update vue
    
    运行工程:npm run dev/test/online
    
    编译工程:npm run build
    

    四.VUE的基本使用

    1.VUE介绍

    1.1.Vue是什么

    Vue (读音 /vjuː/,类似于 ***view*) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    VUE+ElementUI

    1.2.Vue的特点

    • 轻量

    Vue.js库的体积非常小的,并且不依赖其他基础库。

    • 数据绑定

    对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。

    • 指令

    内置指令统一为(v—*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。

    • 插件化

    Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。

    • 组件化,他支持自定义标签

    组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

    1.3.MVVM思想

    Vue是一款开源的JavaScript MV*(MVVM、MVC)框架。

    Vue 引入了MVVM (Model-View-ViewModel)模式,他不同于MVC架构.

    • M :即Model,模型,包括数据和一些基本操作

    • V :即View,视图,页面渲染结果

    • VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)

    在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:

    • 只要我们Model发生了改变,View上自然就会表现出来。

    • 当用户修改了View,Model中的数据也会跟着改变。

    把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上.

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNayFd00-1592229882019)(images/image-20200423134455899.png)]

    总结一下:MVVM的思想就是数据模型和视图的双向绑定,只要数据变化,视图会跟着变化,只要视图被修改,数据也会跟者变化。

    2.VUE入门

    2.1.Hello World程序

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

    创建vue-demo.html,目录结构如下:

    vue-demo
    	node_modules
    	package.json
    	package-lock.json
    	pages
    		vue-demo.html
    
    

    vue-demo.html

    <script type="application/javascript" src="../node_modules/vue/dist/vue.js"></script>
    ---------------------------------------------------
    <body>
        <div id="app">
            <!--        取data中的数据-->
            {{ message }}
        </div>
    </body>
    ---------------------------------------------------
    <script type="application/javascript">
        var app = new Vue({
            //使用ID绑定vue到页面的元素
            el: '#app',
            //vue的数据
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
    
    

    Hello Vue!

    2.2.VUE的el挂载

    每个Vue实例通过el配置挂载的标签,该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。

    2.3.VUE的数据“data”

    <body>
        <div id="app">
            <!--        取data中的数据-->
            {{ message }}
            <hr/>
            {{ user }}
            <hr/>
            {{ user.username }}	//取对象中的数据
        </div>
    </body>
    <script type="application/javascript">
        var app = new Vue({
            //使用ID绑定vue到页面的元素
            el: '#app',
            //vue的数据
            data: {
                message: 'Hello Vue!',	//普通数据
                user:{	//对象数据
                    username:"zs",
                    age:11
                }
            }
        })
    </script>
    

    注意:{{}}取值不能脱离VUE绑定的元素。

    2.4.VUE的方法

    所有的方法都在methods属性中定义,方法的调用可以通过在VUE绑定的页面元素中使用{{方法名()}} 的方式,也可以在js中通过VUE对象调用.

    <body>
        <div id="app">
            <!--        取data中的数据-->
            取普通值:{{ message }}
            <hr/>
            取对象值:{{ user }}
            <hr/>
            取对象中的属性:{{ user.username }}
            <hr/>
            调用方法:{{showUser('参数')}}
        </div>
    </body>
    <script type="application/javascript">
        var app = new Vue({
            //使用ID绑定vue到页面的元素
            el: '#app',
            //vue的数据 ,所有的数据都在这里绑定
            data: {
                message: 'Hello Vue!',
                user:{
                    username:"zs",
                    age:11
                }
            },
            //vue的方法,所有的方法都在这里定义
            methods:{
                showUser(args){
                    //这里的 this 代表 Vue对象
                    console.log(this.user.username);
                    console.log(this.user.age);
                    console.log(args);
                }
            }
        })
    
        //调用vue方法
        app.showUser('我也是参数');
    </script>
    

    3.VUE的表达式

    3.1.表达式语法

    • VueJS表达式写在双大括号内:{{ expression }}。

    • VueJS表达式把数据绑定到 HTML。

    • VueJS将在表达式书写的位置"输出"数据。

    • VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

    实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

    3.2.简单表达式

    在{{ }}中可以进行简单的运算.

    <div id="app">
    	<!--简单表达式  -->
    	<h1>{{num1+num2}}</h1>
    	<!-- +:运算,字符串连接 -->
    	<h1>{{5+"v5"}}</h1>
    	<h1>{{5+"5"}}</h1>
    	<!-- -:减法 -->
    	<h1>{{"5"-"5"}}</h1>
    	<h1>{{5*5}}</h1>
    	<!-- *:乘 -->
    	<h1>{{"5"*"5"}}</h1>
    	<!-- / 除-->
    	<h1>{{5/5}}</h1>
    	<h1>{{5/5}}</h1>
     </div>
    ---------------------------------------------------------------------------------------------------
    var app = new Vue({
      //挂载到id=app元素上
      	el:"#app",
    	num1: 10,
    	num2: 20
    });
    
    

    3.3.三目运算符

    在{{}}中的表达式可以使用data中数据 , 可以使用三元运算符,但是不能够使用其他语句

    <div id="app">
    	<!--三目运算  -->
    	{{ show1?"真":"假"}}
    </div>
    
    var app = new Vue({
    	el : "#app",
    	data : {
    		show1 : true
    	}
    });
    
    

    3.4.字符串操作

    • 直接使用字符串字面值作为字符串对象

    • 使用data中的字符串对象

    <div id="app">
        {{"这是字面值"}}<br/>
        {{"这是字面值".length}}<br/>
        {{message.length}}<br/>
        {{message.substring(1,5)}}<br/>
        {{message.substring(2,6).toUpperCase()}}<br/>
    </div>
    
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		message: "这是data中的数据"
    	}
    });
    
    

    3.5.对象操作

    在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

    <div id="app">
        {{user}}<br/>
        {{JSON.stringify(user)}}<br/>
        {{user.toString()}}<br/>
        {{user.name}}<br/>
        {{user.age}}<br/>
        {{user.getAge()}}<br/>
    </div>
    
    var user = {
    	name: "张三",
    	age: 29,
    	getAge: function () {
    		return this.age
    	},
    	toString:function(){
    		return "姓名:"+this.name+",年龄:"+this.age;
    	}
    };
    var app = new Vue({
    	el: "#app",
    	data: {
    		user: user
    	}
    });
    
    

    3.6.数组操作

    在表达式中可以使用JavaScript数组中的任何语法来操作数组.

    <div id="app">
        {{hobbys}}<br/>
        {{hobbys[0]}}<br/>
        {{hobbys.length}}<br/>
        {{hobbys.toString()}}<br/>
        {{hobbys.join("------")}}<br/>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
    	}
    });
    
    

    4.VUE的指令

    指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

    Ø 作用: 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

    Ø 一个标签元素上可以出现多个指令属性

    Ø 指令只能够出现在Vue对象所挂载的标签范围内的标签中

    常用指令如下:

    v-model=“表达式” 数据双向绑定
    v-text=“表达式”  设置标签中的文本
    v-html=“表达式”  设置标签中的html
    v-if(else else if)=“表达式”    判断条件	
    v-for=“表达式”   循环
    v-on=“表达式”    注册事件
    
    

    4.1.v-text

    • 语法
    <标签 v-text="textValue"></标签>
    
    
    <div id="app">
        <span v-text="message"></span><br/>
        <span v-text="user.username"></span><br/>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		message: "<h1>这是一个Span!</h1>",
    		user: {
    			username: "lw"
    		},
    	}
    });
    
    

    给元素填充纯文本内容

    4.2.v-html

    通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

    • 语法
    <标签 v-html="htmlValue"></标签>
    
    
    <div id="app">
        <div v-html="message"></div>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		message: "<h1>这是HTMl代码</h1>"
    	}
    });
    
    

    和v-text的区别是v-html会把内容的html符号进行渲染

    4.3.v-for

    v-for可以作用于:数字,字符串,数组,对象

    • 语法一:普通用法
    <标签 v-for="每一个元素 in 数据源">{{每一个元素}}</标签>
    
    • 语法二:带索引
    <标签 v-for="(元素,索引|键) in 数据源">{{元素}}=={{索引}}</标签>
    
    • 语法三:键,值,索引
    <标签 v-for="(元素,键,索引) in 对象"></标签>
    
    <div id="app">
        <h1>循环数组</h1>
        <ul>
            <li v-for="hobby in hobbys">{{hobby}}</li>
        </ul>
        <h1>遍历对象</h1>
        <ul>
            <li v-for="value in student">{{value}}</li>
        </ul>
    
        <h1>带索引循环数组</h1>
        <ul>
            <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
        </ul>
        <h1>带键遍历对象</h1>
        <ul>
            <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
        </ul>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		hobbys : ["爬山","游泳","打豆豆","睡觉"],
    		student : {
    			name: "小毛",
    			age: 29,
    			sex: "男",
    		},
    		num : 10,
    		str : "itsource",
    	}
    });
    

    学生列表案例

    <div id="app">
    	<table >
    		<tr>
    			<th>序号</th>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>性别</th>
    		</tr>
    		<tr v-for="student in students">
    			<td>{{student.id}}</td>
    			<td>{{student.name}}</td>
    			<td>{{student.age}}</td>
    			<td>{{student.sex}}</td>
    		</tr>
    	</table>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		students: [
    			{id:1,name: "刘备", age: 29, sex: "男"},
    			{id:2,name: "貂蝉", age: 30, sex: "女"},
    			{id:3,name: "吕布", age: 31, sex: "男"}
    		]
    	}
    });
    
    

    4.4.v-bind

    将data中的数据绑定到标签上,作为标签的属性.

    • 语法一
    <标签 v-bind:标签属性名字="表达式"></标签>
    
    
    • 语法二:简写
    <标签 :标签属性名字="表达式"></标签>
    
    
    • 语法三:为一个标签绑定一个对象作为该标签的多个属性
    <标签 v-bind="对象"></标签>
    
    
    <div id="app">
        <img src="xxx.jpg" />
        
        <img v-bind:src="imgsrc" v-bind:title = "title"/>
        <img :src="imgsrc" :title = "title"/>
        <input v-bind="props"/>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		imgsrc: "./img/1.jpg",
    		title: "二哈!",
    		props :{
    			type: "text",
    			name: "username",
    		}
    	}
    });
    
    

    4.5.v-model 指令(重点)

    在表单控件上创建双向绑定,表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,

    当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

    v-model只作用于以下表单: input select textarea

    <标签 v-model="表达式"></标签>
    
    
    <div id="app">
      <h1>绑定到type=text的input表单元素</h1>
      姓名:<input type="text" v-model="inputValue"><br/>
      data中的值:{{inputValue}}
    
      <h1>绑定到type=checkbox的input表单元素</h1>
      打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
      踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
      data中的值:{{checkboxValue}}
    
    
      <h1>绑定到type=radio的input表单元素</h1>
      打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
      踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
      data中的值:{{radioValue}}
    
      <h1>绑定到textarea的元素</h1>
      个人简介:<textarea v-model="textareaValue"></textarea><br/>
      data中的值:{{textareaValue}}
    
    
      <h1>绑定到单选的select的元素</h1>
      技能:<select v-model="skills">
            <option value="java">java</option>
            <option value="php">php</option>
            <option value=".net">.net</option>
          </select><br/>
      data中的值:{{skills}}
    
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		inputValue: "初始化的值",
    		checkboxValue: ["踢足球"],
    		radioValue: "打篮球",
    		textareaValue: "你是一个优秀的软件工程师!",
    		skills: "java",
    	}
    });
    
    

    4.6.v-show

    根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none

     <标签名 v-show="表达式"></标签名>
    
    

    4.7.v-if

    • 语法一
    <标签名 v-if="表达式"> ... </标签名>
    
    
    <div id="app">
        <div v-if="show">你看到我了!</div>
        <div v-if="hidden">你看不到我了!</div>
        <div v-if="score>=90">优秀</div>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		"show":true,
    		"hidden":true,
    		"score":90,
    	}
    });
    
    
    • 语法二
     <标签名 v-if="表达式"></标签名>
     <标签名 v-else></标签名>
    
    
    <div id="app">
        <div v-if="isVip">欢迎欢迎!!</div>
        <div v-else>滚动!!</div>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		isVip: true
    	}
    });
    
    
    • 语法三
    <标签名 v-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else></标签名>
    
    
    <div id="app">
        <div v-if="score>=90">优秀!!</div>
        <div v-else-if="score>=70">良好!!</div>
        <div v-else-if="score>=60">及格!!</div>
        <div v-else="score<60">不及格!!</div>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		score: 80
    	}
    });
    
    

    4.8.v-on

    使用v-on指令注册事件

    <标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
      简写方式
    <标签 @事件句柄="表达式或者事件处理函数"></标签>
    
    
    <div id="app">
      <h1>结果</h1>
        {{num}}
      <h1>表达式的写法</h1>
     <button v-on:click="num++">按钮</button><br/>
     <button @click="num++">按钮</button><br/>
    
     <h1>事件处理函数</h1>
     <button v-on:click="myclick">按钮</button><br/>
     <button @click="myclick">按钮</button><br/>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		num:0
    	},
    	methods:{
    		myclick:function(){
    			app.num++;
    			console.log(this);
    		}
    	}
    });
    
    

    5.计算属性和watch

    5.1.computed

    有的时候我们需要在页面进行复杂的计算,复杂的计算导致页面很乱,Vue中提供了计算属性,来替代复杂的表达式:

    <div id="app">
        <h1>您的生日是:{{birth}} </h1>
    </div>
    -----------------------------------------------------------------
    var vm = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201 // 毫秒值
        },
        computed:{
            birth(){// 计算属性本质是一个方法,但是必须返回结果
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    })
    

    5.2.watch

    watch可以让我们监控一个值的变化。从而做出相应的反应。

    <div id="app">
          <input type="text" v-model="message">
    </div>
    -------------------------------------------------------------
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                message:"xxxx"
            },
            watch:{
                message(newVal, oldVal){	//监听 message 的变化,调用该函数。
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>
    

    6.组件component

    6.1.什么是组件

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素标签,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。

    简而言之, 组件是用来完成特定功能的一个自定义的HTML标签,组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. 封装重复利用

    6.2.组件的分类

    组件分为全局组件和局部组件

    • 全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效

    • 局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效

    6.3.全局组件

    全局组件可以在任何被挂着的标签中使用 , 全局组件的配置对象中必须包含template属性

    • 定义全局组件语法
    Vue.component("自定义标签的名字",{配置对象})
    
    
    <div id="app">
      <mycomponent1></mycomponent1>
      <mycomponent2></mycomponent2>
    </div>
    
    <div id="app1">
      <mycomponent1></mycomponent1>
      <mycomponent2></mycomponent2>
    </div>
    
    -------------------------------------------------------------------------------
    
    //定义第一个全局组件
    
    Vue.component("mycomponent1",{
    	template : "<h1>这是第一个全局组件</h1>"
    })
    
     
    
    //定义第二个全局组件
    
    var component2Config = {
    	template : "<h1>这是第二个全局组件</h1>"
    };
    
    Vue.component("mycomponent2",component2Config);
    
    var app = new Vue({
    	el: "#app",
    	data: {
    	}
    });
    
    
    var app1 = new Vue({
        el: "#app1",
        data: {
        }
    });
    
    

    注意事项:template中的html必须在一个标签中. 仅且只能有一个根节点 ,如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

    6.3.局部组件

    局部组件只能够在所挂载的标签中使用

    • 定义局部组件语法
    var app = new Vue({
        el: "#app",
        data: {},
        components : {
            "局部组件的名字1" : {组件的配置对象},
            "局部组件的名字2" : {组件的配置对象}
        }
      });
    
    

    案例

    <div id="app1">
        <mycomponent></mycomponent>
    </div>
    <div id="app2">
        <mycomponent></mycomponent>
    </div>
    
    
    //1. 在id=app1挂载的实例的components中定义局部组件
    var app1 = new Vue({
    	el: "#app1",
    	data: {},
    	components : {
    		"mycomponent" : {
    			template : "<h1>这是一个局部组件</h1>"
    		}
    	}
    });
    
    //2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
    var app2 = new Vue({	
    	el: "#app2",
    	data: {}
    });
    
    
    • 利用全局组件定义局部组件
    <!--使用局部组件-->
    <div id="#app">
    	<innercomponent></innercomponent>
    </div>
    <!-- 使用全局组件 -->
    <div id="#app1">
    	<outercomponent></outercomponent>
    </div>
    
    -------------------------------------------
    Vue.component("outercomponent",{
    	tmeplate:"<h1>哈哈/h1>"
    })
            
    new Vue({
            
    	el:"#app",
        components:{
            mycomponent:{
                innercomponent:outercomponent	//应用全局组件来定义局部组件
            }
        }    
    })
    new Vue({
            
    	el:"#app1",
    })
    
    
    
    

    6.4.HTML模板定义组件

    在JS定义组件,组件的HTML内容比较多的时候拼接起来比较麻烦,VUE支持把中的HTML片段作为模板来定义组件。

    案例:可以使用 定义模板,也可以使用

    <div id="app">
    	<!--使用组件-->
        <mycomponent></mycomponent>
    </div>
    
    <!--定义模板方式一:<template> -->
    <template id="mytemplate1">
           <h1>template标签中的html</h1>
    </template>
    
    <!--定义模板方式二:<script>  -->
    <script type="text/template" id="mytemplate2">
        <h1>template标签中的html</h1>
    </script>
    
    <script type="text/javascript">
        var app4 =  new Vue({
            el:"#app",
            components:{
                "mycomponent":{
                    template:"#mytemplate2"	//引用模板定义组件
                }
            }
        });
    </script>
    

    6.6.组件获取数据

    在使用组件的时候往往需要动态填充填充数据,VUE组件要动态获取数据并不是从VUE的Data中取,而是从template中的Data属性获取数据,并且data必须是一个函数,函数返回的数据必须是JSON

    <body>
        <div id="app">
            <mycomponent></mycomponent>
        </div>
        <template id="mytemplate">
                {{name}}:欢迎登陆        
        </template>
    </body>
    <script type="text/javascript">
    
       var mytabConfig = {
           template:"#mytemplate",
           data(){	//组件中的数据从这里找 ,data必须是一个函数,这里用了ES6语法
               return {"name1":"xxxx"}	//返回的数据必须是JSON
           }
       }
       //定义组件
       Vue.component("mycomponent",mytabConfig);
        
       var app = new Vue({
           el: "#app",
           data: {	//组件中的数据会不从这里找
           }
    
       });
    </script>
    

    上面是全局组件的写法,局部组件也是一样

    var app = new Vue({
           el: "#app",
           data: {
           },
           components:{
                mycomponent:{
                    template:"#mytemplate",
                    data(){		//局部组件的数据
                        return {"name1":"xxxx"}	//返回的数据必须是JSON
                    }
                }
            }
    
    });
    
    

    7.路由router

    文档地址:https://router.vuejs.org/zh/

    7.1.什么是路由

    路由是负责将进入的浏览器请求映射到特定的组件代码中(html)。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射,通过一个路径的url地址,可以唯一找到一个资源。路由不包含在vue中,是一个插件,需要单独下载

    7.2.安装vue-router

    我们可以采用两种方式来安装vue-router,一是使用CDN 的方式直接引入JS库 https://unpkg.com/vue-router/dist/vue-router.js 而是通过Npm安装。

    npm install vue-router
    
    

    然后在页面导入router的js库

    <script type="application/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>
    
    

    7.3.vue-router案例

    模拟导航菜单,点击菜单切换不同的视图 , 需要考虑如下几个因素

    1.定义导航 :一个导航绑定URL

    2.定义组件 :一个URL对应一个组件

    3.映射路由 :建立URL和组件的关系

    4.渲染路由 :组件渲染的位置

    <div id="app">
    	<!-- 使用 router-link 组件来导航. -->
    	<!-- 通过传入 `to` 属性指定链接. -->
    	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    	<!-- 使用app中的路由:匹配到product路由地址,然后在router-view标签中展示这个地址对应的资源 -->
    	<router-link to="/index">首页</router-link>
        <router-link to="/product">公司产品</router-link>
    	<router-link to="/about">关于我们</router-link>
    	<hr />
    	<!-- 路由出口 -->
    	<!-- 路由匹配到的组件将渲染在这里 -->
    	<router-view></router-view>
    </div>
    
    <script>
    
    
    //>>1.定义首页:组件
    var index = Vue.component("index", {
        template : "<h1>首页</h1>"
    });
    //>>2.公司产品:组件
    var product = Vue.component("product", {
        template : "<h1>公司产品</h1>"
    });
    //>>3.关于我们:组件
    var about = Vue.component("about", {
        template : "<h1>关于我们</h1>"
    });
    
    //>>4.创建一个路由:
    var router = new VueRouter({
        routes : [ {
            path : "/",//路由地址
            component : index
            //路由对应的资源
        }, {
            path : "/about",//路由地址
            component : about
            //路由对应的资源
        }, {
            path : "/product",
            component : product
        }, ]
    });
    
    //创建一个vue对象
    var app = new Vue({
        el : "#app",//挂载在app上
        router : router
    //使用路由对象
    });	
    </script>
    
    

    五.VUE的生命周期

    每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。主要方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,Destroyed。还有两个不常用的actived,deactivated。

    注意:这里我们重点掌握两个常用的方法即可:create和mounted

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94elDCBU-1592229882021)(images/image-20200423205426518.png)]

    1.生命周期方法

    1.1.beforeCreate

    在实例初始化之后,在数据观测(data observer)和event/watcher事件配置之前被调用,此时data和$el都没有初始化,全部为undefined。
    可以在此时加一些loading效果,然后在created移除,可以用在进入请求时间较长的页面,给用户提示,提高用户体验。

    1.2.created

    在实例创建完成后立即被调用,在这一步,实例已完成以下配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,然而挂载阶段还没开始,$el属性目前不可见。

    1.3.beforeMount

    在挂载开始之前被调用:相关的render函数首次被调用。此时,data和$el都已经存在,但是DOM为虚拟DOM,仍然没有被加载完。

    1.4.mounted

    el被新创建的vm. e l 所 替 换 , 并 挂 载 到 实 例 上 去 调 用 该 钩 子 。 这 时 候 可 以 执 行 异 步 请 求 , 请 求 数 据 初 始 化 页 面 。 此 时 d a t a 和 el所替换,并挂载到实例上去调用该钩子。这时候可以执行异步请求,请求数据初始化页面。 此时data和 eldatael都已经存在,DOM也已经加载完成,完成挂载。

    1.5.beforeUpdate

    当data中的数据发生改变时,在变化的数据重新渲染视图之前触发。

    1.6.updated

    检测到数据发生变化时,变化的数据重新渲染视图之后触发。

    1.7.beforeDestroy

    实例销毁之前调用,此时实例仍然可用。

    1.8.destroyed

    实例销毁之后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器都被移除,所有的子实例也会被销毁。

    1.9.activated

    keep-alive 组件激活时调用

    1.10.deactivated

    keep-alive 组件停用时调用

    2.create和mounted

    created代表在vue实例创建后;我们可以在Vue中定义一个created函数,代表这个时期的构造函数:

    <div id="app">
          {{hello}}
    </div>
    -------------------------------------------
     var vm = new Vue({
          el:"#app",
          data:{
              hello: '' // hello初始化为空
          },
          created(){
              this.hello = "hello, world! 我出生了!";
          },
      	 mounted(){
              "vue初始化完成,可以在这里发送AJAX请求加载页面需要的相关数据";
          }
      })
    
    

    六.Webpack打包

    1.概述

    1.1.为什么要打包

    • 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。

    • 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。

    • 将代码打包的同时进行混淆,提高代码的安全性。

    1.2.什么是webpack

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wfqR5XVR-1592229882022)(images/image-20200423213604311.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0LmfhSF-1592229882022)(images/4218193775-5caaf14b838a5_articlex.png)]

    如上图,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    2.安装webpack

    2.1.本地安装

     npm install webpack --save-dev	//服务
    	
     npm install webpack-cli --save-dev	//客户端
    
    

    2.2.全局安装

    推荐使用 后面要用

    npm install -g webpack 
    
    npm install -g webpack-cli
    
    

    3.执行打包

    3.1.准备工作

    准备JS : util.js

    export const util = {
        sum(a , b){
            return a + b;
        }
    }
    
    

    main.js

    import {util} from "./util";
    let sum = util.sum(1,2);
    alert(sum);
    
    

    main.html

            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
    </head>
    <!--模块导入-->
    <script type="application/javascript" src="../dist/bundle.js" ></script>
    <body>
    
    </body>
    </html>
    
    

    3.2.执行打包

    把 main.js 及其依赖的js打包成 dist/bundle.js

    webpack ./pages/main.js -o dist/bundle.js
    
    

    4.webpack打包配置

    上面我们每次在打包的时候,都要输入 webpack src/a.js -o dist/bundle.js 这个命令,比较麻烦,webpack提供了一个webpack.config.js可以对打包信息进行统一配置,到时候打包的时候,只需要运行webpack 命令就可以进行打包。

    4.1.创建 webpack.config.js

    //导入路径模块,这个是内置的模块
    var path = require("path");
    
    module.exports = {
        entry: './src/main.js',	//入口js
        output: {	//输出位置
            path: path.resolve(__dirname, './dist'),	//打包后的文件输出路径
            filename: 'bundle.js'	//打包后的js
        }
    }
    

    4.2.执行打包

    运行下面命令,自动根据webpack.config.js配置来打包

    webpack
    

    5.打包css

    webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。loader 通过在 require() 语句中使用 loadername! 前缀来激活,或者通过 webpack 配置中的正则表达式来自动应用 。

    • vue-loader 转换vue组件 *.vue

    • css-loader 加载css文件

    • babel-loader 加载 ES2015+ 代码,然后使用 Babel 转译为 ES5

    如果要打包css需要安装两个loader

    • style-loader : 将模块导出为样式,添加到DOM中 - 使用的时候加载样式
    • css-loader : 解析css,使用import加载,返回css代码 - 带包的时候的加载css

    5.1.安装loader

    npm install style-loader --save-dev
    npm install css-loader --save-dev
    
    

    5.2.编写css文件

    css/main.css

    .color-red{
        color:red;
    }
    
    

    5.3.导入main.css

    修改main.js , 把css导入到main.js中

    //引入css
    require('../css/main.css');
    
    import {util} from "./util";
    let sum = util.sum(1,2);
    //alert(sum);
    
    
    

    5.4.页面导入

    导入main.js,该JS种已经导入了main.css,下面直接使用main.css中的样式

    <!--模块导入-->
    <script type="application/javascript" src="../dist/bundle.js" ></script>
    <body>
    <!--    测试css打包-->
        <div class="color-red">有点红</div>
    
    </body>
    
    

    5.5.css的打包配置

    在webpack.config.js文件引入下面代码

    //导入路径模块,这个是内置的模块
    var path = require("path");
    
    module.exports = {
        entry: './pages/main.js',	//入口js
        output: {	//输出位置
            path: path.resolve(__dirname, './dist'),	//打包后的文件输出路径
            filename: 'bundle.js'	//打包后的js
        },
        module: {
            rules: [
                {
                    test: /\.css$/,     //匹配文件规则
                    use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                    // webpack use的配置,是从右到左进行加载的
                },
            ]
        }
    }
    
    

    5.6.执行打包

    webpack
    
    

    6.webpack服务

    刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件,可以帮我们运行一个web服务,并且提供了热部署功能。

    6.1.安装插件

    npm install webpack-dev-server --save-dev
    
    

    6.2.配置脚本

    在package.json中配置script

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
    }
     
    --inline:自动刷新
    --hot:热加载
    --port:指定端口
    --open:自动在默认浏览器打开
    --host:可以指定服务器的 ip,不指定则为127.0.0.1
    

    6.3.启动

    npm run dev/test
    

    运行可能会出错,兼容问题,需要修改一下版本

    6.4.修改版本

    "devDependencies": {
      "css-loader": "^3.1.0",
      "style-loader": "^0.23.1",
      "webpack": "^3.10.0",
      "webpack-dev-server": "^2.9.7"
    },
    

    然后安装该版本的webpack

    npm install
    

    再启动

    npm run dev
    
    

    访问:http://localhost:8080/

    七.VUE-CLI脚手架

    在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli使用它能快速的构建一个web工程模板。

    官网:https://github.com/vuejs/vue-cli

    1.安装VUE-CLI

    1.1.安装Vue-cli

    搭建静态web工程,安装Vue-cli

    npm install -g vue-cli
    
    

    1.2.创建项目结构

    vue-cli快速创建webpack项

    vue init webpack
    
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hk2S9PdG-1592229882023)(images/image-20200426155334638.png)]

    下面的输入no,然后回车:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NM1N0UH4-1592229882023)(images/image-20200426155445507.png)]

    启动项目

    npm run dev
    

    2.项目结构

    2.1.package.json

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7gkE0nF-1592229882024)(images/image-20200426155917731.png)]

    2.2.webpack.dev.conf.js

    这个js在package.json的scripts中引入,是用来对webpack打包的配置js,其中导入了 webpack.base.conf.js 他是webpack的基础js。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vi13v0E-1592229882024)(images/image-20200426160549365.png)]

    2.3.main.js

    main.js作为程序的主要JS,该js中的配置在整个项目中都适用。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tKALNcxJ-1592229882024)(images/image-20200426160816874.png)]

    main.js如下:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cGtJqxo-1592229882025)(images/image-20200426161100500.png)]

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app', //元素绑定 ,对应了 App.vue中的 <div id="app"/>
      router, //路由,对应了 import router from './router'
      components: { App },  //定义组件 ,对应了 import App from './App' 其实引入了App.vue
      template: '<App/>'  //默认使用的组件,会把这个组件展示到页面上
    })
    
    

    2.4.app.vue

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwShq20t-1592229882025)(images/image-20200426161155004.png)]

    这个页面是程序的主页面,所有的其他子页面都将会挂载到这个下面,router-view是组件渲染的位置。

    2.5.router/index.js

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YOnGKOsT-1592229882026)(images/image-20200426161240580.png)]

    这里导入了 HelloWorld.vue 页面,我们访问 8080 看到的页面就是这个页面。

    2.6.总结一下

    • main.Js :程序的主js
    • app.vue:程序的vue主页面,其他所有的页面都挂载这个主页面之下
    • router/iundex.js :路由,程序的url导航
    展开全文
  • redirect 重定向 在父子嵌套结构中,父级的redirect指向子级children里的path meta 元数据 可以作用判断用户是否已登陆 可以通过meta,展示面包屑
  • vue中radio根据动态绑定checked无效

    千次阅读 2019-09-30 09:12:57
    vue之前,我们想要获取某一组(设置相同的name属性)radio的选中状态是通过name属性获取,判断input的checked是true还是false,但是当列表中有多组(动态获取)就显得很乏力;vue出现后我们可以通过v-model很巧妙...
  • vue

    2017-10-17 15:41:46
    vue实例
  • Vue vue生命周期

    万次阅读 多人点赞 2019-01-07 22:14:50
    + 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! + [生命周期钩子]( https://cn.vuejs.org/v2/api/ #选项-生命周期钩子):就是生命周期事件的别名而已...
  • ❞最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己,小编今天又整理了一波新的Vue实战技巧,这些技巧,不用则已,一用惊人。...
  • hidden隐藏域变化监听 jQuery.fn.val方法来赋值不会触发change事件,但是可以手动触发。 如:$(’#id’).val(111).change();
  • 数组: ”[…array]”> 对象: ”{…obj}”> 或者: ”obj”> 子组件: <i class=fa aria-hidden=true> </span>
  • Vue-vue-router

    2021-09-03 21:01:51
    1. 什么是 vue-router vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目 中组件的切换。 vue-router 的官方文档地址:https://router.vuejs.org/zh/ 2. vue-...
  • vue v-for循环时一定要加key,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错. 使用方法: 1.一般可以使用索引充当key(不涉及节点增删时),不过最好使用数组中的对象...
  • Hidden值赋值跟取值

    千次阅读 2019-04-11 11:42:34
    <input type="hidden" id="measureSuf" /> 赋值: $("#measureSuf").val(measure); 取值: var mesure = $("#measureSuf").val();
  • Vue 使用 vue-echart

    万次阅读 2019-06-18 11:37:47
    npm install vue-echart 2.man.js中导入echart import Vue from 'vue' import App from './App' import router from '../src/router/router' // 导入vue-echarts插件 import ECharts from 'vue-echarts/compon...
  • vue父组件清空子组件填写的

    千次阅读 2020-11-17 14:40:03
    <component ref="XXX" v-show="isShow" @hidden="hidden"></component> 子组件添加ref的属性,然后通过 this.$refs.属性名,获取子组件的DOM的所有元素 this.$refs.XXX
  • Vue全家桶之Vue基础

    千次阅读 多人点赞 2021-05-11 22:11:36
    Vue全家桶之Vue基础 文章目录Vue全家桶之Vue基础1. Vue概述2. Vue的基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤2.3 Vue.js之HelloWorld细节分析3. Vue 模板语法3.1 模板语法概述3.2 指令3.3 双向...
  • vue入门

    2019-11-29 21:12:30
    前端发展史2.mvvm结构3.Vue3.1vue介绍3.2vue特性3.3vue安装3.4使用前3.5第一个vue程序3.6vue生命周期3.7 vue命令 1.前端发展史 (1) html --超文本标记语言 (静态网页) --就是一些标签 css+javascript (2) 动态...
  • vue基础

    2021-03-04 21:11:50
    表单控件的三、组件1.遍历数据2.组件模板代码:四、案例1.显示输入框内容效果图:代码:2.换肤案例效果图:代码:3.增删改查案例效果图:代码:4.tab栏切换效果图:代码:5.封装表格效果图:代码: 一、vue基础 1...
  • vue快速入门

    2021-04-28 22:25:41
    vue
  • 基于vite 搭建的vue3.0项目看上去更优化; 在这里我们都使用vue-cli搭建项目,方便对比。 一、主要内容–初步 项目搭建 脚手架搭建 【vue@2、@3】 项目命令一样,在选择是选择对应预设; vue create hello-vue2 ...
  • 万事开头难,做什么事都要有个起点,后面才能更好的进行下去,因此我选择的起点就是最为直观的登陆页面 /login/index.vue /src/views/login/index 去除那些无关的东西,比如什么 rules 校验啊,默认的账号密码之类...
  • vue 进阶

    2019-10-23 09:03:41
    2.path 对应页面定义访问路径 ,name可以随意取,component需要指定向页面的import名称,hidden 表示显示还是隐藏 import Home from '@/module/home/page/home.vue'; import page_list from '@/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,975
精华内容 3,990
关键字:

hiddenvue值

vue 订阅