node vue項目開發(fā)

看了近一周的vue開發(fā)，有諸多感觸，我之前接觸過react、angular所以特別想學(xué)學(xué)久仰大名的vue。學(xué)習(xí)半天以后發(fā)現(xiàn)，接觸到的東西多了，學(xué)習(xí)起來就是容易很多，vue的指令我能個聯(lián)想到angular的指令，vue組件化設(shè)計類似于react的組件化設(shè)計，包括一些router的設(shè)置跟react里的路由或者nodejs里的路由都差不多，vuex更是根據(jù)redux、flux改寫的，雖然我還搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs沒有太大的區(qū)別。使用vue可以完全脫離jq，雖然我還沒感受到不用jq有什么神奇的趕腳，但是我覺得這種雙向數(shù)據(jù)綁定的還是挺方便的，此文檔用來記錄我學(xué)習(xí)vue的一些新的知識和想法。

指令

v-bind 主要用于動態(tài)綁定DOM元素屬性，即元素屬性實際的值是 有vm實例中的data屬性提供的。

v-model 主要對表單元素進(jìn)行雙向數(shù)據(jù)綁定，在修改表單元素的值時，實例vm中對應(yīng)的vm對應(yīng)的屬性也同時更新。

v-if,v-show,v-else這幾個指令來說明模板和數(shù)據(jù)間的邏輯關(guān)系

• v-if和v-else的作用是根據(jù)數(shù)值來判斷是否輸出該dom元素，以及包含的子元素。
  eg:
  <div v-if="yes">yes</div> 當(dāng)vm實例中的data.yes=true時，模板引擎會編 譯這個dom節(jié)點，輸出 <div>yes</div>值得注意的是：v-else要緊跟v-if否則不起作用。
• v-show與v-if的效果差不多，都是通過判斷真假顯示內(nèi)容，唯一不同的是，v-show不顯示的時候是display:none,也就是保留了dom節(jié)點，但是v-if不會。

v-for 用于列表渲染，可以循環(huán)遍歷數(shù)組和對象,注意v-for="b in 10"目前指的是1-10的迭代

v-on 事件綁定，簡寫@:

v-text <p v-text="msg"><p>相當(dāng)于innerText,與{{msg}}相比，避免了閃現(xiàn)的問題。

v-HTML 類似于innerHTML,也可以避免閃現(xiàn)

v-el 這個指令相當(dāng)于給dom元素添加了個索引，例如<div v-el="demo">this is a test </div>,如果想獲取當(dāng)前dom里的值,可以vm.$els.demo.innerText,注意：html不區(qū)分大小寫，駝峰式的寫法會自動轉(zhuǎn)成小寫，可以通過-的方式轉(zhuǎn)換成大寫。

v-ref 與v-el類似 通過vim.$refs訪問

v-pre 跳過編譯這個元素

v-cloak 感覺沒啥用

v-once新增內(nèi)置指令，用于標(biāo)明元素或組件只渲染一次。

模板渲染

v-for 主要用于列表渲染，講根據(jù)接受到的數(shù)組重復(fù)渲染v-for綁定到的dom元素及內(nèi)部子元素，并可以通過設(shè)置別名的方式，獲取數(shù)組內(nèi)數(shù)據(jù)渲染到節(jié)點中。
eg:

<ul v-for="item in items"><li>{{item.title}}</li><li>{{item.description}}</li></ul>

v-for在vue1.x內(nèi)置$index變量，在vue.2x移除了此變量，直接使用{{index}},例如<li v-for="(item,index) in items">{{index}}</li>

修改數(shù)據(jù)

• 直接修改數(shù)組可以改變數(shù)據(jù)

• 不能直接改變數(shù)組的情況

  • 1.vm.items[0]={},這種情況下無法修改，解決：vm.item.$set(0,{})或者vm.$set('item[0]',{})
  • 2.vm.item.length=0

v-for遍歷對象，可以使用（key,value）的形式自定義key變量。

<li v-for="(key,value)" in objectDemo>{{key}}:{{vue}} </li> 注意：在vue1.x內(nèi)置`$key`變量，在vue.2x移除了此變量，直接使用`{{key}}`

template標(biāo)簽

用來作為模板渲染的跟節(jié)點，但是渲染出來不存在此節(jié)點

事件綁定與監(jiān)聽

v-on可以綁定實例屬性methods中的方法作為事件的處理器，v-on:后面可以接受所有的原生事件名稱。

