VUE

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

learning script

Post by ejsoon » 2017 Dec 26, 17:16

learnVUE.html:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>learn1</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<div id="whyvue3">
		<ol>
		  <!-- 创建一个 tooo-item 组件的实例 -->
		   <tooo-item
		     v-for="item in groceryList"
		     v-bind:dodo="item"
		     v-bind:key="item.id">
		   </tooo-item>
		</ol>
	</div>
	<div id="whyvue4">
		<ol>
			<nii 
			v-bind:v4v="nnna"></nii>
		</ol>
		<div v-bind:title="noyaa">888</div>
		<div>5{{ noyaa }}</div>
		<div>7{{ nnna.ppp }}</div>
		<input type="text" v-model="nnna.ppp">
		<input type="text" v-model="qc">
	</div>
	<br>
	<hr>
	<h3>20171221</h3>
	<br>
	<div id="whyvue5">
		<div v-if="iy">
			I hope happy everyday.{{ iy }}
		</div>
		<div v-else>
			I hope make a lot of money everyday.{{ iy }}
		</div>
		<input type="text" value="1" v-model.number="iy">
		<ul>
			<li v-for="(tfitem, tfindex) in tf">{{ tfindex + " love " + tfitem }}</li>
		</ul>
		<ul>
			<li v-for="(tfitem, tfindex) in tfa">{{ tfindex + " love " + tfitem }}</li>
		</ul>
		<button v-on:click="tf.nna += 33">tf.nna +</button>
		<button v-on:click="tnp">tf.nnu +</button>
		<br>
		<h3>active Prop</h3>
		<mylearn-test1
			v-bind="iyt">
		</mylearn-test1>
		<input type="test" v-model="iyt.wvkkk">
	</div>
	<br>
	<hr>
	<h3>20171223</h3>
	<h3>20171226</h3>
	<br>
	<div id="whyvue6">
		<wlcpn-str></wlcpn-str>
		<wlcpn-str msgg="helo"></wlcpn-str>
		<wlcpn-str></wlcpn-str>
	</div>
	<script src="learn20171219.js"></script>
</body>
</html>
learnVUE.js

Code: Select all

Vue.component('tooo-item', {
  props: ['dodo'],
  template: '<li>{{ dodo.text }}</li>'
})

var app7 = new Vue({
  el: '#whyvue3',
  data: {
    groceryList: [
      { id: 0, text: 'shaaa' },
      { id: 1, text: 'shooo' },
      { id: 2, text: 'sheee' }
    ]
  }
})

Vue.component('nii', {
	props: ['v4v'],
  template: '<li>{{ v4v.jjj }}</li>'
});
var wv4 = new Vue({
	el: '#whyvue4',
	data: {
		nnna: {
			jjj: 'zaaa',
			ppp: 3
		},
		qc: 0
	},
	computed: {
		noyaa: function(){
			return this.nnna.ppp * 3
		}
	},
	watch: {
		qc: function(val){
			this.nnna.jjj = 'zaaa' + val
		}
	},
});

Vue.component('mylearn-test1', {
	props: ['wvkkk'],
	template: '<span style="color:red;">{{ wvkkk }}</span>'
})
var wv20171221 = new Vue({
	el: '#whyvue5',
	data: {
		iy : 1,
		tf: {
			nna: 21,
			nnu: 23,
		},
		tfa: [
			 21,
			 23,
		],
		iyt: {wvkkk: 3},
	},
	methods: {
		tnp : function(){
			this.tf.nnu += 33
		}
	}
})

var thedata = function() {
	return {niki : 37}
}
var wlcpn = {
	props: ['msgg'],
	template: '<div v-on:click="niki += 1" style="color:purple;">{{ niki }} : {{ msgg }}</div>',
	data : thedata
}

var wv20171223 = new Vue({
	el: '#whyvue6',
	data: {
		thedata : 999
	},
	components : {
		'wlcpn-str' : wlcpn
	}
})

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

animate.css

Post by ejsoon » 2018 Jan 08, 13:53


ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: VUE

Post by ejsoon » 2018 Jan 09, 09:22

et.js

Code: Select all

