Vue笔记
在终端使用命令vue create hello-vue生成的Vue项目hello-vue默认是有.git文件夹的,但是没有指定上传的地址,要进行版本控制需要进行如下关联:在GitHub或者码云上创建同名仓库 hello-vue,名字自便但要和本地创建的vue项目名称保持一致打开vscode终端:git remote add origin https://github.com/Blis...
·
文章目录
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
长度单位
关于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 . refs.refName. refs.refName.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是块级作用域 不可重复声明 不允许在相同作用域内,重复声明同一个变量,不会发生变量提升,这表示在声明它之前,变量是不存在的,这时如果用到它,就会抛出错误
关于生命周期和钩子函数
切换环境变量
- 根目录新建.env文件(默认环境位置)
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
}
}
更多推荐
已为社区贡献14条内容
所有评论(0)