關于vue的初體驗 · 前端知識備忘錄

[TOC] ### 首先我們在我們頭部引入我們的鏈接下面有兩個版本供我們選擇 ~~~  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ~~~ ~~~  <script src="https://cdn.jsdelivr.net/npm/vue"></script> ~~~ Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統 ``` <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul>{{ message }}</ul> </div> </body> <script type="text/javascript" src="js/vue.js"></script> </html> //vue.js var app = new Vue({ el:'#app', data:{ message:'hellow' } }) ``` 我們可以在控制臺上調試一下代碼 ![](https://box.kancloud.cn/97eb52e4e1d555a325bc7387ff7a4737_663x285.png) 可以看見我們的內容馬上就渲染到了頁面上去 ### `v-if`屬性類似于JavaScript的if判斷 ``` <div id="app"> <ul v-if = 'seen'>{{ message }}</ul> </div> var app = new Vue({ el:'#app', data:{ message:'hellow' seen : true // true 為可視 false 為不可視 } }) ``` ### `v-for` 屬性類似與JavaScript的for循環 ``` <div id="app"> <ul> <li v-for='todo in todos'>{{todo.text}}</li> </ul> </div> var app = new Vue({ el:'#app', data:{ todos:[ { text: 'name' } { text: 'number' } ] } }) //渲染效果 1. name 2. number ``` ### `v-on:click` 類似與給標簽綁定了點擊事件`on`和jquery的綁定相像 ``` <div id="app" > <p>{{message}}</p> <button v-on:click='reverse'>點我</button> </div> var app = new Vue({ el:'#app', data:{ message: "hellow bb!" }, methods: { reverse:function(){ this.message = this.message.split('').reverse().join(''); } } }) ``` ### `v-model` 可以指向使用在input中傳入輸入數據此處的`v-model`直接指向p標簽的message所以會同步修改內容 ``` <div id="app" > <p>{{message}}</p> <input v-model='message'> </div> var app = new Vue({ el:'#app', data:{ message:'hellow' } }) ``` ### `component` 組件組件是可復用的 Vue 實例，且帶有一個名字：在這個例子中是`<button-counter>`。我們可以在一個通過`new Vue`創建的 Vue 根實例中，把這個組件作為自定義元素來使用： ``` <div id="app" > <ul> <todo-item></todo-item> </ul> </div> ??Vue注意大寫 Vue.component('todo-item', { template: '<li>This is a todo</li>' }) var app = new Vue({ el: '#app' }) ``` ### 注冊組件及構建模版 ``` // 定義名為 todo-item 的新組件 Vue.component('todo-item', { template: '<li>這是個待辦項</li>' }) //組件模版<todo-item></todo-item> ``` ### `v-bind`綁定元素特性`props`類似于一個自定義特性 ``` <div id="app" > <ol> <todo-item v-for='item in groceryList' v-bind:todo = 'item' v-bind:key = 'item.id' ></todo-item> </ol> <div v-for='item in groceryList'>{{item}}</div> </div> Vue.component('todo-item', { props:['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data:{ groceryList:[ { id: 0 , text: 'you'}, { id: 1 , text: 'me'}, { id: 2 , text: 'he'}, { id: 3 , text: 'she'} ] } }) ``` 這里我們遇到了一點新東西。你看到的`v-bind`特性被稱為**指令**。指令帶有前綴`v-`，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的`title`特性和 Vue 實例的`message`屬性保持一致”。