vue 随笔01
vue 随笔01
vue 随笔01
vue-cli3 基本使用
1
2
3
4
5
6
7
8
9
| vue-cli3:
vue create my-project
npm install axios
npm install element-ui
npm install vue-router
npm install qs
npm install vuex
npm install echarts
|
vuejs-templates_webpack_Quickstart
响应式赋值
1
| Object.assign(vueFoo,{fei:"111",bar:"222"})
|
$router 和 $route 区别
1
2
3
4
5
6
| $router 为 VueRouter 实例,想要导航到不同URL,则使用
$router.push({path:'foo',query:{id:'123',name:'大飞'}})
$route 为当前router跳转对象,里面可以获取到name、path、query、params
this.$route.query
this.$route.params
|
this.$router.push 中get 和post 请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
export default new Router({
mode:'history',
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component:HelloWorld
},
]
})
<button @click="clickBut">push 点击我</button>
//push 点击我 path ===> 对应query |||| name==>对应params
clickBut() {
this.$router.push({
path: 'HelloWorld',
query: {
id: 123,
username: "dafei 我是path==>query"
}
});//get 请求
this.$router.push({
name: 'HelloWorld',
params: {
id: 123,
username: "dafei 我是name==>params "
}
}) //post 请求
}
// 03) 在 HelloWorld 页面接受参数
<p>get方法接收参数 {{this.$route.query.username}}</p>
<p>post方法接收参数 {{this.$route.params.username}}</p>
|
ES6异步操作 promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
}).then(data => {
console.log(data + " bar");
});
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
}).then(data => {
console.log(data + " bar");
}).then(data=>{
console.log("foo");
});
new Promise((resolve, reject) => {
setTimeout(() => {
reject('failure');
}, 1000);
}).then(data => {
console.log(data + " bar");
},error=>{
console.log(error + ' foo');
});
|
Promise
那些数组操作是响应式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <div id="app">
<ul>
<li v-for="item in items" :key="item ">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data(){
return {
items: ['fei', 'foo', 'bar'],
number: 123
}
}
});
</script>
|
设置全局变量 Vue.prototype
1
2
3
4
5
6
7
| Vue.prototype.$appName = 'My App'
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
|
Vue.prototype
高阶函数 filter map reduce
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const nums = [10, 15, 18, 25, 34];
let newNums = nums.filter(item => item < 20)
.map(item2 => item2 * 2)
.reduce((total, item3) => total + item3);
const nums = [10, 15, 18, 25, 34];
let newNum_1 = nums.filter(function (item1) {
return item1 < 20;
});
console.log(newNum_1);
let newNum_2 = newNum_1.map(function (item2) {
return item2 * 2;
});
console.log(newNum_2);
let newNum_3 = newNum_2.reduce(function (total, item3) {
return total + item3;
})
console.log(newNum_3);
|
nginx中配置vue项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
server {
listen 80;
server_name demo.fei.com;
charset utf-8;
root E:/selfweb/fei_laravel/public/;
index index.php index.html;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ .+\.php($|/) {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location /web {
alias E:/selfweb/vue/temp_vue2/dist;
index index.html;
}
}
|
webpack搭建Vue
1
2
3
4
5
6
|
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
|
vue-cli 搭建vue
1
2
3
4
| npm root -g
vue create my-project
npm install vue-router
yarn add vue-router
|
2中搭建区别
vue create 和vue init webpack的区别
vue create 是 vue-cli3.x 的初始化方式,模板可以自由配置
vue init webpack 是vue-cli2.x的初始化方式,模板使用webpack官方推荐的标准模板
vue init webpack 项目名称
vue create 项目名称