vuejsNote - Devinwon/article GitHub Wiki

[TOC]

vus js study notes

1,v-model

	<div class="root">
	    <h1>{{ message}}</h1>
	</div>
	new Vue({
	    el:".root",
	    data:{
	        message:"greeting",
	},
	})

2,v-if

    <div id="app">
        <p v-if="count===1">
            this is true,and will display
        </p>

        <p v-else-if="count===2">
            this is False,and will not display
        </p>
    
        <p v-else>
            this will display when count is neither 1 nor 2
        </p>
    </div>


new Vue({
	el:"#app",
	data:{
	count:1,
}
})

3,v-show

<div class="root">
	<h1 v-show="count===1">this is content</h1>
</div>

new Vue({
	el:".root",
	data:{
		count:1,
},
})

4,v-bind(给html标签设置属性)

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<div class="root">
	sign up
	<br>
	<input type="" name="" v-model="email">
	<br>
	<button onclick="alert('sign up')" v-bind:disabled="email.length<2">
		submit
	</button>
	<br>
	<button onclick="alert('sign up')" class="[email.length<2?'red','green']">
		submit
	</button>
</div>

/* css */
.red{
	color:"red";
}
.green{
	color:"green";
}

new Vue({
	el:".root",
	data:{
	email:"",
},
})

5，v-text:转义输出(没有格式) v-html:不转义输出(支持html语言)

<p v-text="html"></p>
<p v-html="html"></p>

html in vuejs is like "<h1>hello</h1>"

6,v-once （只会被渲染一次，用于静态内容的展示）

<p v-once>{{ email}}</p>
<p >{{ email}}</p>

7,v-for

v-for 循环，{{$index}} 得到索引

json={a:"apple",b:"bananar",c:"pear"} v-for="(k,v) in json" vue 2.0 里面可以用 v-for="(value ,key ,index) in arr"来分别获取相印的值 2.0移除$index 和$key了 {{ k}} {{ v }} {{$key}}

<ul>
	<li v-for="cat in cats">{{cat}}</li>
</ul>
<ol>
	<li v-for="person in people">{{person.name}}</li>
</ol>

new Vue({
	el:"xxx",
	data:{
		cats   :[cat1,cat2,cat3,],
		people :[
			{
			name:"John",
			age:90,
			},		

			{
			name:"Jane",
			age:9,
			},		{
			name:"Kevin",
			age:34,
			}
		],

}
})

8,methods

<div name='app'>
	<input type="" name="" v-model="newbook">

	<button v-on:click="addBook">+add</button>
</div>
<ol>
	<li v-for="book in books">{{book.name}}</li>
</ol>

new Vue=({
	el="app",
	data={
		books:[
				{name:"A"},
				{name:"B"},
				{name:"C"},
				{name:"D"},
			],
		newitem:"",
	},

	methods:{
	addBook function():{
		this.books.push({name:this.newitem})
		this.newitem=""   #置空复位
	
			}
		}

})

/* <input v-model="newbook" v-on:keyup="addBook"> 
	v-on:keyup,每按一个键就会调用addBook(),  一般适用单字母命令操作。
	v-on:keyup.enter,回车后就会调用addBook(),
*/

9,filter,computed

<div name='app'>
	<p> {{ newitem }}</p>
	<input type="" name="" v-model="newbook">

	<button v-on:click="addBook">+add</button>
	<ol>
		/* book.name作为capitalize(value)的参数 */
		<li v-for="book in books">{{book.name|captalize|kitty}}</li>
	</ol>
</div>


new Vue=({
	el="app",
	data={
		books:[
				{name:"a"},
				{name:"b"},
				{name:"c"},
				{name:"d"},
			],
		newitem:"",
	},

	methods:{
			addBook function():{
				this.books.push({name:this.newitem})
				this.newitem=""   #置空复位
	
					}
		},
	
	filters:{
	
		capitalize:function(value){
			return value.toUpperCase()
			
			},
	
		kitty:function(value){
			return value+'end'
			},
	
		}
	
	computed:{
		kittyName:function(){
			if (this.newitem.length>1){
				return this.newitem+'hello'
			}
	}
}

})

10,componet

<div name='app'>
	<p> {{ newitem }}</p>
	<input type="" name="" v-model="newbook">

	<button v-on:click="addBook">+add</button>
	<ol>
		/* book.name作为capitalize(value)的参数 */
		<li v-for="book in books">{{book.name|captalize|kitty}}</li>
	</ol>
</div>

<booksList :booksCom="books"/>

Vue.component('bookList',{
	props:"booksCom",
	template:
	<ol>
		<li v-for="book in booksCom">{{book.name}}</li>
	</ol>
	
})

new Vue=({
	el="app",
	data={
		books:[
				{name:"a"},
				{name:"b"},
				{name:"c"},
				{name:"d"},
			],
		newitem:"",
	},

	methods:{
			addBook function():{
				this.books.push({name:this.newitem})
				this.newitem=""   #置空复位
	
					}
		},
	
	filters:{
	
		capitalize:function(value){
			return value.toUpperCase()
			
			},
	
		kitty:function(value){
			return value+'end'
			},
	
		}
	
	computed:{
		kittyName:function(){
			if (this.newitem.length>1){
				return this.newitem+'hello'
			}
	}
}

})

参考

视频参考网址：https://www.youtube.com/watch?v=4deVCNJq3qc 进度： 32:59（2：58：57）

v-on:click v-on:mouseout v-on:nouseover v-on:mousedown v-on:dblclick //双击