• 簡寫 @:
• 可以綁定methods函數(shù)，也支持內(nèi)聯(lián)js，但是僅限一個語句。
• 綁定methods函數(shù)和內(nèi)聯(lián)js都可以獲取原生dom元素，event.
• 綁定多個事件時，為順序執(zhí)行。

ui組件 餓了嗎

使用指南

安裝

npm install cnpm install element-ui --save-dev

引入文件main.js

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI, { size: 'small' })

使用

• 在components文件夾下新建一個頁面，從餓了嗎找到自己喜歡的組件，比如走馬燈 Carousel.vue 把代碼復(fù)制到這個頁面
• 在需要的此組件的文件下，比如APP.vue里

import Carousel from './components/Carousel' export default {name: 'app',components: { //components加sCarousel: Carousel} }

• 在模板里載入組件

<template> <div id="app"><Carousel></Carousel><img src="./assets/logo.png"><router-view/> </div> </template>

• 這樣就可運行了

自定義組件

例如我想在加一個導(dǎo)航組件名字叫做headerBar,我在components里加一個文件叫做headerBar.vue：

<template><h2>這是一個導(dǎo)航</h2> </template>

使用：
在App.vue中需要先導(dǎo)入這個組件，再注冊這個組件，最后使用它

<template> <div id="app"><headerBar></headerBar>//以標(biāo)簽形式使用，注意：避免使用原生html的標(biāo)簽<img src="./assets/logo.png"><router-view/> </div> </template><script> import headerBar from './components/headerBar.vue' //導(dǎo)入組件 export default {name: 'app',components: {headerBar: headerBar //注冊組件} }

前后端分離

習(xí)慣了用node做全棧開發(fā),現(xiàn)在用vue-webpack做前端開發(fā)，node做后端開發(fā)也挺爽的，前后端實現(xiàn)了分離。

啟動后端接口

cd back
cnpm install
npm run dev

啟動前端服務(wù)器

cd front
cnpm install
npm start

進(jìn)入登錄頁面，點擊登錄，控制臺打印訪問成功的信息,并成功跳轉(zhuǎn)到helloworld頁面

前后端通信

vue-resource

• 安裝vue-resource 并在main.js中引用

  import VueResource from 'vue-resource' Vue.use(VueResource)
• 在config/index.js 配置 proxyTable代理服務(wù)器

proxyTable: {'/api/**': {target: 'http://localhost:3000',pathRewrite: {'^/api': '/api'}} }

• 使用

this.$http.get('api/apptest').then((response) => {// 響應(yīng)成功回調(diào)console.log(response)}).catch(e => {// 打印一下錯誤console.log(e)})}

• 缺點：在開發(fā)環(huán)境下沒有問題，但是在生產(chǎn)環(huán)境下請求后端接口不成功

axios

• 首先配置axios,在src下新建一個http.js

import axios from ‘a(chǎn)xios' axios.defaults.timeout = 5000 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' export default axios

• 在main.js中引入

import axios from './http' Vue.prototype.axios = axios new Vue({el: '#app',router,axios,template: '<App/>',components: { App } })

• 使用

get方法

login () {// 獲取已有賬號密碼this.axios.get('/apptest').then((response) => {// 響應(yīng)成功回調(diào)console.log(response)// this.$router.go({name: 'main'})// 不管用this.$router.push({name: 'HelloWorld'})}).catch(e => {// 打印一下錯誤console.log(e)}) }

post方法

register () {console.log(this)// 獲取已有賬號密碼let params = {user: this.userinfo.account,password: this.userinfo.password,directionId: this.userinfo.directionId}this.axios.post('/signup', params).then((response) => {// 響應(yīng)成功回調(diào)console.log(response)}).catch(e => {// 打印一下錯誤console.log(e)}) }

生產(chǎn)環(huán)境路徑問題

在生產(chǎn)環(huán)境下發(fā)現(xiàn)打包以后路徑不對，修改config下的index.js

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './', //原來是 assetsPublicPath: '/'

源碼位置 https://gitee.com/react-modul...

遇到的問題

vue.esm.js?dcc1:574 [Vue warn]: Do not use built-in or reserved HTML elements as component id: Header
原因：因為header在HTML5里面是個原生的標(biāo)簽，所以在開發(fā)的時候會提示錯誤。
解決方法：修改components里面左邊的header名稱

總結(jié)

以上是生活随笔為你收集整理的node-vue前后端分离记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。