VUE筆記
環境搭建
- node -v
- npm -v
- npm i -g cnpm --registry=https://registry.npm.taobao.org ->npm鏡像
- cnpm i -g vue-cli
- vue -V
安裝項目
-
vue init webpack vue_project_name
提示目錄已存在，是否繼續：Y
Project name（工程名）:回車
Project description（工程介紹）：回車
Author：作者名
Vue build（是否安裝編譯器）:回車
Install vue-router（是否安裝Vue路由）：回車
Use ESLint to lint your code（是否使用ESLint檢查代碼，我們使用idea即可）：n
Set up unit tests（安裝測試工具）：n
Setup e2e tests with Nightwatch（測試相關）：n
Should we runnpm installfor you after the project has been created? (recommended)：選擇：No, I will handle that myself
初始化
- cd vue_project_name
- cnpm i
- cnpm run dev
- Ctrl+C退出運行
cnpm install -g live-server
配置idea
File-Settings-Languages&Frameworks-JavaScript：修改JavaScript language version為ECMAScript 6，確認。
File-Settings-Plugins：搜索vue，安裝Vue.js。
Run-Edit Configurations...：點擊加號，選擇npm，Name為Run，package.json選擇你工程中的package.json，Command為run，Scripts為dev,然后就可以直接在idea中運行了。
npm 是 nodejs 的包管理和分發工具。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
Vue從入門到精通視頻教程
v-fot，v-text，v-html，v-on
v-model，v-bind，v-pre，v-cloak，v-once
v-directive，
<div v-if="flag">content</div>
<div v-show="flag">content</div>
<li v-for="item in items">{{ item }}</li>
<button v-on:click="event">content</button>
<button @click="event">content</button>
Vue學習筆記
1.Vue指令
1.1. Hello World
1.下載vue開發版本
Vue開發版本包含警告和調試，壓縮后的為生產版本。Vue.js教程
2.項目結構
vue-test
assets(js/css)
example
index.html
3.初始化項目
npm init
4.搭建服務
cnpm install -g live-server 安裝
live-server 運行
5.helloworld.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
</body>
</html>
1.2.v-if，v-else，v-show
<body>
<h1>v-if</h1>
<hr>
<div id="app">
<div v-if="flag">v-if判斷是否加載</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</body>
<body>
<h1>v-show</h1>
<hr>
<div id="app">
<div v-show="flag">v-show判斷是否顯示</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</body>
- v-if:判斷是否加載，可以減輕服務器的壓力，在需要時加載。
- v-show:調整css dispaly屬性，可以使客戶端操作更加流暢。
1.3.v-for
1.基本用法
<div id="app">
<ul>
<li v-for="array in arrays">{{ array }}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]
}
})
</script>
2.排序
vue不允許修改定義好的數據源，因此要定義一個新的對象接收排完序的數據，並使用此對象進行v-for循環顯示
<div id="app">
<ul>
<li v-for="array in sortArrays">{{ array }}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]
},
computed: {
sortArrays: function () {
return this.arrays.sort(sortNum);
}
}
})
function sortNum(a, b) {
return a - b;
}
</script>
3.對象循環輸出
<div id="app">
<ul>
<li v-for="array in sortStudents">{{ array.name }} + {{ array.age }}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
students: [
{name: 'jspang', age: 32},
{name: 'Panda', age: 30},
{name: 'PanPaN', age: 21},
{name: 'King', age: 45}
]
},
computed: {
sortStudents: function () {
return sortObj(this.students, 'age');
}
}
})
function sortObj(obj, key) {
return obj.sort(function (a, b) {
var x = a[key];
var y = a[key];
return (x < y ? -1 : (x > y ? 1 : 0));
})
}
</script>
1.4.v-text，v-html
1.5.v-on
<div id="app">
{{ score }}<br>
<button v-on:click="add">加分</button>
<button @click="sub">減分</button>
<input type="text" v-on:keyup.enter="onEnter" v-model="addscore">
<input type="text" @keyup.13="onEnter" v-model="addscore">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
score: 0,
addscore: ''
},
methods: {
add: function () {
this.score++;
},
sub: function () {
this.score--;
},
onEnter: function () {
this.score = this.score + parseInt(this.addscore);
}
}
})
</script>
