- 碰到父组件的数据通过props传递给子组件,结果子组件没有接收到 已经解决
// 子组件监听 watch: { getSelect(obj) { // console.log(obj) this.$emit('select', obj) }, // 监听数据变化 schedule(val){ this.parentSchedule = val; }, // 将监听到的数据变化,传到父组件 parentSchedule(val) { this.$emit('changeSchedule', val); } }, // 父组件 // 获取可预约日期时间 _getModelVisitorTime(){ api.getModelOrder({ model_id:this.$route.params.id, }).then(res=>{ var obj = {} var data = res.data for(var i in data){ var dateArr = data[i].days.split(' ')[0] var times = data[i].times.split('#') obj[dateArr] = times; } // this.$set(this.schedule,obj) this.schedule = obj // console.log(this.schedule) // console.log("getMOdelVisitor"); // console.log(this.$refs.timeSelect.getTimeList(obj)) }) }, // changeSchedule(val){ this.schedule = val; },
- 今天解决了游客选择数据提交预约成功
// 将字符串转换成datetime格式 _getDateTime(dateTimeStr){ var date = new Date(dateTimeStr).getDate() var month = new Date(dateTimeStr).getMonth()+1 var Year = new Date(dateTimeStr).getFullYear() var datetime = Year + '-' + month +'-' + date + ' ' + '00:00:00.000000' return datetime },
- 今天处理好了schecle数据的处理
// 获取可预约日期时间 _getModelVisitorTime(){ var that = this; api.getModelOrder({ model_id:this.$route.params.id, }).then(res=>{ console.log(res) var obj = {} var data = res.data for(var i in data){ var dateArr = data[i].days.split(' ')[0] var times = data[i].times.split('#') obj[dateArr] = times; } this.schedule = obj console.log(this.schedule) console.log("getMOdelVisitor"); console.log(this.$refs.timeSelect.getTimeList(obj)) }) },
git使用
-
为什么git每次git push 的时候要重复的输入用户名
[winUpdater] recentlySeenVersion = 2.18.0.windows.1 [filter "lfs"] clean = git-lfs clean -- %f smudge = git-lfs smudge -- %f process = git-lfs filter-process required = true [user] email = [email protected] name = kennana //.gitconfig 添加一下配置 [credential] helper = store
-
查询状态 git status
-
添加到本地仓库 git add . 添加所有文件,但是这样有点粗暴,我们修改了那个文件就可以 git add src/api/api.js
-
然后就是添加注释,你最近解决了什么问题 git commit -m"解决了问题的注释"
-
更新到码云,github上面去,git push
-
更新到本地,就可以是 git pull
最近在自学vue,照着网上例子写了一个父子组件的双向绑定,只实现了单向绑定。父组件的数据不能随子组件变化,只能是子组件数据随父组件变化;在官网看了文档一时还是无法理解其思路。
请各位前辈帮忙看看是哪里出的问题,谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>
<body>
<div id="app">
<div>
<span>父:{{value}}</span>
<input type="text" v-model='value' v-on:click="c_lick">
</div>
<my-com v-model="value"></my-com>
</div>
<template id="template1">
<div>
<span>子:{{childvalue}}</span>
<input type="text" v-model='childvalue' v-on:click="f_click">
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
c_lick() {
//this.value--;
}
},
components: {
'my-com': {
template: '#template1',
props: ['value'],
data: function () {
return {
childvalue: this.value
}
},
methods: {
f_click() {
//this.currentvalue++;
this.$emit('input', this.childvalue);
}
},
watch: {
value(val) {
this.childvalue = val;
}
}
}
}
})
</script>
</body>
</html>
vue双向绑定,首先来说要搞懂单向传递的原理,逐渐深入。父传子用props,子传父用
emit(‘属性名’,传的值)来传给父级,而父级需要用一个v-on来接收这个值。
下述为双向传递,我自己写了一篇笔记,分享给你,对你学习vue很有帮助,好好研读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
<input type="button" value="change" @click="change">
</div>
</body>
<script type="text/javascript">
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//①创建props属性result的副本--myResult
}
},
watch: {
/* 此处是重点 */
result(val) {
this.myResult = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
},
myResult(val){
this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
// 外部触发方法
change() {
this.result = !this.result;
},
// 接收
onResultChange(val){
this.result=val;//④外层调用组件方注册变更方法,将组件内的数据变更,同步到组件外的数据状态中
}
}
});
</script>
</html>
ubantu14.0.4 部署laravel5.7 博客系统
- 安装php7.2
配置环境前下好language-pack-en-base这个包,解决不同语言之间可能发生的冲突,-y参数的意思是直接安装无需确认 sudo apt-get update sudo apt-get install -y language-pack-en-base 安装完成后运行locale-gen en_US.UTF-8 再在服务器上安装Git sudo apt-get install git sudo apt-get install software-properties-common python-software-properties sudo add-apt-repository ppa:ondrej/php && sudo apt-get update sudo apt-get -y install php7.2 # 如果之前有其他版本PHP,在这边禁用掉 sudo a2dismod php5 sudo a2enmod php7.2 # 安装常用扩展 sudo -y apt-get install php7.2-fpm php7.2-mysql php7.2-curl php7.2-json php7.2-mbstring php7.2-xml php7.2-intl # 安装其他扩展(按需安装) sudo apt-get install php7.2-gd sudo apt-get install php7.2-soap sudo apt-get install php7.2-gmp sudo apt-get install php7.2-odbc sudo apt-get install php7.2-pspell sudo apt-get install php7.2-bcmath sudo apt-get install php7.2-enchant sudo apt-get install php7.2-imap sudo apt-get install php7.2-ldap sudo apt-get install php7.2-opcache sudo apt-get install php7.2-readline sudo apt-get install php7.2-sqlite3 sudo apt-get install php7.2-xmlrpc sudo apt-get install php7.2-bz2 sudo apt-get install php7.2-interbase sudo apt-get install php7.2-pgsql sudo apt-get install php7.2-recode sudo apt-get install php7.2-sybase sudo apt-get install php7.2-xsl sudo apt-get install php7.2-cgi sudo apt-get install php7.2-dba sudo apt-get install php7.2-phpdbg sudo apt-get install php7.2-snmp sudo apt-get install php7.2-tidy sudo apt-get install php7.2-zip
成功后运行php -v查看版本,应显示类似信息
PHP 7.2.12-1+ubuntu14.04.1+deb.sury.org+1 (cli) (built: Nov 12 2018 10:58:25) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.12-1+ubuntu14.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
安装mysql
sudo apt-get install mysql-server mysql-client过程中输入密码,确定后安装完成。
mysql -u root -p再输入密码测试,能成功登陆即安装完成。exit退出mysql
因为上线的应用为laravel 5.5版本开发的,为了之后的兼容性问题,ubuntu14.04直接安装的mysql不是较新版本,因此要升级一下mysql:
cd ~
wget https://dev.mysql.com/get/mysql-apt-config_0.8.1-1_all.deb
sudo dpkg -i mysql-apt-config_0.8.1-1_all.deb
解压安装包后会弹出框,选择好mysql 5.7版本后选择ok 然后继续
然后,更新包索引:sudo apt-get update
然后,安装MySQL-server:sudo apt-get install mysql-server
然后,升级全部的Mysql数据库:sudo mysql_upgrade -u root -p
最后,重启mysql server:sudo service mysql restart
登陆一下mysql看看是否已经升级完毕,成功了进入下一步
mysql -uroot -p密码
由于apache2指向的网站根目录是/var/www/html/,要修改配置文件000-default.conf
vim /etc/apache2/sites-enabled/000-default.conf
使网站根目录指向 /var/www/html/public/
然后再修改/etc/apache2/apache2.conf的这里
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
将AllowOverride None 的None改为All.保存重启apache2
这时访问网址,如果出现500错误.那就是由于storage目录没有 777 权限。
到/var/www/html/目录 执行
chmod -R 777 storage
在Unbuntu中重启Apache服务器出现错误:AH00558: apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1.等等。解决方法:
$ sudo vim /etc/apache2/apache2.conf
最后加入一句: ServerName localhost:80
sudo apache2ctl -k restart
今天的修改
submit() {
// 提交数据,user_id,manager_id,days,times;
var days_times = this.dateSelect;
if (!days_times) {
// 如果没有选择就不提交了
return;
}
for (let val in days_times) {
// 以#号传字段
var str = "";
var arr = days_times[val];
// 减少for循环的嵌套
for (let i = 0; i < arr.length; i++) {
str += arr[i];
str += "#";
}
var newstr = str.substring(0, str.length - 1);
// console.log(newstr);
api.userOrder({
user_id: localStorage.getItem("user_id"),
model_id: this.$route.params.id,
days: val,
times: newstr
}).then(res => {
console.log(res);
if (res.code === 1) {
// 成功
MessageBox({
title: "",
message: res.msg,
showCancelButton: false
});
}
}).catch(e => {
// 失败
if (e.code === 0) {
MessageBox({
title: "",
message: e.msg,
showCancelButton: false
});
}
});
}
},
$refs ,ref 使用
我们在更新数据属性时覆盖了我们对DOM所做的更改。这样做的原因是,当访问DOM元素并直接操作它们时,实际上跳过了前面文章中讨论到的虚拟DOM。因此,Vue仍然控制着h1元素,甚至当Vue对数据中的做出更新时,它会更新虚拟DOM,然后更新DOM本身。因此,你应该小心使用对DOM的直接更改,就算是你不小心做了相应的修改,你所做的任何更改都将可能会被覆盖。虽然在使用refs时应该小心更改DOM,但是做只读操作相对来说比较安全,比如从DOM中读取值。
一个vue组件只有一个id=app
<div id="app">
<h1>{{ message }}</h1>
<button ref='myButton' @click="clickedButton">点击偶</button>
<ul>
<li v-for="todo in todos" ref='todos'>
{{ todo.text }}
</li>
</ul>
</div>
下面这种情况是渲染不出来的
<div id="app">
<h1>{{ message }}</h1>
<button ref='myButton' @click="clickedButton">点击偶</button>
</div>
<ul>
<li v-for="todo in todos" ref='todos'>
{{ todo.text }}
</li>
</ul>
子组件向父组件传值 使用this.$emit(“事件名”,“传递的参数”)
fileChange(e) {
let file = e.target.files[0];
if (file.size > this.maxSize) {
MessageBox("提示", "图片太大了噢");
} else {
let formData = new FormData();
formData.append("img", file);
api.upload(formData).then(res => {
console.log(res);
if (res.host) {
this.icon = res.host + res.path;
} else {
this.icon = res.path;
}
this.$emit("changeIcon",res.path);
})
}
},
changeName() {
MessageBox.prompt("输入昵称", "")
.then(({ value, action }) => {
if (!value) {
return;
}
this.name = value;
//
this.$emit('changeName',this.name);
})
.catch(() => {});
},
changePhone() {
MessageBox.prompt("输入联系方式", "")
.then(({ value, action }) => {
if (!value) {
return;
}
this.phone = value;
this.$emit("changePhone",this.phone);
})
.catch(() => {});
},
父组件向子组件传值 使用props:[“数据名称”]
mint-ui 头部组件的使用 Header
<mt-button
v-if=“icon”
class=“right-icon”
// @click.native=“
emit(‘right-click’)”>
{{ right }}
子组件中获取父组件传来的值提示undefined
https://segmentfault.com/q/1010000015163316
https://www.jb51.net/article/117447.htm
https://blog.csdn.net/qq_39894133/article/details/79509155
- 是哪个组件传给那个组件
- 怎么传的,哪些必要的参数
- 怎么处理
- 怎么回显,数据检测
js时间戳问题
一:时间转时间戳:javascript获得时间戳的方法有四种,都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳
1.var timestamp1 = Date.parse(new Date()); // 结果:1477808630000 不推荐这种办法,毫秒级别的数值被转化为000
console.log(timestamp1);
2.var timestamp2 = (new Date()).valueOf(); // 结果:1477808630404 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值
console.log(timestamp2);
3.var timestamp3 = new Date().getTime(); // 结果:1477808630404 ,通过原型方法直接获得当前时间的毫秒值,准确
console.log(timestamp3);
4.var timetamp4 = Number(new Date()) ; //结果:1477808630404 ,将时间转化为一个number类型的数值,即时间戳
console.log(timetamp4);
二,时间戳转时间
var timestamp4 = new Date(1472048779952);//直接用 new Date(时间戳) 格式转化获得当前时间
console.log(timestamp4);
console.log(timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8)); //再利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式
有些时候每次都要发请求
for(var i in days_times){
// 选中多少个就给他发送多少个请求
days = this._getDateTime(i)
console.log("days",days)
times = days_times[i].join("#")
console.log("times",times)
api.userOrder({
user_id: localStorage.getItem('user_id'),
model_id: this.$route.params.id,
days: days,
times: times
}).then(res=>{
console.log("submit",res)
if(res.code===1){
// 成功
MessageBox({
title:'',
message: res.msg,
showCancelButton: false
});
}
}).catch(e=>{
// 失败
if(e.code===0){
MessageBox({
title:'',
message: e.msg,
showCancelButton: false
});
}
})
}
解决异步加载过程中 子组件接受不了父组件传值的情况
<TimeSelect ref="timeSelect" v-if="schedule" :schedule="schedule" @select="select"/>
可能因为在异步加载时需要判断一下那个schedule是否为空,
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
created mounted的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)
Vue.component("demo1",{
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
created:function(){
this.name="唐浩益"
this.age = "12"
this.city ="杭州"
var x = document.getElementById("name")//第一个命令台错误
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name")//第二个命令台输出的结果
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})
程序对比
// 我写的
for(let i=0; i<res.data.length; i++){
if(res.host){
res.data[i].img = res.host + res.data[i].img;
}else{
res.data[i].img = res.data[i].img;
}
res.data[i].days = res.data[i].days.split(' ')[0];
let arr = res.data[i].times.split('#');
let str = '';
arr.forEach(element => {
str += element+':00、'
});
res.data[i].times = str;
}
// 别人写的
if (res.host) {
for (let i = 0; i < res.data.length; i++) {
res.data[i].img = res.host + res.data[i].img;
res.data[i].days = res.data[i].days.split(' ')[0];
let arr = res.data[i].times.split('#');
let str = '';
arr.forEach(element => {
str += element+':00、'
});
res.data[i].times = str;
}
} else {
for (let i = 0; i < res.data.length; i++) {
res.data[i].img = res.data[i].img;
res.data[i].days = res.data[i].days.split(' ')[0];
let arr = res.data[i].times.split('#');
let str = '';
arr.forEach(element => {
str += element+':00、'
});
res.data[i].times = str;
}
}
注意引入scss文件的时候 末尾要加入 ;,不然会报错
@import “@/common/css/var.scss”;