Vue初試

時間 2019-11-21

標籤 vue 初試简体版

原文原文鏈接

1、Vue 快速使用javascript

羅嗦兩句：html

若是你不論用過angular js、net的MVC仍是沒有用過對於上手vue都沒有任何困難。vue

vue 幾乎對於大型項目仍是小型項目均可以迅速使用，或者對已有的項目漸進是使用。java

vue 不是由於是中國人寫的而推薦使用，若是你使用過angular js react easyUI backbone等你就知道它的好處了，尤爲對沒有用過相似框架或者想換其餘框架的來講vue能夠說速度的讓你上手並完成轉換。react

一、去官網下載vue.js 或者用git/webpack的工具部署一下webpack

　　　　官網： https://vuejs.org/ git

　　第一步：引入vue 而後new 一個vue把值附上 data裏面就是你定義的值 el後面就是你綁定的vue區域web

<html>
    <head>
<script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
{{message}}
        </div>
        <script>
        new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})
        </script>
    </body>
</html>

　　 第二步：咱們演示一下這種框架的重要特性雙向綁定json

加入input 元素代碼以下：數組

<html>

<head>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>
</html>

　　　　　　展現如圖：

　　　　　　是否是實現很簡單！

第三步：咱們展現一下列表怎麼實現

　　　　　　　　先看代碼

<html>

<head>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
        <li v-for="item in elists">
            {{item.text}}
        </li>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                elists: [
                    { text: 'Learn vue' },
                    { text: 'Learn vuerouter' },
                    { text: 'Build small example!' }]
            }
        })
    </script>
</body>

</html>

　　　　　　　　效果以下：

　　　　　　　　　　　　定義一個elists 數組而後用v-for標籤來寫 vue會自動識別這種標籤而後實現循環展現你寫在li裏面的元素。　　

　　　　　　　　　　　　若是你如今不理解或者看不懂沒關係，你先記住，後面咱們會說到它是怎麼實現這種v-for標籤，還能夠咱們本身定義這種標籤。

　　　　　　　　第四步：咱們來看看事件怎麼實現

　　　　　　　　　　　　先加入一個按鈕

　　　　　　　　　　　　　　　　<button v-on:click="reverseMessage">Reverse Message</button>

