亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue.js-Day01

Clect / 2012人閱讀

摘要：現(xiàn)在，我們可以使用指令將待辦項(xiàng)傳到每一個重復(fù)的組件中現(xiàn)在我們?yōu)槊總€提供待辦項(xiàng)對象待辦項(xiàng)對象是變量，即其內(nèi)容可以是動態(tài)的蔬菜奶酪隨便其他什么人吃的東西

本來是準(zhǔn)備學(xué)習(xí)angular的，但是總是卡在開頭看不下去，干脆換個框架，那就vue吧!
使用jquery要引入特定的庫，那使用vue也類似，可以在頭部引入

我覺得vue最重要的理念就是將值和DOM綁定在一起，將數(shù)據(jù)渲染進(jìn)DOM有以下幾種方式：

1.文本插值


      {{ message }}


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

2.綁定在標(biāo)簽上


  
    鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
  



var app2 = new Vue({
  el: "#app-2",
  data: {
    message: "頁面加載于 " + new Date()
  }
})

這里類似v-bind的屬性稱之為（vue的）指令，該指令的作用是：“將這個元素節(jié)點(diǎn)的 title 屬性和 Vue 實(shí)例的 message 屬性保持一致”。

處理數(shù)據(jù)時，經(jīng)常會用到if判斷和循環(huán)，在vue里面也有這些應(yīng)用

1.條件判斷


  
現(xiàn)在你看到我了




var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true
  }
})

2.循環(huán)


  
    
    
  1. 
      {{ todo.text }}
    
    2. 
  




var app4 = new Vue({
  el: "#app-4",
  data: {
    todos: [
      { text: "學(xué)習(xí) JavaScript" },
      { text: "學(xué)習(xí) Vue" },
      { text: "整個牛項(xiàng)目" }
    ]
  }
})

我們還可以給DOM綁定一個調(diào)用 Vue 實(shí)例方法的事件監(jiān)聽器：


  
{{ message }}

  



var app5 = new Vue({
  el: "#app-5",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
})

雙向數(shù)據(jù)綁定


  
{{ message }}

  



var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue!"
  }
})

組件
在 Vue 里，一個組件本質(zhì)上是一個擁有預(yù)定義選項(xiàng)的一個 Vue 實(shí)例，在 Vue 中注冊組件很簡單：

// 定義名為 todo-item 的新組件
Vue.component("todo-item", {
  template: "
  • 這是個待辦項(xiàng)
    • "
})

    現(xiàn)在你可以用它構(gòu)建另一個組件模板：

    但是這樣會為每個待辦項(xiàng)渲染同樣的文本，這看起來并不炫酷，我們應(yīng)該能將數(shù)據(jù)從父作用域傳到子組件。讓我們來修改一下組件的定義，使之能夠接受一個屬性：

    Vue.component("todo-item", {
  // todo-item 組件現(xiàn)在接受一個
  // "prop"，類似于一個自定義屬性
  // 這個屬性名為 todo。
  props: ["todo"],
  template: "
  • {{ todo.text }}
    • "
})

    現(xiàn)在，我們可以使用 v-bind 指令將待辦項(xiàng)傳到每一個重復(fù)的組件中：

    
  
      
    
    
    
  
    

    

Vue.component("todo-item", {
  props: ["todo"],
  template: "
  • {{ todo.text }}
    • "
})
var app7 = new Vue({
  el: "#app-7",
  data: {
    groceryList: [
      { text: "蔬菜" },
      { text: "奶酪" },
      { text: "隨便其他什么人吃的東西" }
    ]
  }
})

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50608.html

    相關(guān)文章

    • 學(xué)習(xí)Vue.js-Day2

      書接上文/思考反饋 react,ng,vue作用差不多，那各個都有什么特點(diǎn)啊，實(shí)際工作中應(yīng)該用哪一個？ 答：其實(shí)在實(shí)際工作中，組員會通過討論而選擇框架；這三個框架都能解放你的工作量，也適合做單頁面應(yīng)用【今天又是努力的一天】 案例：品牌管理案例 結(jié)合第一天所學(xué)知識，做案例；螺旋式提升開發(fā)能力 案例要點(diǎn)： 添加新品牌 刪除品牌 篩選品牌 showImg(https://segmentfault.c...

      megatron 評論0 收藏0

    • 學(xué)習(xí)Vue.js-Day2

      書接上文/思考反饋 react,ng,vue作用差不多，那各個都有什么特點(diǎn)啊，實(shí)際工作中應(yīng)該用哪一個？ 答：其實(shí)在實(shí)際工作中，組員會通過討論而選擇框架；這三個框架都能解放你的工作量，也適合做單頁面應(yīng)用【今天又是努力的一天】 案例：品牌管理案例 結(jié)合第一天所學(xué)知識，做案例；螺旋式提升開發(fā)能力 案例要點(diǎn)： 添加新品牌 刪除品牌 篩選品牌 showImg(https://segmentfault.c...

      BakerJ 評論0 收藏0

    • 學(xué)習(xí)Vue.js-Day2

      書接上文/思考反饋 react,ng,vue作用差不多，那各個都有什么特點(diǎn)啊，實(shí)際工作中應(yīng)該用哪一個？ 答：其實(shí)在實(shí)際工作中，組員會通過討論而選擇框架；這三個框架都能解放你的工作量，也適合做單頁面應(yīng)用【今天又是努力的一天】 案例：品牌管理案例 結(jié)合第一天所學(xué)知識，做案例；螺旋式提升開發(fā)能力 案例要點(diǎn)： 添加新品牌 刪除品牌 篩選品牌 showImg(https://segmentfault.c...

      Zhuxy 評論0 收藏0

    • 學(xué)習(xí)Vue.js-Day1

      摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實(shí)現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實(shí)戰(zhàn)操作 參考文獻(xiàn)：官網(wǎng)： https://cn.vuejs.org...

      Cheriselalala 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <