Vue基礎---->VueJS的使用(一)


  Vue.js是一個構建數據驅動的web界面的庫。它的目標是通過盡可能簡單的API 實現響應的數據綁定和組合的視圖組件,今天我們就開始vue.js的學習。

 

vue的安裝及使用

一、vue的下載地址:http://vuejs.org/js/vue.js

二、vue的第一個例子:

項目的結構如下,引入vue.js

vue1.html的代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue1</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" name="message" v-model="message" />
    </div>
    <script type="text/javascript" src="js/vue1.js"></script>
</body>
</html>

vue1.js的代碼:

var app = new Vue({
    el: '#app',
    data: {
        message: "hello world"
    }
});

運行的效果如下:

注意:

  • el: '#app' 就是管理id為app的部分。
  • vue1.js的引入在頁面代碼的后面,否則在某些瀏覽器上會出現找不到#app的元素的錯誤。

 

vue的簡單使用

以下的所有例子都是基於上述的例子的。這里只寫增加的代碼

 一、列表的渲染:v-for的使用

在<div id="app">中加入以下代碼:

<ul>
    <li v-for="person in persons">
      {{ person.name }} loves {{person.love}}
    </li>
</ul>

在vue1.js的data中加入以下代碼:

persons: [
    {name: "huhx", love: "code"},
    {name: "chenhui", love: "book"}
]

運行效果如下:

二、處理輸入: v-on:click的使用

在<div id="app">中加入以下代碼:

<button v-on:click="changeContent('huhx')">Click on!</button>

 在vue1.js中加入以下代碼:

methods: {
    changeContent: function(element) {
        this.message = "I love " + element;
    }
}

 

友情鏈接

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM