工欲善其事必先利其器,首先我們得有一個趁手的ide,一直習(xí)慣使用phpstorm,但是Ctrl+Alt+l的格式化實在滿足不了ESLint校驗我們寫的代碼!
1.phpstorm配置ESlint檢查代碼
image.png
Ctrl+ALT+L是phpstorm自帶的快速格式化的縮進(jìn)量，我們需要配置eslint格式化快捷鍵。如圖添加快捷鍵ALT+L即可，以后就可以用Alt+L格式化成符合eslint規(guī)則的格式代碼。
image.png
此時使用Alt+L就可以爽歪歪的使用代碼格式化了
2.phpstorm在vue文件中使用stylus
image.png
以下插件也可以一并安裝
image.png
裝完后記得重啟!
3.安裝vue-cli
安裝前記得切換國內(nèi)源
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
如果出現(xiàn) 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 解析變量的標(biāo)簽
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
圖片為學(xué)習(xí)轉(zhuǎn)載,侵刪
