day88 Vue基础
1.創(chuàng)建Vue實(shí)例？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Index</title><script src="vue.js"></script> </head> <body><div id = 'app'><h5>site:{{site}}}</h5><h5>url:{{url}}</h5><h5>{{details()}}</h5></div><script>var app = new Vue({el:'#app',data:{site:'菜鳥教程',url:"www.runoob.com",alexa:'10000'},methods:{details:function(){return this.site + '- dream,wake up !'}}})</script> </body> </html>
每個(gè)Vue程序首先使用以下函數(shù)創(chuàng)建一個(gè)Vue的實(shí)例：
var vm = new Vue({details? options})
盡管 與MVVM沒(méi)有關(guān)聯(lián)，但vue的設(shè)計(jì)模式受其啟發(fā)，所以我們經(jīng)常會(huì)用vm作為（ViewMode）的縮寫，來(lái)引用我們的vue實(shí)例。
?
Vue中的數(shù)據(jù)與方法？
創(chuàng)建vue實(shí)例時(shí)，它會(huì)將data中找到的所有屬性添加到vue的反應(yīng)系統(tǒng)中，當(dāng)這些屬性的值發(fā)生變化時(shí)，視圖將反應(yīng)、更新，以匹配新值。
//我們的數(shù)據(jù)對(duì)象 var data = { a：1 }//將對(duì)象添加到Vue實(shí)例 var vm = new Vue（{ data：data }）//獲取實(shí)例上的屬性 //返回原始數(shù)據(jù)中的 屬性vm.a == data.a // => true//在實(shí)例上設(shè)置屬性 //也會(huì)影響原始數(shù)據(jù)vm.a = 2data.a // => 2// ...反之亦然data.a = 3vm.a // => 3
當(dāng)數(shù)據(jù)修改時(shí)，視圖會(huì)重新呈現(xiàn)，
如果你知道你以后需要一個(gè)屬性，但它開(kāi)始是空的或不存在的，你需要設(shè)置一些初始值。例如：
?
data：{ newTodoText：''，visitCount：0，hideCompletedTodos：false，todos：[]，error：null}?
模板語(yǔ)法：
插補(bǔ)：
?
（1）文本：最基本的數(shù)據(jù)綁定形式是使用“mustache”語(yǔ)法，雙花括號(hào)的文本差值。
< span >消息：{{msg}} </ span >?
mustache將替換msg相應(yīng)數(shù)據(jù)對(duì)象上的屬性值。每當(dāng)數(shù)據(jù)對(duì)象上的msg的屬性值發(fā)生變化時(shí)，它也會(huì)更新。
您還可以使用v-once指令執(zhí)行不會(huì)更新數(shù)據(jù)更改的一次性插值，但請(qǐng)記住，這也會(huì)影響同一節(jié)點(diǎn)上的任何其他綁定：
< span v-once >這永遠(yuǎn)不會(huì)改變：{{msg}} </ span >?
（2）原始HTML
雙花括號(hào)將數(shù)據(jù)對(duì)象中的“<a href = 'http://www.baidu.com'>點(diǎn)我</a>”屬性解釋為純文本，而不是HTML，要輸入真實(shí)的HTML，需要使用指令“v-html”
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Index</title><script src="vue.js"></script> </head> <body><div id = 'app'><h5 v-html = 'url'></h5></div><script>var app = new Vue({el:'#app',data: {url: "<a href = 'http://www.cnblogs.com/zsdbk'>message</a>",}})</script> </body> </html>注：在網(wǎng)頁(yè)上動(dòng)態(tài)呈現(xiàn)HTML可能非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致xss漏洞，所以請(qǐng)對(duì)信任的內(nèi)容進(jìn)行插值操作。
（3）屬性：
Mustaches不能再HTML中使用，但是可以用v-bind指令。
< button v-bind：disabled = “isButtonDisabled” >按鈕</ button >
如果數(shù)據(jù)對(duì)象中isButtonDisabled的屬性值是null,undefiend,false,那么disabled 屬性不會(huì)再當(dāng)前button標(biāo)簽中生效。
?
（4）使用JavaScript表達(dá)式；
vue.js 支持JavaScript中的所有數(shù)據(jù)綁定功能
例如：
{{ 號(hào) + 1 }}
三元運(yùn)算：
{{ 好？'是':‘不’}}
{{ message.split(''),reverse(''),join('') }}
這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個(gè)限制就是，每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面的例子都不會(huì)生效。
?
<!-- 這是語(yǔ)句，不是表達(dá)式 --> {{ var a = 1 }}<!-- 流控制也不會(huì)生效，請(qǐng)使用三元表達(dá)式 --> {{ if (ok) { return message } }}?
指令(directives)：
是帶有v-前綴的特殊特性。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM
<p v-if="seen">現(xiàn)在你看到我了</p>如果‘seen’的值為真，則在視圖中顯示所插入的文本內(nèi)容，否則則不顯示此標(biāo)簽。
（1）參數(shù)：
v-bind指令可以接收一個(gè)參數(shù)，并且響應(yīng)式的更新html特性。
<a v-bind:href="url">...</a>
在這里?href?是參數(shù)，告知?v-bind?指令將該元素的?href?特性與表達(dá)式?url?的值綁定。
?
v-on指令用于監(jiān)聽(tīng)DOM事件。
<a v-on:click="doSomething">...</a>在這里參數(shù)是監(jiān)聽(tīng)的事件名。
（2）修飾符：
修飾符（modifiers）是以半角句號(hào)“.”指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊的方式綁定。
例如，
.prevent?修飾符告訴?v-on?指令對(duì)于觸發(fā)的事件調(diào)用?event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
用于阻止form表單的submit默認(rèn)事件。(阻止? ? submit? ? ?.prevent)? ??
縮寫：
v-?前綴作為一種視覺(jué)提示，用來(lái)識(shí)別模板中 Vue 特定的特性。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為 (dynamic behavior) 時(shí)，v-?前綴很有幫助，然而，對(duì)于一些頻繁用到的指令來(lái)說(shuō)，就會(huì)感到使用繁瑣。同時(shí)，在構(gòu)建由 Vue.js 管理所有模板的單頁(yè)面應(yīng)用程序 (SPA - single page application)?時(shí)，v-?前綴也變得沒(méi)那么重要了。因此，Vue.js 為?v-bind?和?v-on?這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫：
v-bind?縮寫
<!-- 完整語(yǔ)法 --> <a v-bind:href="url">...</a><!-- 縮寫 --> <a :href="url">...</a>?
v-on?縮寫
<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething">...</a><!-- 縮寫 --> <a @click="doSomething">...</a>?
轉(zhuǎn)載于:https://www.cnblogs.com/zsdbk/p/9361576.html
總結(jié)
以上是生活随笔為你收集整理的day88 Vue基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： TimeLine CSS/Javascr
- 下一篇： vue路由的知识点