　　　　　　　　　　　　而後咱們再加入method：{

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　裏面能夠加入任何你想要的方法，方法名就是v-on:click等號後面名字

　　　　　　　　　　　　具體代碼以下

<html>

<head>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
        <li v-for="item in elists">
            {{item.text}}
        </li>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                elists: [
                    { text: 'Learn vue' },
                    { text: 'Learn vuerouter' },
                    { text: 'Build small example!' }]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

　　　　　　　　效果以下：

<!--一、文本綁定：在html的文本字符串中，能夠經過{{}}格式包含vue特性。-->
<span>Message: {{ msg }}</span>
<!--二、單向綁定：只同步一次，若是msg特性值有變化，html中的文本不會被更新。-->
<span>This will never change: {{* msg }}</span>
<!--3.輸出包含html的數據：1和2中的代碼不支持輸出html代碼，須要用下面的格式。-->
<div>{{{ raw_html }}}</div>
<!--4.html屬性值綁定-->
<div id="item-{{ id }}"></div>
<!--5.支持javascript表達式-->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<!--6.過濾器：vue提供了屬性過濾功能，下面的代碼message是一個特性，filterA是一個過濾函數，最終輸出爲filterA(message)的結果。-->
{{ message | filterA }}
<!--7.判斷語法：若是條件成立則輸出結果，條件不成立無任何輸出。-->
<p v-if="greeting">Hello!</p>
<!--8.html屬性綁定：下面代碼和：<a href={{url}}」></a>和效果同樣，其實最終也會轉換爲v-bind模式。-->
<a v-bind:href="url"></a>
<!-- 9.事件綁定：使用v-on爲html的事件屬性綁定方法。-->
<a v-on:click="doSomething"></a>
<!--10.v-bind縮寫：下面的第一段代碼爲v-bind的完整寫法，第二段代碼爲縮寫方式。-->
<!-- 完整語法 -->
<a v-bind:href="url"></a>

<!-- 縮寫 -->
<a :href="url"></a>

<!-- 完整語法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>

<!--  11.v-on縮寫：和v-bind類似，區別在於v-on用@符號表示，而v-bind用:表示。 -->
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>

<!-- 縮寫 -->
<a @click="doSomething"></a>
<!-- Class與Style綁定 -->
<!-- 完整語法 -->
data: {
    isA: true,
    isB: false
}
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
輸出結果：
<div class="static class-a"></div>
<!-- 3.數組語法：class屬性可直接綁定一個數組，數組裏邊的項爲vue實例特性。 -->
<div v-bind:class="[classA, classB]"></div>
<!-- 條件渲染 -->
<!--   1.v-if和v-else：下面代碼若是條件爲true則輸出yes，不然輸出no -->
<h1 v-if="state === 1">Yes</h1>
<h1 v-else>No</h1>
<!-- 2.template v-if輸出多條html元素：v-if和template標籤配合使用可嵌入多個html標籤，當着模板使用，最終輸出值包含html元素。 -->
<template v-if="state === 1">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

<!-- 3.v-show和v-else: 和v-if類似，都做爲條件判斷，不一樣點在於渲染的區別。v-if只有等條件成立時纔會渲染html元素，而v-show無論條件是否成立都會渲染，若是條件不成立則設置元素的display爲none。 -->
<!-- 4.v-show和組件混合使用問題：將v-show用在組件上時，因爲指令優先級v-else會出問題，因此不要使用v-else。下面代碼是錯誤的： -->

<custom-component v-show="condition"></custom-component>
<p v-show="!condition">這可能也是一個組件</p>
<!-- 列表渲染 -->
<!-- 1.語法v-for：經過v-for可遍歷js對象集合，而後用能夠直接輸出每一項的數據。下面的代碼直接用文本輸出items的每項數據。 -->
<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>
<!--  2.獲取遍歷項索引：使用v-for遍歷有時候想獲得每一項的索引值，可經過index直接獲取，index直接獲取，index是vue直接提供的特性。咱們也能夠給索引取別名： -->
<div v-for="(idx, item) in items">
    {{ idx }} {{ item.message }}
</div>
<!-- 3.template和v-for：有時候咱們想每次輸出多條html標籤，那麼咱們可經過v-for和template配合使用達到效果： -->
<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>
<!--  4.操做數組：vue提供了一些數組操做方法，包括push、pop、shift、unshift、splice、sort、reverse等。若是我要對vue實例example1的集合特性items添加項，能夠使用: -->
example1.items.push({message: ‘Baz’});
example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

<!-- 5.數組操做問題    不能直接使用數組索引設置元素，例如vm.items[0] = {}，這樣設置的話，vue是不能檢測到數組的變化。可以使用set方法： -->
example1.items. set(0, { childMsg: 'Changed!'})
example1.items = [];
<!--  6.對象v-for:v-for也可直接遍歷對象屬性。 -->
<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ $key }} : {{ value }}
    </li>
</ul>
<!-- 方法與事件處理器 -->
<!--  1.方法處理器：使用v-on監聽DOM事件，例如 -->
<div id="example">
    <button v-on:click="greet">Greet</button>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 對象中定義方法
    methods: {
        greet: function (event) {
            // 方法內 `this` 指向 vm
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            alert(event.target.tagName)
        }
    }
})

</script>

<!-- 2.如何傳遞參數：可直接傳遞字符串或者對象，若是想傳遞事件對象能夠使用$event： -->
<buttonv−on:click="say(′hello!′, event)">Submit</button>
<!-- 3.數據邏輯和事件邏輯隔離：爲了讓數據模型只處理數據邏輯，而不混雜其餘邏輯，vue.js提供了兩個事件修飾符.prevent和.stop。 -->
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!--  4.按鍵修飾符：能夠使用按鍵編碼或者別名。-->
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">
<!-- vue.js提供的別名包括：enter、tab、delete、esc、space、up、down、left、Right。

    vue.js也支持自定義別名，例如咱們想控制F1按鍵事件，能夠先給F1（編碼爲112）定義一 -->
<!-- 表單控件綁定 -->
<!-- 1.text控件：若是修改了text控件的值，span綁定的message會不一樣更新。 -->
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
<!-- 2.checkbox控件 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 多個checkbox綁定：每一個checkbox綁定一個類型爲數組的數據模型checkedNames。 -->
<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 | json }}</span>
<!--     3.radio -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<!--     4.select -->
<select v-model="selected">
    <option selected>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>

相關標籤/搜索

每日一句

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