Vue.js 起步_ZenDei技術網路在線

Vue.js 起步

-Advertisement-

通過實例來看下 Vue 構造器中需要哪些內容測試時這段代碼我直接寫在index.html中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script ...

通過實例來看下 Vue 構造器中需要哪些內容

測試時這段代碼我直接寫在index.html中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "cyy",
      url: "www.baidu.com",
      course: "學習vue"
    },
    methods: {
      details: function() {
        return  this.site + "開始學習vue~";
      }
    }
  })
</script>
</body>
</html>

效果圖

當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，html 視圖將也會產生相應的變化

上面那一長句其實我沒咋看懂，大概意思就是數據會雙向改變吧！

修改index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var data = { site: "cyy", url: "www.baidu.com", course: "學習vue"}
  var vm = new Vue({
    el: '#vue_det',
    data:data,
    methods: {
      details: function() {
        return  this.site + "開始學習vue~";
      }
    }
  })

  // 它們引用相同的對象！
  document.write(vm.site === data.site) // true
  document.write("<br>")

  // 設置屬性也會影響到原始數據
  vm.site = "cyy2"
  document.write(data.site + "<br>") // cyy2

  // ……反之亦然
  data.course = "學習vue.js"
  document.write(vm.course) // 學習vue.js
</script>
</body>
</html>

效果圖

除了數據屬性，Vue 實例還提供了一些有用的實例屬性與方法。它們都有首碼 $，以便與用戶定義的屬性區分開來。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var data = { site: "cyy", url: "www.baidu.com", course: "學習vue"}
  var vm = new Vue({
    el: '#vue_det',
    data:data,
    methods: {
      details: function() {
        return  this.site + "開始學習vue~";
      }
    }
  })

  document.write(vm.$data === data) // true
  document.write("<br>")
  document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
</body>
</html>

效果圖

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

函數的預設值與動態參數arguments的總結

在js函數與作用域,瞭解函數基本概念中，我們發現當函數的實參有一個沒有上傳的時候,對應的形參time展示的值就是undefined,那麼如何在不上傳time的情況下,解決這個預設值了?方法2種:1.if(time==undefined) 2. time=7;除此之外，函數的另外一個重要特征動態參數a... ...
nodejs對字元串進行base64轉換和解析

nodejs不支持使用atob和btoa 進行字元串base64轉換，轉換方法如下： // 轉為base64 var strToBase64 = new Buffer('aaabbbccc').toString('base64'); // base64反解析為字元串 var base64ToStr ...
[javascript] 利用chrome的overrides實時調試線上js

chrome的開發者工具，在source選項卡下，可以看到js的源代碼，有一個斷點調試功能，就是在js的源代碼行號那裡點擊一下，出現一個箭頭，當再次刷新頁面並且進行了相應操作時，就會停在斷點的地方。我們可以查看相應的變數值，在右側可以手動改變變數值，進行調試。這個地方有一個缺點，就是沒有辦法對代碼 ...
瀏覽器中常見的html語義化標簽

html標簽預設在瀏覽器中展示的樣式,html標簽的用途：語義化（明白每個標簽的用途,在什麼情況下使用此標簽合理）;標簽語義化好處:1.更容易被搜索引擎收錄2.更容易讓屏幕閱讀器讀出網頁內容。html常見標簽諸如:文本段落<p>,標題<h1-h6>,空格換行<br/>,強調<strong>or<e... ...
Vue.js 監聽屬性

可以通過 watch 來響應數據的變化以下實例通過使用 watch 實現計數器： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https:/ ...
Vue.js 計算屬性

計算屬性關鍵詞: computed。計算屬性在處理一些複雜邏輯時是很有用的。下麵是字元串反轉的一些寫法，看起來有點複雜 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> ...
vue迴圈語句

迴圈使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。 v-for 可以綁定數據到數組來渲染一個列表： <!DOCTYPE html> <html> <head> <meta charset= ...
Vue.js 條件與迴圈

條件判斷使用 v-if 指令： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2. ...