Vue 01
https://blog.csdn.net/u013210620/article/details/79801683#npmvue_14
http://www.runoob.com/nodejs/nodejs-npm.html
https://www.cnblogs.com/dreling/p/6892684.html#autoid-2-0-0
关于node 环境 和 npm配置 代理
NODE NPM config
path
npm config set prefix "D:\software\nodejs\global_modules"
prefix=D:\software\nodejs\node_modules\npm
C:\Users\imi\AppData\Roaming\npm
设置代理
nvm settings.txt 文件proxy= ip:port
npm config set proxy=10.4.200.230:8080
npm config set registry=http://registry.npmjs.org
关于https
经过上面设置使用了http开头的源，因此不需要设https_proxy了，否则还要增加一句:
npm config set https-proxy http://server:port
代理用户名和密码
然后全局安装webpack
npm install webpack -g
npm install webpack-cli -g
webpack -v
4.14.0
就可以出现版本了
也可以随意切换nodejs
增删改查
- vue crud html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue crud</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="container">
<h2> vue card 1</h2>
<div id="card1" class="card ">
<div id="" class="card-body">
<form class="form-inline">
<label for="name">Name:</label>
<input type="text" class="form-control" v-model="addPer.name" id="name" placeholder="Enter name">
<label for="name">Phone:</label>
<input type="text" class="form-control" v-model="addPer.phone" id="phone" placeholder="Enter Phone">
<label for="email">Email:</label>
<input type="email" class="form-control" v-model="addPer.email" id="phone" placeholder="Enter email">
<button type="button" class="btn" v-on:click="addPerson(addPer)">Add</button>
<input type="text" class="form-control" v-model="keyWords" v-on:keyup.13="searched(this)" v-on:keyup="search(this)" id="phone" placeholder="Enter email">
</form>
</div>
</div>
<div id="card2" class="card">
<table class="table table-hover">
<thead>
<tr>
<th style="display: none;">Id</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Operation</th>
</tr>
</thead>
<tbody id="pers">
<tr v-for="i in persons">
<td style="display: none;">{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.phone}}</td>
<td>{{i.email}}</td>
<td>
<button type="button" class="btn" @click="removePerson(i.id)">Remove</button>
<button type="button" class="btn" @click="editPerson(i)" data-toggle="modal" data-target="#myModal">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">Edit</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form class="form">
<label for="name">Name:</label>
<input type="text" class="form-control" v-model="editPer.name" id="name" placeholder="Enter name">
<label for="phone">Phone:</label>
<input type="text" class="form-control" v-model="editPer.phone" id="phone" placeholder="Enter Phone">
<label for="email">Email:</label>
<input type="email" class="form-control" v-model="editPer.email" id="email" placeholder="Enter email">
<!-- <button type="button" class="btn" v-on:click="editOk(person)">Add</button> -->
</form>
</div>
<!-- 模态框底部 -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div> -->
</div>
</div>
</div>
</div>
</body>
<script src="crud.js" type="text/javascript" charset="utf-8"></script>
</html>
crud.js
var data = {
persons: [{
id: 1,
name: 'joe',
phone: '1342324234',
email: 'wasadoo@133.com'
},
{
id: 2,
name: 'Ezreal',
phone: '1342324234',
email: 'jjghjgh@163.com'
}
],
addPer: {
id: 0,
name: "",
phone: "",
email: ""
},
editPer: {
id: 0,
name: "",
phone: "",
email: ""
},
keyWords:''
}
var _persons = [];
_persons[0] = data.persons;
var max_id = data.persons.length;
for (var i in data.persons) {
if (i.id > max_id) {
max_id = i.id
}
}
var app = new Vue({
el: "#container",
data: data,
methods: {
addPerson: function(e) {
if (e.name) {
max_id++;
this.addPer.id = max_id;
data.persons.push(this.addPer)
this.addPer = {
id: 0,
name: "",
phone: "",
email: ""
};
} else {
alert('name can\'t empty')
}
_persons[0] = data.persons;
},
editPerson: function(e) {
data.editPer = e || {};
e = data.editPer;
_persons[0] = data.persons;
},
removePerson: function(e) {
for (let i in data.persons) {
if (e === data.persons[i].id)
data.persons.splice(i, 1)
}
_persons[0] = data.persons;
},
search:function(e){
// console.log(app.keyWords)
_persons[1] = [];
if($.isEmptyObject(app.keyWords)){
app.persons = _persons[0]
}else{
_persons[1]=[];
for(var i in app.persons){
app.persons=[]
for(_i in app.persons[i])
if((app.persons[i][_i]+'').includes(app.keyWords))
_persons[1].push(app.persons[i])
}
app.persons = _persons[1]
}
},
searched:function(e){
console.log(e)
}
}
})
专注于JavaWeb
