成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Vue.js-Day01

Clect / 1951人閱讀

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

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

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

1.文本插值


      {{ message }}


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

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


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



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

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

處理數(shù)據(jù)時(shí)，經(jīng)常會(huì)用到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: "整個(gè)牛項(xiàng)目" }
    ]
  }
})

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


  
{{ 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 里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例，在 Vue 中注冊(cè)組件很簡(jiǎn)單：

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

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

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

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

    現(xiàn)在，我們可以使用 v-bind 指令將待辦項(xiàng)傳到每一個(gè)重復(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50608.html

    相關(guān)文章

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

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

      megatron 評(píng)論0 收藏0

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

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

      BakerJ 評(píng)論0 收藏0

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

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

      Zhuxy 評(píng)論0 收藏0

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

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

      Cheriselalala 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <