自學Vue的第02天

時間 2019-12-05

標籤自學 vue 02天简体版

原文原文鏈接

今日學習總結

一、HelloWorldjavascript

二、基本的vue指令html

HelloWorld

和全部的語言學習同樣，咱們來一個HelloWorldvue

<!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分爲3個步驟

一、導入Vue.jsjava

二、在html中埋坑，這個坑是須要被Vue處理的npm

三、實例化一個Vue對象。這個Vue對2中的坑進行處理數組

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

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>',
            }
        }
    })
......
複製代碼

執行結果

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調試插件，去改變Vue對象的值，就會隨着條件的變化而變化顯示了呢

關於這個配置，既能夠是布爾類型，也能夠是任何返回結果是布爾類型的等式，如: 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>
複製代碼

頁面效果

迭代一個對象

<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>
複製代碼

執行結果爲

至關於咱們獲取到了值，那若是咱們想獲取鍵該怎麼辦？

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

獲取序號

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。