-
雙花括號(hào)是渲染方式查看全部
-
Vue需了解知識(shí)
查看全部 -
vue-validator：表單驗(yàn)證的組件；
vue-devtools：chroma的開發(fā)者工具；
vue-router：路由；
vue-cli：腳手架；
vue-touch：移動(dòng)端開發(fā)工具；
axios是一個(gè)基于Promise的HTTP請(qǐng)求客戶端，用來發(fā)送請(qǐng)求，也是vue2.0官方推薦的，同時(shí)不再對(duì)vue-resource進(jìn)行更新和維護(hù)；
vuex：vue的模塊管理工具；
查看全部 -
劃分組件！查看全部 -
v-text = {{}}+js數(shù)據(jù)
v-html在v-text基礎(chǔ)上會(huì)自動(dòng)解析標(biāo)記語言
查看全部 -
vue的重要選項(xiàng)和指令
查看全部 -
創(chuàng)建元素的時(shí)候，vue會(huì)將駝峰形式的標(biāo)簽轉(zhuǎn)化成小寫的-橫杠鏈接的形式。。。
comopents:{ ComponentA}
<component-a></component-a>查看全部 -
isFinished狀態(tài)切換（樣式切換等）
查看全部 -
isFinished的使用
查看全部 -
cnpm代替默認(rèn)的npm（因?yàn)閚pm在國(guó)內(nèi)網(wǎng)絡(luò)下很慢）
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
查看全部 -
store,js
const STORAGE_KEY = ‘todos-vuejs’
export defaule{ ? ?fetch:function(){ ? returnJSON.parse(window.localStorange.getItem(STORAGE_KEY) || '[]')
?},
save:function(items){? ? ????????????????window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
? ? ? ? }
}查看全部 -
1.5vuejs基礎(chǔ)框架代碼
根目錄下的index.html：項(xiàng)目入口，里面的標(biāo)簽<app></app>在vue中即表示載入組件app,入口文件默認(rèn)調(diào)在src里的main.js，main.js里注冊(cè)組件app這樣才能使用，main.js中會(huì)寫明組件來自于App.vue,
即import App from './App',import是es6的語法含義類似
var App=require('./App')
在App.vue中通過<template>,<script>,<style>共同具體實(shí)現(xiàn)app組件
export是es6語法，與import類似
data(){
????return {};
}是es6中的語法相當(dāng)于
function data(){
????return {};
}
查看全部 -
?
1.4vuejs組件的重要選項(xiàng)
new Vue({
data:{
????a:1,
????b:[]
},
methords:{
????doSomething:function(){
????????this.a++
????}
},
watch:{
????'a':function(val,oldVal){
????????console.log(val,oldVal)
????}
}
})
模版指令是html和vue對(duì)象的粘合劑，其寫在html中，常用的數(shù)據(jù)渲染模版指令有
v-text:處理了html格式
v-html:保存了html結(jié)構(gòu),{{}}
v-if:控制是否渲染相當(dāng)于jquery中的remove,
v-show:控制顯示隱藏display:none
渲染循環(huán)列表v-for
事件綁定v-on有兩種書寫方式,綁定的是methods中的方法
<button v-on:click="doThis"></button>
<button @click="doThis"></button>
屬性綁定v-bind
<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
查看全部 -
1.3*.vue到頁(yè)面
通過webpack這類打包工具將*.vue文件解析為*.html,*.js,*.css
其中js就是個(gè)view對(duì)象，vue對(duì)象就是數(shù)據(jù)層model,展示層就是html。
查看全部 -
?1.2vuejs開發(fā)環(huán)境搭建
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平臺(tái)的默認(rèn)包管理工具。
nodejs官網(wǎng)https://nodejs.org/zh-cn/下載nodejs安裝選擇add tp path
https://git-scm.com/downloads下載安裝git
若改變默認(rèn)路徑將其安裝到d:\nodejs才有以下操作，
可安裝后運(yùn)行cmd輸入命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
將node_global,node_cache都移到D:\nodejs目錄下 ，并將我的電腦》屬性》高級(jí)系統(tǒng)設(shè)置》環(huán)境變量》系統(tǒng)變量
添加變量名Node_Path值為D:\nodejs\node_global\node_modules即將默認(rèn)模塊路徑D:\nodejs\node_modules改為上面路徑
輸入命令
#全局安裝vue-cli
cnpm install -g vue-cli
#創(chuàng)建一個(gè)基于webpack模版的新項(xiàng)目（創(chuàng)建的位置就在cmd當(dāng)前目錄下）
vue init webpack my-vue001
#進(jìn)入項(xiàng)目目錄安裝依賴并運(yùn)行
cd my-vue001
npm install
npm run dev
查看全部
舉報(bào)