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