精华内容
下载资源
问答
  • 什么是响应式我踢你一脚,你会喊疼,那你就是响应式的若一个物体能对外界的刺激做出反应,它就是响应式的响应式网页如果我改变窗口的大小,网页内容会做出响应,那就是响应式网页比如前端著名响应式网页Vue 的 data...

    v2-2a37b7a417c54b81e654c0bf4345523f_1440w.jpg?source=172ae18b

    什么是响应式

    我踢你一脚,你会喊疼,那你就是响应式的

    若一个物体能对外界的刺激做出反应,它就是响应式的

    响应式网页

    如果我改变窗口的大小,网页内容会做出响应,那就是响应式网页

    比如前端著名响应式网页

    Vue 的 data是响应式

    const vm=new Vue({data:{n:0}})

    我如果修改vm.n,那么UI中的n就会响应我

    Vue 2通过Object.defineProperty来实现数据响应式

    vue.js的追踪变化,使用Object.defineProperty把这些属性全部转为getter/setter,而受到defineProperty的限制,vue不能检测到对象属性的添加删除,这个Bug是使用Vue.set或vm:$set来解决的。

    理解vue响应式原理前我们必须先知道getter和setter以及Object.defineProperty几个概念

    下面将简单用几个例子理解一个getter和setter以及Object.defineProperty

    先简单理解getter和setter

    getter和setter

    定义的时候直接设置一个getter/setter

    let obj0 = {
      姓: "吴",
      名: "亦凡",
      age: 28
    };
    
    // 需求一,得到姓名
    
    let obj1 = {
      姓: "吴",
      名: "亦凡",
      姓名() {
        return this.姓 + this.名;
      },
      age: 28
    };
    
    console.log("需求一:" + obj1.姓名());
    // 姓名后面的括号能删掉吗?不能,因为它是函数
    // 怎么去掉括号?

    比如上面的例子,我要得到姓名,可以通过console.log("需求一:" + obj1.姓名());获得姓名,如果我要求直接obj1.姓名不加括号也可以获得姓名,怎么做?

    getter

    // 需求二,姓名不要括号也能得出值
    
    let obj2 = {
      姓: "吴",      //原始值
      名: "亦凡",
      get 姓名() {
        return this.姓 + this.名;
      },
      age: 28
    };
    
    console.log("需求二:" + obj2.姓名);
    

    总结:getter 就是这样用的。不加括号的函数,仅此而已。

    setter

    // 需求三:姓名可以被写
    
    let obj3 = {
      姓: "吴",
      名: "亦凡",
      get 姓名() {
        return this.姓 + this.名;
      },
      set 姓名(xxx){        
        this.姓 = xxx[0]
        this.名 = xxx.slice(1)
      },
      age: 18
    };
    
    obj3.姓名 = '李嘉恒'        //setter用 xxx触发set函数
    
    console.log(`需求三:姓 ${obj3.姓},名 ${obj3.名}`)

    总结:setter 就是这样用的。用 = xxx 触发 set 函数

    控制台出现的{n:(...)} 并不存在一个n,而是存在一个getter n和一个setter n来模拟对n的读写操作。

    为什么要把n变为getter n和 setter n 呢?

    我们再来理解Object.definePropery()

    Object.defineProperty

    定义完一个对象后(obj3),你想在它身上添加新的get,set的时候通Object.defineProperty放xxx的值

    var_xxx  = 0    //先声明再用 否则会陷入死循环
                    //_xxx 用来偷偷存储 n 的值
    
    Object.defineProperty(data3, 'xxx', {         //obj3是对象,xxx是要监听的
      get(){
        return _xxx
      },
      set(value){
        _xxx = value       //value为所传的值
      }
    })
    

    Object.defineProperty可以给对象添加属性value,可以给对象添加getter/setter, getter/setter用于对属性的读写进行监控。

    代理和监听

    代理(设计模式)

    对myData对象的属性读写,会全权由另一个对象vm负责

    那么vm就是myData的代理(类比房东和中介)

    比如myData.n不用,偏要用vm.n来操作哦myData.n,这样用户不能直接的访问到原始数据,对数据是一个保护作用,比如你去通过房屋中介租房子,你并不能直接接触到房东。中介和房东之间就是一个全权代理的关系。

    let data0 = {
      n: 0
    }
    
    // 需求一:用 Object.defineProperty 定义 n
    let data1 = {}
    
    Object.defineProperty(data1, 'n', {
      value: 0
    })
    
    console.log(`需求一:${data1.n}`)
    
    // 需求二:n 不能小于 0
    // 即 data2.n = -1 应该无效,但 data2.n = 1 有效
    
    let data2 = {}
    
    data2._n = 0 // _n 用来偷偷存储 n 的值
    
    Object.defineProperty(data2, 'n', {
      get(){
        return this._n
      },
      set(value){
        if(value < 0) return
        this._n = value
      }
    })
    
    console.log(`需求二:${data2.n}`)
    data2.n = -1
    console.log(`需求二:${data2.n} 设置为 -1 失败`)
    data2.n = 1
    console.log(`需求二:${data2.n} 设置为 1 成功`)
    
    // 抬杠:那如果对方直接使用 data2._n 可以篡改我的代码?如何做到不让别人访问我的_n?使用代理
    
    // 需求三:使用代理
    
    let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象,无法访问
    
    function proxy({data}/* 解构赋值,别TM老问 */){
      const obj = {}
      // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
      Object.defineProperty(obj, 'n', { 
        get(){
          return data.n
        },
        set(value){
          if(value<0)return
          data.n = value
        }
      })
      return obj // obj 就是代理
    }
    
    // data3 就是 obj
    console.log(`需求三:${data3.n}`)
    data3.n = -1
    console.log(`需求三:${data3.n},设置为 -1 失败`)
    data3.n = 1
    console.log(`需求三:${data3.n},设置为 1 成功`)
    
    // 需求四
    
    let myData = {n:0}
    let data4 = proxy({ data:myData }) // 括号里是匿名对象,无法访问
    
    // data3 就是 obj
    console.log(`杠精:${data4.n}`)
    myData.n = -1
    console.log(`杠精:${data4.n},设置为 -1 失败了吗!?`)
    
    // 我现在改 myData,还能改
    

    监听

    就算用户擅自修改 myData,也要拦截他,使用监听

    // 需求五:就算用户擅自修改 myData,也要拦截他
    
    let myData5 = {n:0}
    let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象,无法访问
    
    function proxy2({data}/* 解构赋值 */){
      // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
      let value = data.n             //通过value记录原始的值
      Object.defineProperty(data, 'n', {
        get(){
          return value
        },
        set(newValue){
          if(newValue<0)return
          value = newValue
        }
      })
      // 就加了上面几句,这几句话会监听 data
    
      const obj = {}
      Object.defineProperty(obj, 'n', {
        get(){
          return data.n
        },
        set(value){
          if(value<0)return//这句话多余了
          data.n = value
        }
      })
      
      return obj // obj 就是代理
    }
    
    // data3 就是 obj
    console.log(`需求五:${data5.n}`)
    myData5.n = -1
    console.log(`需求五:${data5.n},设置为 -1 失败了`)
    myData5.n = 1
    console.log(`需求五:${data5.n},设置为 1 成功了`)
    
    
    // 这代码看着眼熟吗?
    // let data5 = proxy2({ data:myData5 }) 
    // let vm = new Vue({data: myData})
    
    // 现在我们可以说说 new Vue 做了什么了

    Vue对data做了什么?

    vm=new Vue({data:myData})

    1.会让vm成为myData的代理(proxy)

    2.会让myData的所有属性进行监控

    监控的目的是为了防止myData的属性发生了变化 vm却不知道(知道了才能刷新页面,达到响应式,就可以调用render(data)),总之,就是你对data的任何修改我Vue必须都知道

    Object.defineProperty的Bug问题

    Object.defineProperty(obj,'n',{...})

    必须要有一个'n', 才能监听&代理 obj.n,如果前端开发者比较水,没有给n怎么办?

    Vue会给出一个警告,并且Vue只会检查第一层属性

    只会检查第一层属性是什么意思呢?看下面例子

    //一般没人这么写,我这样写是为了引用完整版 Vue
    import Vue from "vue/dist/vue.js";
    
    Vue.config.productionTip = false;
    
    new Vue({
      data: {
        obj: {
          a: 0 // obj.a 会被 Vue 监听 & 代理
        }
      },
      template: `
        <div>
          {{obj.b}}
          <button @click="setB">set b</button>
        </div>
      `,
      methods: {
        setB() {
          this.obj.b = 1; //请问,页面中会显示 1 吗?
        }
      }
    }).$mount("#app");
    

    请问上面例子中页面中会显示 1 吗?

    答案是:不会

    为什么:因为Vue没法监听一开始不存在的obj.b

    解决办法

    1.那我把key都声明好,后面就不用再加属性

    2.使用Vue.set或者this.$set

    Vue.set 和 this.$set

    作用

    新增key

    自动创建代理和监听(如果没有创建过)

    触法UI更新(但并不会立刻更新)

    举例

    this.$set(this.object,'m',100)

    如果data中有数组怎么办

    你没办法提前声明所有key

    数组长度可以一直增加,下标就是key,你没有办法提前把数组胡key都声明出来 ,Vue

    也不能检测新增的下标,难道每次改数组都要用Vue.set /this.$set?

    对此尤雨溪纂改了数组的API,调用会更新UI

    对象中新增的key

    Vue没有办法事先监听和代理

    要使用set来新增 key,创建监听和代理,更新UI.

    最好提前把属性都写出来,不要新增key

    但数组做不到 不新增key

    数组中新增key

    也可以用 set 来新增key,更新UI,不过7个API更方便对数组增删,这7个API会自动处理监听和代理,并更新UI,结论:数组新增key最好通过API.

    总结

    Object.defineProperty

    可以给对象添加属性value

    可以给对象添加getter/setter

    getter/setter用于对属性的读写进行监控

    啥是代理(设计模式)

    对myData对象的属性读写,会全权由另一个对象vm负责

    那么vm就是myData的代理(类比房东和中介)

    比如myData.n不用,偏要用vm.n来操作myData.n

    vm=new Vue({data:myData})

    会让vm成为myData的代理(proxy)

    会对myData的所有属性进行监控

    为什么要监控?为了防止myData的属性变了,vm不知道

    vm知道了又如何?知道属性变了就可以调用render(data)

    UI=render(data)

    如果data 有多个属性n,m,k那么就会有get n/ get m/ get k等

    Vue的Date的Bug

    1.如果有多个key,需要提前声明

    2.Vue.set(){} / this.$set(){}可以添加data数据

    响应式原理

    vm=new Vue({data:myData})

    把options.data传给vue之后,data会被Vue监听,这个data会被篡改,本来的n会变成getter n,setter n

    会被Vue实例代理,比如说new Vue 得到一个vm,这个vm就是data的代理,每次我们对data的读写,都会被Vue监控,Vue只要发现对它进行了修改就会更新UI

    Vue目前通过Object.defineProperty来实现数据响应式。

    展开全文
  • Vue监听屏幕宽度实现响应式

    千次阅读 2019-09-10 02:17:30
    今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页,这就意味着要做响应式,也就是要监听网页的宽度。 用Vue-cli搭建好项目后 在app.vue中写一个方法来监听屏幕宽度 setMobile(){ addEventListener...

    今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页,这就意味着要做响应式,也就是要监听网页的宽度。

    用Vue-cli搭建好项目后

    在app.vue中写一个方法来监听屏幕宽度

    setMobile(){
       addEventListener('resize',()=>{
          //写一个监听要执行的函数
       })
    }

    然后使用

    document.documentElement.clientWidth || document.body.clientHeight;

    来获取当前屏幕的宽度。

    因为这个监听所有页面都能适用,所有引入了Vuex,关于Vuex的介绍不多赘述,他能在非父子,兄弟节点中传递数据。

    简历store.js,导入Vuex,声明一个数据

    state:{
            isMobile:false//确定是否为手机宽度
        },

    最后可以在页面中使用this.$store.state.isMobile方法来获取是否为手机页面,使用方法例如:要在手机端隐藏某些组件

    <nav
         class="nav-container"
            v-show="this.isShow&&this.$store.state.isMobile"
         >
        <my-nav/>
    </nav>
    //this.isShow是这个组件是否显示的一个数据
    //this.$store.state.isMobile是获取的屏幕是否为手机页面的数据
    //当他为true时这个组件就能显示
    //当他为false时这个组件就能显示

    完整代码

    APP.vue

    getScreen(){
       let clientWidth =document.documentElement.clientWidth || document.body.clientHeight;
    
       if(clientWidth < 768){//当屏幕小于768时,设置Vuex里的数据为true
          this.$store.commit("SET_MOBLIE",true)
       }else{//反之,设置Vuex里的数据为false
          this.$store.commit("SET_MOBLIE",false)
       }
    },
    setMobile(){
        //监听屏幕
        addEventListener('resize',()=>{
          this.getScreen();
        })
    }

    store.js

    export default new Vuex.Store({
        state:{
            isMobile:false
        },
        mutations:{
            // 判断是不是手机端
            SET_MOBLIE(state,isMobile){
                state.isMobile = isMobile;
            }
        }
    })

     

    展开全文
  • 1、NavBar.vue上代码: 里面ul>标签放置一个插槽,用来放置多个li>标签。为什么要放插槽呢??因为在一些地方我们可能还会用到像这样模板,只是那时的li>标签内容不一样了。所以插槽就很好解决了,下次使用...

    一、先上结果图:
    在这里插入图片描述
    当屏幕缩小时的界面:
    在这里插入图片描述
    在这里插入图片描述

    二、首先我们先创建一些用到的组件,如图
    在这里插入图片描述

    二、顶部组件的相关操作(了解插槽)

    1、NavBar.vue上代码:
    里面ul>标签放置一个插槽,用来放置多个li>标签。为什么要放插槽呢??因为在一些地方我们可能还会用到像这样模板,只是那时的li>标签内容不一样了。所以插槽就很好解决了,下次使用只需要改li>标签的内容即可

    <template>
      <nav>
        <div class="logo">
          <slot name="logo-icon"><img src="../../assets/logo.jpg"></slot>
          <slot name="logo-title">巧克力电影</slot>
        </div>
        <div class="search">
          <el-input
            placeholder="请输入内容"
            size="medium"
            class="input_search">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <ul class="nav-menu">
          <slot></slot>
        </ul>
        <div class="burger" @click="handleBurger()">
          <div class="top-line"></div>
          <div class="middle-line"></div>
          <div class="bottom-line"></div>
        </div>
      </nav>
    </template>
    
    <script>
        export default {
            name: "NavBar",
            methods:{
                handleBurger(){
                    const burger=document.querySelector(".burger");
                    const navMenu=document.querySelector(".nav-menu");
                    burger.addEventListener("click",function(){
                        burger.classList.toggle("active");
                        navMenu.classList.toggle("open");
                    })
                }
            }
        }
    </script>
    
    
    
    

    2、NavBar.vue样式
    响应式页面布局
    @media screen and (max-width: 768px){
    }

    当网页屏幕小于max-width,样式发生的变化

    <style scoped>
      nav{
        top:0;
        left:0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 5vw;
        height: 70px;
        background-color: rgba(65,81,101,0.9);
      }
      .logo{
        font-size: 28px;
        font-weight: 600;
        background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        flex: 1;
    
      }
      .logo img{
        width:30px;
        height:30px;
        border-radius: 5px;
        flex: 1;
        vertical-align: center;
      }
      .nav-menu{
        flex:1;
        display: flex;
        justify-content: space-around;
        max-width: 500px;
      }
      .burger{
        margin-left: 10px;
        display: none;
      }
      .burger div{
        width:30px;
        height:2px;
        background-color:#dadbdd;
        margin: 6px;
      }
      @media screen and (max-width: 768px){
        .nav-menu{
          position: absolute;
          top:70px;
          right:0;
          bottom:0;
          width:40vw;
          height:540px;
          background-color: rgba(65,81,101,0.7);
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
    
          transform: translateX(100%);
          transition:0.3s ease-in-out;
        }
        .nav-menu.open{
          transform: translateX(0);
        }
        .burger{
          display: block;
        }
    
        .burger.active div{
          transition: 0.3s ease-in-out 0.2s;
        }
        .burger.active .top-line{
          transform: rotate(90deg) translateX(8px) translateY(-14px);
        }
        .burger.active .bottom-line{
          transform: rotate(90deg) translateX(-8px) translateY(-6px);
        }
        .burger.active .middle-line{
          transform: rotate(90deg) translateY(2px);
        }
        @keyframes slideIn {
          from{
            transform: translateX(20px);
            opacity: 0;
          }
          to{
            transform: translateX(0);
            opacity: 1;
          }
        }
      }
    </style>
    

    TabBarItem.vue页面代码,用来设置li>标签里面放置的内容
    <slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽,,也可以设置默认值

    <template>
      <!--子组件通过props获取父组件传来的值-->
        <div @click="itemClick">
          <li>
          <slot name="li-icon"></slot>//给slot设置name,以便别的组件使用指定的插槽,,也可以设置默认值
          <slot name="li-title"></slot>
          </li>
        </div>
    </template>
    
    <script>
        export default {
            name: "TabBarItem",
            data(){
              return{
              }
            },
            props:{
                path:String
            },
            methods:{
                itemClick(){
                    console.log("toPath")
                    console.log(this.path)
                    this.$router.replace(this.path)
                },
            }
        }
    </script>
    
    <style scoped>
      li{
        list-style: none;
        color: #dadbdd;
        font-weight: 600;
      }
      li:hover{
        cursor: pointer;
      }
      @media screen and (max-width: 768px) {
        li{
          margin:3vh;
          transform: translateX(20px);
          transition: 1s slideIn ease-in;
        }
      }
    </style>
    
    

    3、MainTabBar.vue
    给li>标签赋值
    <span slot="li-title">首页</span>//通过 slot="li-title"将内容放置到指定位置, 这里我没有设置 slot="li-title",根据需要自己设置
    MainTabBar是父组件,它设置了path的值,子组件通过props获取父组件传给它的path值

    <template>
      <!--父组件   path就是传给子组件的值-->
        <div>
            <nav-bar>
            <tab-bar-item path="/home">
              <span slot="li-title">首页</span>
            </tab-bar-item>
            <tab-bar-item path="/recommend">
              <span slot="li-title">热映中</span>
            </tab-bar-item>
            <tab-bar-item>
              <span slot="li-title">会员中心</span>
            </tab-bar-item>
            <tab-bar-item>
              <span slot="li-title">消息中心</span>
            </tab-bar-item>
            <tab-bar-item>
              <span slot="li-title">关于我们</span>
            </tab-bar-item>
            </nav-bar>
        </div>
    </template>
    
    <script>
      import TabBar from "./TabBar";
      import NavBar from "./NavBar";
      import TabBarItem from "./TabBarItem";
    
        export default {
            name: "MainTabBar",
            components:{TabBarItem,TabBar,NavBar},
            data(){
                return{
    
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    
    

    4、在App.vue设置公共组件MainTabBar
    注意:导航栏/公共组件在部分页面显示,其他页面不显示,比如登录界面不需要公共组件
    keepAlive为true显示公共组件,keepAlive在router index.js 设置

    在这里插入图片描述

    子组件和父组件传值的方式:

    请看上一篇

    展开全文
  • vue-cli3 + bootstrap3实现响应式布局

    千次阅读 2019-03-02 10:34:16
    作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装: npm install lib-flexible 引入:入口文件main.js中: import &amp;quot;lib-flexible/...

    1、用px2rem配合lib-flexible,让网页适配。

    lib-flexible
    作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
    安装:

    npm install lib-flexible
    

    引入:入口文件main.js中:

    import "lib-flexible/flexible.js"
    

    2、手写一个js小工具,省略rem的计算,加快开发速度。
    在src目录下增加一个utils目录,在里面新建一个js文件,写入以下内容:

    // 基准大小
    const baseSize = 32
    // 设置 rem 函数
    function setRem () {
        // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 750
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
        setRem()
    }
    
    

    在main.js中引入改js文件:

    import "./utils/rem"
    

    然后就可以直接用px写页面啦,而不用去计算rem的值,是不是很舒服呢。

    3、使用VW。了解下vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一

    安装:

    npm i postcss-px-to-viewport -save -dev
    

    在package.json中配置如下:

    "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-pxtorem": {
            "rootValue": 32,
            "propList": ["*"]
          }
        },
        "plugins": {
          "autoprefixer": {},
          "postcss-px-to-viewport": {
            "viewportWidth": 750,
            "minPixelValue": 1
          }
        }
      },
    

    4、利用bootstrap实现响应式图片

    在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
    对于图片的大小限制一定要在图片的父级元素进行限制。

    5、利用bootstrap的栅格系统,下面列一下栅格系统的参数:

    超小屏手机 (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
    类前缀 .col-xs .col-sm .col-md .col-lg
    列数 12 12 12 12
    .container最大宽度 None(自动) 750px 970px 1170px

    举个移动设备和桌面的例子:
    在这里插入图片描述

    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>
    

    还有更多对响应式的支持,就不一一列举了。

    展开全文
  • 需求: 自定义响应式网页,需要针对不同的屏幕尺寸做不同的处理。...1,新建matchMedia文件夹,里面新建index.vue文件,写好如下代码,建立一个自定义响应式网页组件: &lt;template&gt...
  • 博主之前出去耍了几天,回来为了复习巩固前一段时间所学的ps切图以及vue的知识,所以去网上找了几个psd文件,用vue实现了一个简单的静态单页网页界面。 ...
  • 寒假结束了,趁着寒假,自己玩了一下...项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页响应式等。 先来看看效果: pc端 移动端: 项目结构 src |---common // ...
  • 寒假结束了,趁着寒假,自己玩了一下...项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页响应式等。 项目结构 src |---common // 公用的文件 |---css |---base.scss ...
  • Vue

    2020-07-28 19:02:13
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 2.Vue.js到底是什么? Vue.js就是一个用于搭建类似于...
  • vue

    2020-09-24 20:45:52
    1.什么是vue: 是第三方开发的基于MVVM设计模式的渐进式的纯前端js框架 ...vue框架:第三方开发的基于响应式编程方式的程序(优点:从根本上简化了开发步骤,缺点过于精简). 3.MVVM设计模式:将前端内容划分为3部分
  • Vue环境搭建

    千次阅读 2018-03-20 11:15:25
    Vue.js是一个构架数据驱动的网页界面的渐进框架,它的目标是通过尽可能简单的API实现响应的数据绑定和组合视图组件。它和Node、Angular并列为前端的三大框架。 环境搭建 在Mac中搭建Vue的开发环境会用到如下的...
  • 效果图:自适应:我感觉自适应分为两种:一 ,通过媒体查询实现响应式(@media)优点 :适用于小型网页,用户交互较少的项目,代码用量较少;缺点 :在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个...
  • vue面试题

    2020-10-19 16:06:13
    响应式布局主要是可以实现自适应不同网页的分辨率,让客户有更好的体验。 1、rem布局 2、百分比布局 3、vw布局 4、媒体查询 media (不同的分辨率设置不同的css样式) 5、弹性盒子布局 二、rem响应式布局的...
  • 前端Vue的理论

    2018-01-26 10:12:00
    1、什么是Vue.jsVue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层Vue.js的...3、Vue.js为什么能让基于网页的前端应用程序开发起来这么方便因为Vue.js有声明式,响应式的数据绑定,与组件化的开发 4...
  • vue的一些零散知识 大体目录如下 实例创建 属性绑定 条件渲染 列表渲染 事件触发 class绑定 ...Vue响应式的,原例改变 后面跟着变 二.VUE属性绑定 比如 data我放了product的text和一个image和link,在htm
  • 1、var box=document.getElementById("box"); 2、box.scrollTop=box.scrollHeight; 但是公司项目却是vue项目,所以这样写不生效,在...Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 D
  • Vue开发环境配置

    2018-12-30 17:43:43
    Vue.js是一个构建数据驱动的web界面的渐进框架,其通过尽可能简单的API实现响应的数据绑定和组合的视图组件。与传统的Angular.js和React框架相比,Vue.js不仅具有简单易学和上手快的特点,并且可以通过组件的特性...
  • 只关注视图层,采用自底向上增量开发的设计,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 1.1 渐进 1.如果你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分嵌入其中,带来更加丰富...
  • Vue基本语法篇(一)

    2020-08-06 17:01:11
    它的目标是通过尽可能的简单API实现响应的数据绑定和组合的视图组件; 二、Vue基本语法 (注意Vue每次写完语法,都要保存网页才可以加载出来快捷键为Ctrl+s) 1、数据绑定 第一种数据绑定为一组花括号{{}},但是...
  • Web前端人员如何进阶?怎么快速掌握Vue框架?Vue是目前企业常用的技术之一,是一个用于构建Web用户界面的...在基础情况下,Vue网页和JavaScript保持同步,实现这一目标的特性是响应式数据及指令和插值等模板
  • 一、vue是什么?  相关网页: https://vuejs.bootcss.com/v2/guide/ 及菜鸟教程 https://www.runoob.com/vue2/vue-tutorial.html ...它的目标是通过尽可能简单的API实现响应的数据绑定和组合的...
  • Vue.js学习总结(一.)

    2019-09-24 07:15:02
    Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 2、单页应用程序(SPA) 单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用。 3、Vue.js为什么能让基于网页的前端应用...
  • 官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 官方文档:Vue.js 文章目录功能需求结果展示源代码文件目录index.html 功能需求 实现商品页面 (基于...
  • 初试Vue.js+Require.js

    千次阅读 2019-06-26 11:20:56
    而Rquire.js 则是实现js文件的异步加载,避免网页失去响应。管理模块之间的依赖性,便于代码的编写和维护。 用一个简单的程序来同时应用这两个框架 下面是HTML 代码: test.html <html> <head> ...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

vue实现响应式网页

vue 订阅