[Vue.js] 基本语法

(以下文章适用於Vue.js 2.X版本)

• Vue.js 官方手册

起手式

1. 引入 Vue.js
2. new 一个 Vue 物件

   var vm = new Vue({
   
   })
   

   • vm: view model
3. 挂载 Vue 节点(将 Vue 挂载到指定的 DOM 元素，以 id 指定)

   var vm = new Vue({
       el: "#app"
       ...
   })
   - el: 挂载指定的物件(element)，使其&其所有子物件都可以应用 Vue
   

最基本的 Vue 物件就建立起来了。

{{ }}

• 可直接塞入data内容或直接写JS输出结果

Directives (指令)

v-model

#app
    input(v-model="username" placeholder="your name")
    p(v-if="username") hi! {{username}}

var vm = new Vue({
    el: "#app",
    data: {
        username: ''
    }
})

v-on (简写 @) 事件

<div id="app">
    <p>click {{ num }} 下</p>
    <input type="submit" value="click" v-on:click="clickNum">
</div>

var vm = new Vue({
    el: "#wrap",
    ... ,
    methods: {
        clickNum(){
        ...
        }
    }
})

v-for

<div id="app">
    <p>hi!我是 {{name}}</p>
    <ul v-for="friend in friends">
      <li>{{friend}}</li>
    </ul>
</div>

var vm = new Vue({
    el: "#app",
    data:{
        name: "Eudora",
        friends:['Amy','Betty','Claire']
    }
})

来些小栗子：

输入文字即时显示

>>Codepen Demo

<div id="app">
  <input v-model="username" placeholder="your name"/>
  <p v-if="username">hi! {{username}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        username: ''
    }
})

Class 切换

>>Codepen Demo

<div id="app">
  <ul>
    <li :class="{'active':tab=='menu1'}" @click="tab='menu1'">menu1</li>
    <li :class="{'active':tab=='menu2'}" @click="tab='menu2'">menu2</li>
    <li :class="{'active':tab=='menu3'}" @click="tab='menu3'">menu3</li>
  </ul>
</div>

var vm = new Vue({
	el: "#app",
	data: {
        tab: 'menu1'
    }
})

.active{
    ...
}

个人 Blog: https://eudora.cc/