目錄:
一、創建Vue項目
0.使用環境要求及說明
本文檔僅作為個人學習筆記、詳細內容可以查看官網文檔，官方文檔有更詳細的使用說明及案例
node 版本大於等於8.9
1.使用命令創建項目
vue init webpack 【創建項目名稱】
創建好項目之后，進入到創建項目的目錄，然后執行命令
cnpm install
2.啟動項目
npm start / npm run dev
打開瀏覽器的 localhost:8080 地址就可以看到了vue的啟動情況。
二、簡單指令
1.變量:
{{ 變量 }}
<div class="hello">
{{ "Hello World!" }}.</br>
{{ 20+1 }}.</br>
{{ "ok" ? 'Yes' : 'No' }}.</br>
{{ "Hello".split('').reverse().join('') }}
</div>
這些可以在html頁面中渲染出來，支持單行語句，但是這個單行語句並不是 if(){}else{} 這種的單行語句的格式
2.動態綁定變量值
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 新人.."
}
}
}
</script>
可以通過 data 里面的return設置返回的變量
3.v-once指令
只渲染一次，以后值改變了，但是如果使用這個指令標簽修飾，以后值就算被修改了，也不會重新渲染
<p v-once>{{ vueMessage }}</p>
4.v-html解析html
語法:
<div v-html="htmlCode">
</div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鳥..",
htmlCode: "<h3>這是一個三級標題</h3>"
}
}
}
</script>
5.v-bind(解析屬性中的對象)
5.1 超鏈接標簽 href屬性值綁定
比如說給超鏈接中的href綁定屬性，使用 href = "{{url}}" ,這樣配置連接是不會生效的 href= {{url}},這樣也不會生效 ，正確的使用方法如下
<a v-bind:href="url">{{ url_name }}</a>
這樣使用 v-bind:屬性名="變量值" 就可以動態的設置了
5.2 v-bind 設置 css樣式
也可以使用這個屬性來給 div設置 css樣式
<div v-bind:class="div_style"></div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鳥..",
htmlCode: "<h3>這是一個三級標題</h3>",
url_name: "淘寶",
url:"http://www.taobao.com",
div_style: "isActive"
}
}
}
</script>
使用效果
v-bind 實現 : 變量名-1 功能 ,可以進行字符串的拼接
<div v-bind:class="div_style+'-1'"></div>
實現效果:
<div data-v-469af010="" class="list-1"></div>
5.3 v-bind簡寫
總結： v-bind 也可以使用簡寫 ： ,省略v-bind 直接使用 :hre="變量名" 這樣也可以實現同樣的效果
6.v-if 條件判斷指令使用
6.1 通過flag 標簽來控制頁面上顯示的內容
<div v-if="flag">用戶開關打開</div>
<div v-else>用戶開關關閉</div>
data(){
return {
flag: true
}
}
6.2 v-if 也可以在template上使用
7. v-if 和 v-show的區別
v-if 只有當設置的屬性值為真的時候才會在頁面上創建html元素，但是v-show 元素是一直存在的 只不過是使用了display屬性來控制
8 . v-for 循環
語法:
<h3>遍歷普通數組</h3>
<ul>
<li v-for = "(book,index) in books">{{index}}========{{book}}</li>
</ul>
<h3>遍歷對象數組</h3>
<ul>
<li v-for="(student,index) in students">{{index}}==={{student.name+" "+student.age}}</li>
</ul>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
vueMessage: "Vue 菜鳥..",
htmlCode: "<h3>這是一個三級標題</h3>",
url_name: "淘寶",
url:"http://www.taobao.com",
div_style: "list",
flag: true,
books: ['Java從入門到放棄','設計模式','數據結構與算法分析'],
students: [
{
name: 'zuoyan',
age: 23
},
{
name:'meihua',
age:23
},
{
name:'張三',
age: 48
}
]
}
}
}
</script>
上面的代碼就會渲染出來下面的效果
遍歷普通數組
- 0========Java從入門到放棄
- 1========設計模式
- 2========數據結構與算法分析
遍歷對象數組
- 0===zuoyan 23
- 1===meihua 23
- 2===張三 48
9.v-on監聽事件
9.1使用說明
使用v-on指令監聽DOM事件，並在觸發時執行一些JavaScript代碼
<button v-on:click="switchHandler('Hello Vue', $event)" type="button" name="button">打開/關閉 按鈕</button>
v-on:click 也可以簡寫成 @click="函數名稱(參數.. ,$event)"
$event 是獲取點擊事件的詳細信息
觸發方法函數的編寫
<script>
export default {
name: 'HelloWorld',
data () {
}
,
methods:{
switchHandler(data,$event)
{
console.log(data);
console.log(event);
//改變數值變量的boolean值
this.flag = !this.flag;
}
/*
switchHandler:function(data,$event) {
console.log(data);
console.log(event);
this.flag = !this.flag;
}
*/
}
}
</script>
methods 方法與 data 方法同級目錄，直接通過this.變量名稱就可以獲取或者改變變量的值了
9.2 事件傳遞參數
$event
9.3 數組檢測更新
數組的操作方法分為、返回一個原數組還是一個新生成的數組
變異方法:
改變原數組，則可以引起視圖的更新
不改變原數組，創建新數組，則無法引起視圖更新
可以引起視圖更新的方法
push()pop()shift()unshift()splice()sort()reverse()
例如 filter()、concat() 和 slice() 。它們不會改變原始數組，而總是返回一個新數組
三、計算屬性
1.計算屬性
1.1 使用場景說明:
比如說，需要使用一個字符串，頁面上顯示的是這個字符串的每個字符的反轉，比如說Hello，我有一個功能是在頁面上顯示Hello的反轉，並且不是在一處使用到了這個變量，而是在頁面上很多處使用到了Hello的反轉。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
只要是需要顯示的地方都需要調用這段代碼，有點麻煩，此時就可以使用計算屬性
<template lang="html">
<div>
{{message.split('').reverse().join('')}}
</br>
{{getMessage}}
</br>
{{getMessage}}
</div>
</template>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello"
}
},
computed:{
getMessage(){
return this.message.split('').reverse().join('');
}
}
}
</script>
<style scoped>
</style>
經過這樣的計算屬性，就可以不用重復的編寫這樣的計算代碼了，只需要調用這個computed方法就可以了，有個好處是，如果數據沒有改變就不需要重復計算。
2.計算屬性和方法的區別
計算屬性和方法使用的效果是一模一樣的，但是不同的是計算屬性是基於依賴進行的，如果屬性值沒有發生改變，那么數據就是從緩存中拿到的。但是方法每次都是需要重新進行計算的。
四、Class與Style的綁定
1.使用場景
場景1: 通過 data里的字符串變量來控制class的樣式
<template lang="html">
<div :class="boxStyle">
</div>
<!--
或者通過
<div v-bind:class="boxStyle"></div>
-->
</template>
頁面渲染結果為:
<div class="color"></div>
場景2: 通過一個標識符來控制css樣式是否顯示
<template lang="html">
<div :class="{'color':flag}">
</div>
</template>
<!--如果flag=ture 的頁面渲染效果-->
<div class="color"></div>
通過變量flag的值，來控制 class="color"是否設置
場景3: v-bind:class 可以和普通的class 共存而不是覆蓋
<template lang="html">
<div class="list" :class="box_style"></div>
</template>
<!--頁面渲染的結果為-->
<div class="list color"></div>
場景4: class可以傳入多個控制對象
<template lang="html">
<div class="list" :class="{color:flag , error:hasError }">
</div>
</template>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello",
box_style: "color",
flag: true,
hasError: true
}
},
computed:{
getMessage(){
return this.message.split('').reverse().join('');
}
}
}
</script>
<!--最后頁面渲染出來的效果為-->
<div class="list color error"></div>
場景5: 使用object對象控制css樣式
<div v-bind:class="cssObject"></div>
<script>
export default{
name: "Computed",
data() {
return{
message: "Hello",
box_style: "color",
flag: true,
hasError: false,
cssObject:{
"c1":true,
"c2":true
}
}
}
</script>
<!--上面代碼渲染的結果為-->
<div class="c1 c2"></div>
場景6： 數組語法
需要傳遞css樣式數組列表
<div :class="[activeClass,errorClass]"></div>
<script>
export default{
name: "Computed",
data() {
return{
activeClass: "active",
errorClass: "errorMessage",
}
}
</script>
頁面渲染效果為:
<div class="active errorMessage"></div>
在數組中也可以使用三目運算式
<div :class="[flag?activeClass:'',errorClass]"></div>
渲染結果為:
<div class="active errorMessage"></div>
通過flag的boolean值，來設置css的樣式
場景7： 綁定Style屬性
<div :style="{color:'red',fontSize:'30px'}">
Style
</div>
<!--最后頁面渲染效果-->
<div style="color: red; font-size: 30px;">
Style
</div>
上面style的屬性值也可以通過變量動態設置
五、表單輸入綁定
1.基礎用法
語法使用 v-model 綁定需要在input輸入綁定的變量名稱
v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。
使用注意事項:
v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
使用場景: 需求，需要在文本輸入框的下面隨時顯示輸入的文本內容
<input v-model="username" type="text" name="" value="">
<p>輸入的用戶名為:{{ username }}</p>
<!-- v-model 中使用的變量名稱需要在data中聲明 -->
這樣就可以實現輸入框中的數據實時顯示。 其他form表單組件也支持，比如說 textarea ， 下面試試幾個比較典型的組件，比如說單選框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
也可以將多選框的多個值選項，綁定到一個變量上
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
這樣獲取到的變量的值就是一個數組元素
2.修飾符
v-model 如果不設定修飾符，默認的效果就是，事實顯示到頁面上，但是有些需求是，輸入完畢后失去焦點，或者點擊按鈕才顯示，這樣就需要lazy處理修飾了。
.lazy
在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
.number
如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number">
這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。
.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
六、監聽器
1.使用方法
<input v-model="username" type="text" name="" value="">
<p>輸入的用戶名為:{{ username }}</p>
<script>
export default{
watch:{
username(data){
console.log(data);
}
}
}
</script>
只需要在 default中創建一個 watch對象，里面創建一個和v-model 中變量名稱一樣的方法，然后傳遞一個參數，這個參數就可以獲取 屬性改變的值，這個方法在每次綁定值改變的時候被調用。
2.計算屬性 vs 偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。當你有一些數據需要隨着其它數據變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調。細想一下這個例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代碼是命令式且重復的。將它與計算屬性的版本進行比較：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
使用計算屬性看起來比使用偵聽屬性簡單多了，業務復雜也降低了。
七、基本組件創建
1.創建組件
在src 文件夾下的components 文件夾下創建 Learn.vue
<template>
<!-- 每個組件只允許有一個根容器 -->
<div class="container">
Learn 組件
</div>
</template>
<script>
export default{
// 可選項，設置組件名稱，默認規范是和文件名稱一樣
name: "Learn",
data(){
return {
}
}
}
</script>
<style lang="css" scoped>
</style>
組件主要包括三個部分，template 、 script 、 style
template中允許有且只有一個根容器，然后script 中的 data 中設置的，組件的初始狀態，style中設置的是頁面樣式
2.在App.vue 中注冊自定義的組件
說明：創建組件的原因，主要是增加組件的復用性。
2.1 導入創建的組件
import Learn from './components/Learn'
最后一個其實是Learn.vue 后綴名稱可以進行省略
2.2 注入創建的組件
export default {
name: 'App',
components: {
HelloWorld,
Learn
}
}
2.3 使用自定義組件
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn/>
</div>
</template>
這樣就可以在頁面上顯示用戶自定義的組件了。
八、組件之間傳遞數據
1.父組件傳遞變量值
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn dataInfo ="study vue..."/>
</div>
</template>
在App.vue 使用到自組件的地方，傳遞屬性值 dataInfo = "study vue....."
2.子組件使用props:[]接收
在Learn.vue 中使用 props 接收父類傳遞過來的變量
<script>
export default{
// 可選項，設置組件名稱，默認規范是和文件名稱一樣
name: "Learn",
data(){
return {
}
},
props:['dataInfo']
}
</script>
3.在組件頁面上使用
<template>
<!-- 每個組件只允許有一個根容器 -->
<div class="container">
Learn 組件
{{dataInfo}}
</div>
</template>
4.使用效果
5.也可以進行傳遞對象
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<!-- <Computed/> -->
<Learn :dataInfo ="dataInfo"/>
</div>
</template>
**注意點: **如果傳遞的是對象，需要在傳遞對象的時候使用 ： 號，才可以傳遞 data中綁定的對象數據
使用效果:
6.子級組件向父級組件傳遞數據
子組件通過事件向父組件傳遞值，需要通過自定義事件來傳遞
<button @click="sendMessage" name="button" type="button">向父級組件傳遞數據</button>
在script中聲明方法
<script>
export default {
// 可選項，設置組件名稱，默認規范是和文件名稱一樣
name: "Learn",
data() {
return {}
},
props: ['dataInfo'],
methods: {
sendMessage(){
this.$emit("getMessage","From son Data")
}
}
}
</script>
上面的this.$emit中的getMessage方法就是父組件獲取子組件傳遞過來數據的方法，第二個參數就是需要傳遞的數據
在父組件中使用方法接收就可以了
<Learn :dataInfo ="dataInfo" @getMessage="getSonMessage"/>
export default {
name: 'App',
components: {
HelloWorld,
Computed,
Learn
},
data(){
return {
sonData: "",
dataInfo: {
name: "zuoyan",
age: 23,
address: "銀河系太陽系地球亞洲中國"
}
}
},
methods:{
getSonMessage(data){
this.sonData = data;
}
}
}
@接收子組件方法名="方法名"，然后在方法名的函數中獲取子組件傳遞過來的數據。
九、組件加載與keep-alive
場景需求就是切換組件過后，在返回回來需要原來的組件保持原來的狀態
<keep-alive>
<component v-bind:is="currentComponent"></component>
</keep-alive>
將組件加載 放在keep-alive 中即可完成狀態的保存