Vue笔记

在终端使用命令vue create hello-vue生成的Vue项目hello-vue默认是有.git文件夹的，但是没有指定上传的地址，要进行版本控制需要进行如下关联：在GitHub或者码云上创建同名仓库 hello-vue,名字自便但要和本地创建的vue项目名称保持一致打开vscode终端：git remote add origin https://github.com/Blis...

BY-91

5269人浏览 · 2019-07-12 15:50:04

BY-91 · 2019-07-12 15:50:04 发布

文章目录

vue安装

vue安装步骤

通过vscode将Vue新建项目关联并上传GitHub

在终端使用命令vue create hello-vue生成的Vue项目hello-vue默认是有.git文件夹的，但是没有指定上传的地址，要进行版本控制需要进行如下关联：

在GitHub或者码云上创建同名仓库 hello-vue,名字自便但要和本地创建的vue项目名称保持一致
打开vscode终端：

git remote add origin https://github.com/BlissYang91/hello-vue.git

将当前项目文件追踪到远端GitHub上的仓库中
3. 将本地分支master关联并推送到远端

 git push -u origin master

长度单位

关于px,rem,em ,vm 的对比

Flex 布局教程

关于style

预处理器

安装node-sass和sass-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev

使用cnpm安装node-sass和sass-loader

打开webpack.base.config.js, 在module里的rules中加上

 {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  },

在vue文件中的style使用scss,则在 style处声明:

<style rel="stylesheet/scss" lang="scss"></style>

保证当前style只对当前组件有效，避免组件间样式相互影响,加上scoped

<style rel="stylesheet/scss" lang="scss" scoped>
 ...
</style>

关于ref 和 refs

在父组件中调用子组件的方法或属性

通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然后就可以随意调用子组件的方法和属性
为子组件或想要操作的DOM标签添加ref属性，然后通过this. $r e f s . r e f N a m e .$ el或者this.$refs.refName来获取DOM
自定义组件使用ref属性，通过ref值可获取到该自定义组件
普通HTML标签使用ref属性，通过ref值获取到的是该标签对应的DOM

ref 作用于组件

<div id="app">
    <navbar ref="navbar"></navbar>
    <pagefooter ref="pagefooter"></pagefooter>
</div>
Vue.component('navbar',{
    template:'#navbar',
    data:function () {
        return {
            navs:[]
        }
    }
});

Vue.component('pagefooter',{
    template:'#pagefooter',
    data:function () {
        return {
            footer:''
        }
    }
});
new Vue({
    el:'#app',
    mounted:function () {
        //ready,
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
        console.log(this.$refs.navbar.navs);
        console.log(this.$refs.pagefooter.footer);
    }
})

通过ref和refs，父组件可以轻松获取子组件的信息

ref作用于Html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="reference">{{name}}</p>
    </div>

    <script>
        var vm = new Vue({
           data:{
           name:'bliss'
           }
        }).$mount("#app");
        vm.name = 'Tom';
        console.log('赋值无效，原值输出bliss: ', vm.$refs.reference.textContent);
          // Vue中DOM更新是异步的，在修改数据之后立即使用这个方法，获取更新后的 DOM.
        vm.$nextTick(function(){
            console.log('赋值有效，赋值输出bliss: ', vm.$refs.reference.textContent);
        })
    </script>
</body>
</html>

关于list-style

[列表样式]https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type)

关于let和var,const

var 是函数级作用域
const声明一个只读的常量,且声明后，常量的值是不能改变,不能再次赋值，声明的常量不提升，只能在声明的位置后面使用，不可重复声明，只保证变量名指向的地址是不变的，并不能保证它地址的数据是不变
let是块级作用域不可重复声明不允许在相同作用域内，重复声明同一个变量，不会发生变量提升,这表示在声明它之前，变量是不存在的，这时如果用到它，就会抛出错误

关于生命周期和钩子函数

API Vue

切换环境变量

VUE_APP_URL=http://api.com

根目录新建.env.development文件（开发环境）

VUE_APP_URL=http://dev.api.com

根目录新建.env.production文件（生产环境）

VUE_APP_URL=http://api.com

vue文件中使用

<template>
  <div class="home">
   
    <p>{{url}}</p>
   
  </div>
</template>

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data(){
    return {
      url:process.env.VUE_APP_URL
    }
  }
}
</script>

运行单个vue文件

vue serve Hello.vue
npm install -g @vue/cli-service-global

关于跨域配置

根目录下新建vue.config.js

const goods = require('./data/goods.json');
const ratings = require('./data/ratings.json');
const seller = require('./data/seller.json');
module.exports = {
    baseUrl:'/',//跟路径
    outputDir:'dist',//构建输出
    assetsDir:'assets',//静态资源目录（js,css,img,fonts）
    lintOnSave:false,//是否开启eslint保存检测 true false error
    devServer:{
        open:true,//运行后自动打开浏览器页面
        host:'localhost',
        port:8081,
        https:false,
        hotOnly:false,
        proxy:{
            // 配置跨域
            '/api':{
                target:'http//localhost:8080/api/',
                ws:true,
                changeOrigin:true,
                pathRewrite:{
                    '^api':''
                }
            }
        },
        before(app){
            // 要访问地址： http://localhost:8080/api/goods
            app.get("/api/goods",(req,res) => {
                res.json(goods);
            });
            app.get("/api/ratings",(req,res) => {
                res.json(ratings);
            });
            app.get("/api/seller",(req,res) => {
                res.json(seller);
            })

        }
    }
}

vue 弹出全屏遮罩层

 <div v-show="dialog" class='popContainer' @click="hideDialog">
            <img  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" >
        </div>

.popContainer{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.3);
      > img{
          width: 100%;
          height: 100%;
          object-fit: contain
  }
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

BY-91

@ytfunnysite

已为社区贡献14条内容