JavaScript

淺談Angular 的變化檢測的方法，淺談angularChange Detection (變化檢測) 是 Angular 2 中最重要的一個特性。當組件中的資料發生變化的時候，Angular 2 能檢測到資料變化並自動重新整理視圖反映出相應的變化。在介紹變化檢測之前，我們要先介紹一下瀏覽器中渲染的概念，渲染是將模型映射到視圖的過程。模型的值可以是 JavaScript 中的未經處理資料類型、對象、數組或其他資料對象。然而視圖可以是頁面中的段落、表單、按鈕等其他元素，這些頁面元素內部使用

vue-star評星組件開發執行個體，vue-star執行個體star檔案夾下建立Star.vue，及相關的圖片資訊。便於組件的就近維護Star.vue：<template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>

vue 實現剪裁圖片並上傳伺服器功能，vue剪裁預覽連結點擊預覽如下所示，大家感覺不錯，請參考實現代碼。 需求 [x] 預覽：根據選擇映像大小自適應填充左側裁剪地區 [x] 裁剪：移動裁剪框右側預覽地區可即時預覽 [x] 上傳&清空：點擊確認上傳裁剪圖片，點擊取消按鈕清空映像 [ ] 裁剪框可調節大小 實現步驟methods:funName() - 對應源碼中methods中的funName方法data:dataName - 對應源碼中data中的dataName資料1.

解決VUEX相容IE上的報錯問題，vuexie在IE 上使用Vuex的過程中，出現如下錯誤：SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser. 解決方案：1、先安裝babel-polyfillnpm install --save-dev babel-polyfill2、webpack.base.config.js下修改檔案entry: { 'babel-polyfill': 'babel-polyfill',

Node.js readline模組與util模組的使用，node.jsreadline1. 使用readline模組逐行讀取流資料1.1. 建立Interface對象在readline模組中，通過Interface對象的使用來實現逐行讀取流資料的處理。因此首先要建立Interface對象，在readline模組中，可以通過createInterface方法來建立Interface對象.readline.createInterface(options),options為一個對象，屬性如下

Vuex中mutations與actions的區別詳解，vuexmutations區分 actions 和 mutations 並不是為瞭解決競態問題，而是為了能用 devtools 追蹤狀態變化。事實上在 vuex 裡面 actions 只是一個架構性的概念，並不是必須的，說到底只是一個函數，你在裡面想幹嘛都可以，只要最後觸發 mutation 就行。非同步競態怎麼處理那是使用者自己的事情。vuex 真正限制你的只有 mutation 必須是同步的這一點（在 redux 裡面就好像

在vue中封裝可複用的組件方法，vue封裝複用組件本次封裝的組件以toast組件為例以前使用移動端ui外掛程式時，通過一句代碼比如 $.toast( ‘ 需要顯示的內容 ' )，從而在頁面上展示這段文字，並在一定時間後消失。現在我們也嘗試自己封裝toast組件。準備工作：vue-cli腳手架工程先看一下涉及到的檔案目錄：這次的封裝主要涉及的檔案是Toast.vue toast.js Hello.vue，主要思路如下：① Toast.vue是我們要使用的toast組件；②

Vue中的slot使用插槽分發內容的方法，vueslot本文題材來自：https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9<slot></slot>標籤，簡單來說就是預留位置，它會幫你佔好位置，等你需要的時候直接將html傳入，它會幫你顯示出來。也有人說：props可以將資料從父組件傳入子組

vue.js 擷取select中的value執行個體，vue.jsvalue如下所示：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="./vue.js"></script></head><body&

詳解vue-cli 快速搭建單頁應用之遇到的問題及解決辦法，詳解vue-cli一、報錯內容類別似：Expected indentation of 0 spaces but found 4將 build 檔案下的 webpack.base.conf.js 檔案裡面的下面一段代碼注釋掉（eslint-loader內容）,重新運行.二、報錯內容： Newline required at end of file but not found只需要在 js css 等後面再加一行（空行）就可以了或者將

基於cropper.js封裝vue實現線上圖片裁剪組件功能，cropper.jsvue如下所示，github:demo下載cropper.jsgithub:cropper.js官網（demo）cropper.js 安裝 npm或bower安裝npm install cropper# orbower install cropperclone下載：git clone

淺談Vue Element中Select下拉框選取值的問題，vueelement之前寫了.一個原生的select的，因為展示效果原因，給刪除掉了，忘記儲存代碼了，現在大家展示使用elementUI的下拉框封裝一個組件，供咱們項目中經常調用，減少代碼量。html：<el-select v-model="ite" placeholder="請選擇" value-key="mateGroup"> <el-option style="width: auto" :disabled=

vue項目tween方法實現返回頂部的範例程式碼，vuetween一、情境tween.js是一款可產生平滑動畫效果的js動畫庫當你要實現一個返回頂部的功能時候你會怎麼做，大部分人會使用document.body.scrollTop =0；這麼寫就實現了功能，不過要更加的細膩一點我們不妨用tween的緩動來實現，看看效果如何吧。之前我們寫過tween的相關文章，這裡不做介紹了。二、代碼<!DOCTYPE html><html> <head>

Spring Boot/VUE中路由傳遞參數的實現代碼，springvue在路由時傳遞參數，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數。如：http://localhost:8080/router/tang/101?type=spor&num=12。下面根據代碼看一下，VUE 和 Spring Boot 中各自是如何處理傳遞和接受參數的。Spring Bootpackage com.tang.demo1.controller; import

解決vue 更改計算屬性後select選中值不更改的問題，vueselect先上代碼：//...<body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select>

vue將時間戳記轉換成自訂時間格式的方法，vue時間格式1、首先建立一個date.js檔案，寫入如下代碼：export function formatDate (date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));}let o = {'M+': date.getMonth() + 1,'d+':

vue slot 在子組件中顯示父組件傳遞的模板，vueslot父組件使用沒有指定slot屬性，預設為default在slot中可以使用預設值，如果父組件沒有傳遞對應的slot，則會顯示預設值<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="vue.js"

在Vue中使用Compass的方法，vue使用compass寫作動機拖了蠻久的，總算下定決心要給自己寫一個個人網站，不僅要看起來狂拽酷炫，技術也要OK，所以趁此機會也將自己不熟悉的技術拿來鍛煉一下。網站打算用Vue來作為前端架構，Css用Sass來寫。但是尚未正式開始就突然想到，既然Sass有Compass這麼有力的工具不用豈不是步子邁小了，然而找了一輪發現都是說怎樣在Vue項目中使用Sass而沒有Compass的解決方案。但是這麼放棄一個強大的工具練習不了又不甘心，於是各種繼續搜尋和嘗試後總算

vue實現裁切圖片同時實現放大、縮小、旋轉功能，vue裁切本篇文章主要介紹了vue實現裁切圖片同時實現放大、縮小、旋轉功能，分享給大家，具體如下：實現效果： 裁切指定地區內的圖片 旋轉圖片 放大圖片 輸出bolb 格式資料 提供給 formData 對象大概原理：利用h5 FileReader 對象， 擷取 <input type="file"/> “上傳到瀏覽器的檔案” ，檔案形式 為base64形式， 把 base64 賦給canvas的上下文。然後給canvas

Vuejs在v-for中,利用index來對第一項添加class的方法，vuejsv-for（1）在v-for中，利用index來對第一項添加class 在CODE上查看代碼片派生到My Code片<a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">