var et = new Vue({
	el: '#et',
	data: {
		thedata : 999,
		helo : 61,
		ketv : true,
	},
})
et.html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LeARN tRANSITION</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<style>
.ketn-enter-active, .ketn-leave-active {
  transition: opacity .5s
}
.ketn-enter, .ketn-leave-to /* .ketn-leave-active in below version 2.1.8 */ {
  opacity: 0
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
/*.slide-fade-enter, */
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.rottbutsc-enter-active {
  animation: bounce-in .5s;
}
.rottbutsc-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
	</style>
	<div id="et">
		<h3>LeARN tRANSITION</h3>
		<hr>
		<button v-on:click="ketv = !ketv">
			Toggle
		</button>
		<transition name="rottbutsc">
			<p v-if="ketv">hhahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaaha</p>
		</transition>
		<transition name="slide-fade">
			<p v-if="ketv">haha</p>
		</transition>
		<transition name="ketn">
			<p v-if="ketv">hello</p>
		</transition>
	</div>


	<script src="et.js"></script>
</body>
</html>

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

一步一步學vue

Post by ejsoon » 2018 Mar 19, 23:26


ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

今日學vue

Post by ejsoon » 2018 Mar 22, 11:06

看了慕課網六分鐘,就明白了原來一個.vue文件(模塊化)包含<templete/><style/><script/>,佈署時build會生成瀏覽器可識別的js文件,這是用node.js和手腳架搭建工程的意義。之前看了一個月教程,問了不少人,怎麼就沒有人說明白,這麼簡單的道理!

ubuntu install node.js include npm

Code: Select all

sudo tar -C /usr/local --strip-components 1 -xJf node-v8.10.0-linux-x64.tar.xz 
重要指令:v-text,v-html,{{}},v-if(html),v-show(css),v-on:click='method',v-for,v-bind:src='imgsrc',:class='{red : isRed}'
重要屬性:data,methods,watch


組件化:
import Header from './header'
import Footer from './footer'
new Vue({
components: [Header, Footer]
})

<header msgFather='good son'></header>
<footer></footer>

App.vue,header.vue,footer.vue

通信用props註冊(父向子傳):props:[msgFather]
子向父傳用$emit

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

VUE vim語法高亮

Post by ejsoon » 2018 Mar 26, 17:04

au BufRead,BufNewFile *.vue set filetype=html
來自這裡

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

VUE route

Post by ejsoon » 2018 Apr 05, 19:59

https://segmentfault.com/a/1190000009651628
mode:

默认为hash,但是用hash模式的话,页面地址会变成被加个#号比较难看了, http://localhost:8080/#/linkParams/xuxiao
所以一般我们会采用 history模式,它会使得我们的地址像平常一样。http://localhost:8080/linkParams/xuxiao

base
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"。
一般写成 __dirname,在webpack中有配置。

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

【VUE】config/index.js的配置

Post by ejsoon » 2018 Apr 13, 10:48

更改config/index.js

npm run build之後在本地查看:
build:
assetsPublicPath: './',

跨域:
dev:

Code: Select all

proxyTable: {
      '/api': {
        target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
                //这里理解成用‘/api’代替target里面的地址,
                后面组件中我们掉接口时直接用api代替 比如我要调
                用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
        }
      }
    },
改端口:
dev:
port: 8011,

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: VUE 組件通信

Post by ejsoon » 2018 Apr 21, 22:15

https://blog.csdn.net/qq20004604/articl ... s/52435688

Code: Select all

father:
<template>
  <div>
    <com-a msgFather='good son' v-on:msgSon='kownStop'></com-a>
  </div>
</template>
<script>
import ComA from './components/ComA'
export default {
  components: { ComA }
}


child:

<template>
  <div class="hello">
    <button v-on:click='HelloA'>HelloA</button>
    <button v-on:click='tellFather'>tell Father</button>
  </div>
</template>

<script>
export default {
  name: 'ComA',
  props: [
    'msgFather'
  ],
  methods: {
    HelloA: function () {
      this.$emit('msgSon', this.msgFather)
    },
    tellFather () {
      this.$emit('msgSon', 'love')
    }
  }
}
</script>

Post Reply