Vue.js-Day01

Clect 發布于2019-08-01 16:34 / 1942人閱讀

摘要：現在，我們可以使用指令將待辦項傳到每一個重復的組件中現在我們為每個提供待辦項對象待辦項對象是變量，即其內容可以是動態的蔬菜奶酪隨便其他什么人吃的東西

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

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

1.文本插值


      {{ message }}

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

2.綁定在標簽上


  
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  


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

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

處理數據時，經常會用到if判斷和循環，在vue里面也有這些應用

1.條件判斷


  現在你看到我了


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

2.循環


  
    
      {{ todo.text }}
    
  


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

我們還可以給DOM綁定一個調用 Vue 實例方法的事件監聽器：


  {{ message }}
  


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

雙向數據綁定


  {{ message }}
  


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

組件
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例，在 Vue 中注冊組件很簡單：

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

現在你可以用它構建另一個組件模板：

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

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

現在，我們可以使用 v-bind 指令將待辦項傳到每一個重復的組件中：


  
    
    
    
  


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

GPU云服務器云服務器 php01 Beta01 java01++ database01

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50608.html

學習Vue.js-Day2

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

megatron 2019-08-02 16:03 評論0 收藏0
學習Vue.js-Day2

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

BakerJ 2019-08-29 16:36 評論0 收藏0
學習Vue.js-Day2

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

Zhuxy 2019-08-23 11:42 評論0 收藏0
學習Vue.js-Day1

摘要：學習內容，基本語法和概念，打包工具，實戰操作參考文獻官網官方資料庫全家桶全家桶文檔概念前端框架借助可以實現手機開發前端框架是一套構造用戶界面的框架，只關于視圖層前端的主要工作室跟用戶界面打交道，中的，實現界面效果框架是為了提高開發學習內容 1，Vue基本語法和概念 2，打包工具 Webpack , Gulp3，實戰操作參考文獻：官網： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 評論0 收藏0