工欲善其事必先利其器,首先我们得有一个趁手的ide,一直习惯使用phpstorm,但是Ctrl+Alt+l的格式化实在满足不了ESLint校验我们写的代码!
1.phpstorm配置ESlint检查代码
image.png
Ctrl+ALT+L是phpstorm自带的快速格式化的缩进量，我们需要配置eslint格式化快捷键。如图添加快捷键ALT+L即可，以后就可以用Alt+L格式化成符合eslint规则的格式代码。
image.png
此时使用Alt+L就可以爽歪歪的使用代码格式化了
2.phpstorm在vue文件中使用stylus
image.png
以下插件也可以一并安装
image.png
装完后记得重启!
3.安装vue-cli
安装前记得切换国内源
npm config set registry https://registry.npm.taobao.org
npm i -g cnpm
npm info underscore
// 有 registry.npm.taobao.org 等字样 说明切换成功
接着安装vue-cli
npm i -g @vue/cli@3
4.初始化vue项目
vue init webpack admin
[图片上传中...(image.png-a9f0fd-1561989872025-0)]
按照图片指示操作即可
安装element-ui
npm i element-ui –S
安装axios
npm i axios -S
安装 avue
npm i @smallwei/avue -S
使用方式:
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
安装js-cookie插件
npm install js-cookie --save
安装vuex
npm install vuex --save
如果出现 Module not found: Error: Can't resolve 'sass-loader'
安装下下面扩展即可
npm install node-sass --save-dev
npm install sass-loader --save-dev
安装vue版本ECharts
npm install vue-echarts --save
使用
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!--
v-bind: 简写":" 属性操作
v-on:click 简写 "@" 事件
v-html 解析变量的标签
v-model 双向绑定
-->
<!-- ID root 称为挂载点 -->
<div id="root" v-bind:title="title" @click="rootClick">
<input type="text" v-model="first"><br>
<input type="text" v-model="operation"><br>
<input type="text" v-model="last"><br>
<div>{{fullName}}</div>
<div>{{count}}</div>
<!-- v-if="flag" -->
<div v-show="flag" >hhhhhhhh</div>
<button type="button" @click="btnClick">显示/隐藏</button>
<ul>
<li v-for="(v,k) of list" :key="k">{{v}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
first:'',
last:'',
operation:'',
// content: "你好",
// title: "this is title",
count: 0,
flag:true,
list:[1,2,3,4]
},
methods: {
rootClick: function() {
this.content = '世界'
},
btnClick:function(){
this.flag = !this.flag;
}
},
computed: {
fullName: function(){
return this.first + this.operation + this.last;
}
},
watch:{ //侦听器
first:function(){
this.count++;
},
last:function(){
this.count++;
}
}
});
</script>
</html>
子父组件之间的传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="content">
<button type="button" @click="add">提交</button>
</div>
<ul>
<todo-li v-for="(value,key) of list"
:key="key"
:index="key"
:value="value"
@delete-li="deleteLi"
>
</todo-li>
</ul>
</div>
</body>
<script>
Vue.component('todo-li', {
props:['value','index'],
template: '<li @click="todoDeleteLi">{{value}}</li>',
methods:{
todoDeleteLi:function(){
this.$emit("delete-li",this.index);
}
}
});
new Vue({
el: "#root",
data: {
list: [],
content: '',
},
methods: {
add: function() {
this.list.push(this.content);
this.content = '';
},
deleteLi:function(k){
this.list.splice(k,1);
}
}
});
</script>
</html>
计算属性之 geter,seter
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>
{{fullName}}
</div>
</div>
</body>
<script >
var vm = new Vue({
el:"#root",
data:{
firstName:'n',
lastName:'i'
},
computed:{
/*fullName:function(){
return this.firstName+''+this.lastName
}*/
fullName:{
get:function(){
return this.firstName+this.lastName;
},
set:function (value) { //例如: li lei
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});
</script>
</html>
样式操作
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style type="text/css">
/*.activated {
color: yellow;*/
}
</style>
<body>
<div id="root">
<div>
<!-- 1. -->
<!-- <div @click="divClick":class="{activated:isActivated}"> -->
<!-- 2. -->
<!-- <div @click="divClick" :class="[activated]">
Hello world
</div> -->
<div :style="styleObj" @click="divClick">hello</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#root",
data: {
// 1,2
// activated: "",
//3.
styleObj:{
color:"yellow"
}
},
methods: {
divClick: function() {
//1.
// this.isActivated = !this.isActivated;
//2.
//this.activated = this.activated == "activated"?"":"activated"
//3.
this.styleObj.color = this.styleObj.color=='yellow'?'red':'yellow';
}
}
});
</script>
</html>
vue.png
图片为学习转载,侵删
网友评论