Vue01

Vue

https://vuejs.org
https://github.com/vuejs
https://github.com/vuejs/awesome-vue
https://forum.vuejs.org


https://element.eleme.io
element.eleme.io
Element，is on base Vue 2.0 .

{{msg}}

{{age*2}}

{{age>60?"old man":"youth"}}

{{FullName.split(" ")[0]}}

{{LName+","+FName}}

{{getFullName1()}}

{{getFullName(LName,FName)}}

{{value}}

<br/>{{typeof value}}

methods:{getFullName1:function(){

//this. must be here.

return this.FName+" "+ this.LName;

},

Data of Vuejs 2 DOM by v-bind

<a href="{{url}}">It does not work</a>

<a v-bind:href="url">baidu</a>

<div v-bind:title="url">baidu</div>

DOM 2 Data of Vuejs by v-on

v-on:click

<button v-on:click="showsome">showsome</button>

<button v-on:click="showevent($event)">show event</button>

v-on:click.stop

<div v-on:click.stop="showevent($event)">

<button v-on:click.stop="showevent($event)">阻止冒泡v-on:click.stop</button>

<a href="http://www.baidu.com" v-on:click.prevent>阻止跳转到baidu,v-on:click.prevent </a>

</div>

<a href="http://www.baidu.com" v-on:click.prevent>阻止跳转到baidu,v-on:click.prevent </a>

<form action="" v-on:submit.prevent>

<input type="submit">

</form>

v-on:keyup

<input type="text" v-on:keyup="keyup">

<p>v-on:keyup.enter.space.esc</p>

<input type="text" v-on:keyup.enter.space="name=$event.target.value">

<p>v-on:keyup.13</p>

<p>v-on:keyup.enter.shift</p> + shift button

<p>v-on:keyup.enter.meta</p> meta : + window FN function button

showevent:function(event){console.log(event);

alert(event.target.value;);

},

keyup:function(event){if(event.which==13){alert(event.which);}}

DOM <==> Data

<p>v-model, v-bind, v-on, v-model.trim, v-model.number v-model:value</p>

<p>v-model.lazy</p>

<p>v-html !import danger</p>

<p>v-once</p>

<p>v-if, v-else-if v-else</p>

<input type="text" v-model="value">

<input type="text" v-bind:value="value" v-on:input="input">

<ul><li v-for="(lesson,i) in lessons1" v-bind:key="lesson.url">{{i}} <a v-bind:href="lesson.url" target=_blank>{{lesson.title}}</a> <input type="text" v-model:value="lesson.title"></li></ul>

<p>v-html</p>

<div v-html="value"></div>

<div v-once>v-once -> value: {{value}}</div> //only showing once

<p v-if="item>20">{{item}}</p>

<p v-else-if="item!=''&&item<10">{{item}}<10</p>

<p v-else>v-else</p>

<input v-on:input.number="item=$event.target.value">

<template></template>

<template v-if="item>50">

<p>50</p><p>template v-if remove element from DOM</p>

</template>

<p v-show="item==30">v-show: dispaly:none</p>

v-cloak ,  showing DOM before loaded Vuejs

<style>[v-cloak]{display:none;}</style>

<div v-cloak>{{item}}v-cloak</div>

List

<div id="app">

<ul>

<li v-for="(title,i) in lessons">

{{i}}<a v-bind:href="title.split(' ')[1]" target=_blank>{{title.split(" ")[0]}}</a></li>

</ul>

</div>

<script>

var vm = new Vue({

el: "#app",

data: {

lessons:["index01 index01.html","index02 index02.html",

"index03 index03.html",

"index04 index04.html","index05 index05.html"]

},

list objects

<ul><li v-for="(lesson,i) in lessons1">

{{i}}<a v-bind:href="lesson.url" target=_blank>

{{lesson.title}}</a></li>

</ul>

lessons1:[{title:"index01",url:"index01.html"}

,{title:"index02",url:"index02.html"}]

List an object

<li v-for="(value,key,i) in lesson">

{{i}}. {{key}}:{{value}}</li>

lesson:{title:"index02",url:"index02.html"}

list others

<li v-for="n in 10">{{n}}</li>

<li v-for="s in 'test'">{{s}}</li>

Array to DOM

changeLesson1:function(){

//modify array

Vue.set(this.lessons1,0,{title:"test",url:"index.html"});

//add a into array

//Vue rewrite following function

this.lessons1.push({title:"index03",url:"index03.html"});

this.lessons1.reverse();

//[].splice

//pop();

//shift(); ishift();sort();

}

<ul>

<li v-for="(lesson,i) in lessons1">

{{i}}<a v-bind:href="lesson.url" target=_blank>

{{lesson.title}}</a></li>

</ul>

v-bind:key identify DOM

<ul>

<li v-for="(lesson,i) in lessons1" v-bind:key="lesson.url">

{{i}}<a v-bind:href="lesson.url" target=_blank>

{{lesson.title}}</a><input type="text"></li>

</ul>

<button v-on:click="changeLesson1">click me to change lesson1</button>

changeLesson1:function(){

//Vue.set(this.lessons1,0,{title:"test",url:"index.html"});

//Vue rewrite following function

//this.lessons1.push({title:"index03",url:"index03.html"});

this.lessons1.reverse();

//[].splice

//pop();

//shift(); ishift();sort();

}

computed:{FullName:function(){return firstName+" "+LastName;}
, FullName2:{get:function(){return "";},set:function(newvalue){}}
}
computed:{//此属性，是由其他data同步计算而来。 //1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性， //只计算一次，之后的调研，直接使用第一次计算的结果。} //3.通过set，get函数，实现值得双向变动显示。 watch:{//Tips基础data变化时，执行相应的函数和异步操作，无返回值。}

watch:{

searchInfo:function(query){

this.showSearching=true;

setTimeout(()=>{this.showSearching=false;},500); var vm=this;setTimeout(function(){vm.showSearching=false;},500);

}

}

end;
Refresh UI: 1 changing the value of "v-if"; 2  changing the value of ":key".