Vue 入門，Vue屬性和指令

時間 2019-11-11

標籤 vue 入門屬性指令简体版

原文原文鏈接

初步認識vue

github地址：https://github.com/jiaoshibo/vuehtml

vue是一套構建用戶界面的漸進式框架，是mvvm框架的一種。vue採用了自底向上增量開發的設計，其核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。vue

vue有三個部分組成 : 視圖-數據-視圖模型。視圖即HTML部分。git

vue的引入：github

<script src="https://unpkg.com/vue"></script>
//或者直接引入文件
<script src="js/vue.js"></script>

聲明式渲染

vue的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染進 DOM：segmentfault

<div id="app">
    {{message}}
</div>

<script>
    var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
    })
</script>

就這樣，數據和DOM進行了綁定，視圖將數據引入，並進行渲染，顯示出來，並且元素是響應式的，打開控制檯，修改 app.message 的值，就會發現視圖的文本也會相應的更新。數組

除了文本插值，咱們還能夠使用指令的方式綁定DOM元素屬性。app

<div id="app-2">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>
<script>
    var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '頁面加載於 ' + new Date().toLocaleString()
    }
    })
</script>

如上，v-bind 屬性被稱爲指令，其前綴 v- 表示其爲vue提供的特殊屬性。這裏該指令的做用是：「將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致」。框架

條件與循環

控制一個元素的顯示與隱藏mvvm

<div id="app-3">
    <p v-if="seen">顯示</p>
</div>
<script>
    var app3=new Vue({
        el:"#app-3",
        data:{
            seen:true
        }
    })
</script>

若是在控制檯輸入 app3.seen=false ，你就發現上例的文本隱藏了。組件化

利用 v-for 指令綁定數組的數據來渲染一個項目列表

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
    var app4=new Vue({
        el:"#app-4",
        data:{
            todos:[
                {text:"HTML"},
                {text:"JAVASCRIPT"},
                {text:"VUE.JS"},
            ]
        }
    })
</script>

1.HTML
2.JAVASCRIPT
3.VUE.JS

在控制檯輸入 app3.todos.push({text:"CSS"}) ，列表中會增長一個新項

處理用戶輸入

利用 v-on 綁定一個事件監聽器，使用戶和應用之間進行互動

<div id="app-5">
    <p>{{message}}</p>
    <input type="button" value="逆轉消息" v-on:click="reverse">
</div>
<script>
    var app5=new Vue({
        el:"#app-5",
        data:{
            message:"Hello world!"
        },
        methods:{
            reverse:function(){
                this.message=this.message.split("").reverse().join("")
            }
        }
    })
</script>

經過 v-model 指令，能夠輕鬆實現表單輸入和應用狀態之間的雙向綁定

<div id="app-6">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
<script>
    var app6=new Vue({
        el:"#app-6",
        data:{
            message:"hello"
        }
    })
</script>

組件化應用構建

使用 v-bind 指令將todo傳到每個重複的組件中

<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryLIst" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>
<script>
    Vue.component("todo-item",{
        props:["todo"],
        template:"<li>{{todo.text}}</li>"
    })
    var app7=new Vue({
        el:"#app-7",
        data:{
            groceryLIst:[
                {id:0,text:"JAVASCRIPT"},
                {id:1,text:"HTML"},
                {id:2,text:"VUE"}
            ]
        }
    })
</script>