Vue:vue相關筆記

1、引入

經過<script src="./vue.js"></script>引入，也能夠引入在線的，我這個是從網上覆制的代碼，該名稱爲vue.js

2、使用

基本：經過new Vue({})的方式建立vue，使用el指定div的標籤，使用{{*}}的方式調用data的數據

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

	<script>
		new Vue({
			el: "#root",
			data: {
				message: "hello vue!"
			}
		})
	</script>
	</body>

3、標籤

v-text  表示引入所有文本
v-html  能夠轉義文本中的標籤
v-on:click  表示綁定點擊事件，縮寫@click
v-bind:title  表示title的值的數據與data中標籤的數據進行了綁定，縮寫爲:title
v-model 表示雙向數據綁定，即修改一個值，全部引用這個值的地方也會跟着改變

v-on:click的使用，須要與mothods方法結合使用，例：
<div id = "root" v-onclick="handleClick">aaa</div>
<script>
  new Vue({
    el:"#root",
    methods: {
       handleClick: function() {
          alert(aaa);
       }
    }
  })
</script>

v-bind:title的使用，表示屬性綁定，例：
<div id = "root" v-bind:title="'hello，' + title">hello world!</div>
<script>
  new Vue({
    el:"#root",
    data: {
      title:"this is title!"
    }
  })
</script>

v-model的使用，表示雙向屬性綁定，例：
<div id = "root">
<input v-model="title" />
<div>{{title}}</div>
</div>
<script>
  new Vue({
    el:"#root",
    data: {
      title:"this is title!"
    }
  })
</script>

4、vue中的標籤

el  表示new Vue的使用對象
data  key-value的鍵值對的方式來對應表示數據
computed  計算數值
watch   監聽器


computed標籤，用於計算最終結果並顯示
watch標籤，用於監聽某一個值的變化
例：
<div id="root">
  值一：<input v-model="firstValue" />
  值二：<input v-model="secondValue" />
  和：<div>{{finalValue}}</div>
  變化次數：<div>{{count}}</div>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      firstValue:'',
      secondeValue:''
      count: 0
    },
    computed: {
      finalValue: function() {
        return this.firstValue + this.sencondValue
      }
    },
    wacth: {
        count: function() {
          this.count ++
        }
    }
  })
</script>

5、v-if v-show v-for指令的使用

v-if  當內部的值位false的時候，是將該標籤從dom中刪除，一次性修改時能夠使用
v-show  當內部的值爲false的時候，是將display設置位none，屢次頻繁展現/隱藏時能夠使用
v-for  循環展現數據

v-if和v-show的展現樣式相同，具體不一樣參考上方介紹，例：
<div id="root">
 <div v-if="show">hello world</div>
 <button @click="handleClick">button</button>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      show:true
    }，
    methods: {
      handleClick: function() {
        this.show = !this.show;
      }
    }
  })
</script>

v-for是用於循環展現列表，例：
<div id="root">
  <ul>
    <li v-for="item of list">{{item}}</li>
    <li v-for="(item, index) of list" :key="index">{{item}}</li>
  </ul>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      list: [1,2,3]
    }
  })
</script>

6、todolist組件

組件分爲全局組件和局部組件

全局組件，例：
<todo-item></todo-item>
<script>
  Vue.component('todo-item', {
    props: ['content']  這裏用於接收參數
    template: '<li>{{content}}</li>'
  })
</script>

局部組件，例：
<todo-item></todo-item>
<script>
  var todoItem = {
    template: '<li>item</li>'
  }
  new Vue({
    el: "#root",
    components: {
      'todo-item': todoItem
    }
  })
</script>

7、組件與實例

組件中也能夠像Vue實例中那樣添加事件和方法

<todo-item></todo-item>
<script>
  Vue.component('todo-item', {
    props: ['content']  這裏用於接收參數
    template: '<li @click="clickMethod">{{content}}</li>',
    mothods: {
      clickMethod: function() {
        alert("aaa")
      }
    }
  })
</script>

 

第一篇：本博客爲vue相關的第一篇博客

下一篇：https://my.oschina.net/u/2430231/blog/3017541