自學Vue的第02天

Koko君發表於2019-06-07
Vue

今日學習總結

1、HelloWorld

2、基本的vue指令

HelloWorld

和所有的語言學習一樣，我們來一個HelloWorld

<!DOCTYPE html>
<html>
	<head>
	   <meta charset="UTF-8">
		<title>HelloWorld</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				template:`
					<div>Hello {{msg}}</div>
				`,
				data:function(){
					return {
						msg:'Vue！'
					}
				}
			})
		</script>
	</body>
</html>
複製程式碼
  • 執行結果

自學Vue的第02天


程式碼分析

  • 基本的使用Vue分為3個步驟

1、匯入Vue.js

2、在html中埋坑，這個坑是需要被Vue處理的

3、例項化一個Vue物件。這個Vue對2中的坑進行處理

自學Vue的第02天


  • el

el：我叫它選擇器，就是指明當前這個Vue物件要處理的是頁面中的那個坑位

  • template

模板，其實寫在這裡的字串效果和直接寫到坑位中去是一樣的

  • data

這裡可以是一個物件，也可以是一個返回物件的函式。

物件資料用於渲染坑

  • 插值表示式

{{表示式}}

通過插值表示式，這裡提取出了data中定義的msg變數的值

注意

template中，只允許有一個根節點

v-text與v-html

  • 示例程式碼
......
<div id="app">
    <div>
        <div v-text='mytext'></div>
        <div v-html='myhtml'></div>
    </div>
</div>
......
    new Vue({
        el: "#app",
        data() {
            return {
                mytext: '<h1>this is v-text</h1>',
                myhtml: '<h1>this is v-html</h1>',
            }
        }
    })
......
複製程式碼
  • 執行結果

自學Vue的第02天


v-text
元素的innerText,不可解析html標籤
v-html
元素的innerHtml 可解析html標籤

v-if、v-else-if、v-else

做元素的插入（append）和移除（remove）操作

<div id="app"></div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        template: `
				<div>
					<button type="button" v-if='checkvif'>測試v-if</button>
					<button type="button" v-else-if='checkvelseif1'>測試v-else-if1</button>
					<button type="button" v-else-if='checkvelseif2'>測試v-else-if2</button>
					<button type="button" v-else>測試v-else</button>
				</div>
			`,
        data: function () {
            return {
                checkvif: true
                , checkvelseif1: true
                , checkvelseif2: true
            }
        }
    })
</script>
複製程式碼

按照我們預設的配置，顯示的是

自學Vue的第02天


我們使用Vue除錯外掛，去改變Vue物件的值，就會隨著條件的變化而變化顯示了呢

自學Vue的第02天

關於這個配置，既可以是布林型別，也可以是任何返回結果是布林型別的等式，如:a==1

v-show

display:none 和display：block的切換

<div id="app"></div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        template: `
				<div>
				    <span v-show="checkvshow">v-show測試</span>
				</div>
			`,
        data: function () {
            return {
                checkvshow: true
            }
        }
    })
</script>
複製程式碼

v-for

  • v-for

    • 陣列  item，index
    • 物件 value，key ，index

迭代一個陣列

<div id="app">
    <div>
        <ul>
            <li v-for="item in arrs">{{item}}</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: function () {
            return {
                arrs: ['足球', '籃球', '排球']
            }
        }
    })
</script>
複製程式碼
  • 頁面效果

自學Vue的第02天


迭代一個物件

<div id="app">
    <div>
        <ul>
            <li v-for="item in person">{{item}}</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: function () {
            return {
                person: {name: '張三', age: 23, birth: '1999-01-01'}
            }
        }
    })
</script>
複製程式碼
  • 執行結果為

自學Vue的第02天


相當於我們獲取到了值，那如果我們想獲取鍵該怎麼辦？

<li v-for="item,key in person">{{key}} - {{item}}</li>
複製程式碼

獲取序號

<li v-for="item,key,index in person">{{index}}:{{key}} - {{item}}</li>
複製程式碼

相關文章