【Vue,自學第一天】
阿新 • • 發佈:2018-05-07
ever return 改變 修改 底層 IT 綁定 包裝 paragraph
一、創建第一個 Vue 應用
接下來我們創建第一個 Vue 應用。
View 層 - HTML 代碼如下:
<div id="app"> {{ message }} </div>
Model 層 - JavaScript 代碼如下(需放在指定的HTML元素之後):
new Vue({ el:‘#app‘, data: { message:‘Hello World!‘ } });
-
雙向數據綁定
接下來我們創建一個 view 層 HTML 文件:vueapp.htm,以及 model 層文件:vueapp.js,然後通過 vue.js(使用v-model這個指令)完成中間的底層邏輯,實現綁定的效果。改變其中的任何一層,另外一層都會改變。
vueapp.html文件代碼:
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
vueapp.js 文件代碼:
new Vue({ el: ‘#app‘, data: { message: ‘菜鳥教程!‘ } })
以上實例中 {{message}} 會根據輸入框 input 的改變而改變,如果你不想讓其變化可以修改為:
{{* message }}
同時還支持一些簡單的表達式:
<!-- 字符串連接 --> {{ message + ‘官網地址:www.runoob.com‘ }} <!-- 字符串反轉 --> {{ message.split(‘‘).reverse().join(‘‘) }}
-
列表輸出
列表輸出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 這個指令就能完成:
<div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> <script> new Vue({ el: ‘#app‘, data: { todos: [ { text: ‘Learn JavaScript‘ }, { text: ‘Learn Vue.js‘ }, { text: ‘Build Something Awesome‘ } ] } }) </script>
-
條件判斷
在字符串模板中,如 Handlebars,我們得像這樣寫一個條件塊:
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
在 Vue.js,我們使用 v-if 指令實現同樣的功能:
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一個 "else" 塊:
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
因為 v-if 是一個指令,需要將它添加到一個元素上。但是如果我們想切換多個元素呢?此時我們可以把一個 <template> 元素當做包裝元素,並在上面使用 v-if,最終的渲染結果不會包含它。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
-
v-show
v-show作用與v-if類似,不同的是v-show的元素會始終渲染並保持在 DOM 中,且v-show不支持<template>標簽。
<h1 v-show="ok">Hello!</h1>
-
過濾器
與Linux中的管道類似,vue.js也使用的是|:
{{message | uppercase}}
這樣就能輸出message的大寫了,過濾器也能串聯在一起使用:
{{message | reverse | uppercase}}
這裏reverse並不是內建的過濾器,我們可以用Vue.filter自定義:
Vue.filter(‘reverse‘, function (value) { return value.split(‘‘).reverse().join(‘‘) })
【Vue,自學第一天】