SSL測試 - 憑證申請

Vue.js 是一個專注於View的Framework

Use CDN

<script src="https://unpkg.com/vue"></script>

Static Value

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

var app = new Vue({
  el:'#app',
  data:{
    message:'Hello Vue.js!!'
  }
})

Conditionals

<div id="app">
    <h1>{{title}}</h1>
    <span v-if="isVisable">hello1</span>
    <span v-if="!isVisable">hello2</span>
</div>

var app = new Vue({
  el:'#app',
  data:{
    title:'ChapterX - Condition and Loop',
    isVisable:true
  }
})

Loop

<div id="app">
    <h1>{{title}}</h1>
    <ol>
      <li v-for="item in itemList">
        {{item.id}}-{{item.name}}
      </li>
    </ol>
</div>

var app = new Vue({
  el:'#app',
  data:{
    title:'ChapterX - Loop',
    itemList:[
      {id:'A001',name:'apple'},
      {id:'A002',name:'pineapple'},
      {id:'A003',name:'applepen'}
    ]
  }
})

EvenListener

<div id="app">
    <h1>{{title}}</h1>
    <p>String:<span>{{message}}</span></p>
    <button v-on:click="reverseString">ReverseString</button>
</div>

var app = new Vue({
  el:'#app',
  data:{
    title:'ChapterX - Loop',
    message:'live'
  },
  methods:{
    reverseString:function(){
      this.message = this.message.split('').reverse().join('');
    }
  }
})

EvenListener - inline statement

<div id="app">
  <h1>{{title}}</h1>
  <button v-on:click="counter++">Counter++</button>
  <p>The button above has been clicked <span style="color:#F00">{{counter}}   </span> times.</p>
  <button v-on:click="clearCounter">Clear Counter</button>
</div>

var app = new Vue({
  el:'#app',
  data:{
    title:'ChapterX - Loop',
    counter:0
  },
  methods:{
    clearCounter:function(){
      alert(this); //[object OBJECT]
      this.counter = 0;
    }
    showTargetName:function(event){
      if(event){
        alert(event.target.tagName); //[BUTTON]
      }
    }
  }
})

EvenListener - 直接呼叫方法

<div id="app">
    <button v-on:click="say('hi')">SayHi</button>
    <button @click="say('Hello')">SayHello</button>
</div>

var app = new Vue({
  el:'#app',
  methods:{
    say:function(message){
      alert(message)
    }
  }
})

add event

<div id="app">
    <button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>

var app = new Vue({
  el:'#app',
  methods:{
    warn:function(msg, event){
      if(event){
        event.preventDefault()
        alter(msg)
      }
    }
  }
})

---

Components

<div id="app">
    {{ message }}
    <menu-section></menu-section>
    <description-section></description-section>
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    components: {
        'menu-section': {
            template: '<ul><li v-for="item in menuItems">{{ item.text }}</li></ul>',
            data: function() {
                return {
                    menuItems: [
                    	{text: 'About me'},
                    	{text: 'Articles'},
                    	{text: 'contact'}
                    ]
                }
            }
        },
        'description-section': {
            template: '<p>{{ text }}</p>',
            data: function() {
                return {
                    text: 'Hello, I am Ralph.'
                }
            }
        }
    }
});

Component by Template

<div id="app">
    <h1>{{Title}}</h1>
    <h3>{{subTitle}}</h3>
    <menu-section/>

    <!-- 新增Component Template -->
    <template id="menuTemplate">
      <h3>
        <ul>
          <li v-for="item in itemList">{{item.text}}</li>
        </ul>
      </h3>
    </template>
</div>

var app = new Vue({
  el:'#app',
  data:{
    Title:'Chapter3',
    subTitle:'Component by template'
  },
  components:{
    'menu-section':{
      template:'#menuTemplate',
      data:function(){
        return {itemList:[{text:'1'},{text:'2'},{text:'3'}]}
      }
    }
  },
})

---

透過 Vue-loader 編譯

所有的HTML跟Template混在一起，非常亂，可以拆分為.vue的檔案出來

將HTML中分離出.vue (Vue file)

/* Menu.vue */
<template>
	<ul>
		<li v-for="item in menuItems">{{ item.text }}</li>
	</ul>
</template>

<script>
export default {
	data: function() {
		return {
			menuItems: [{
            text: 'About me'
          }, {
            text: 'Articles'
          }, {
            text: 'contact'
          }]
       }
   }
}
</script>

<style>
/* 樣式也可以包進來 ._. */
.original-white {
	color: #fff;
}
</style>

參考來源
https://vuejs.org/v2/guide/
https://ithelp.ithome.com.tw/articles/10186730