vue2笔记1基本用法整理

<script src="/js/vue.js"></script>

Vue.config.productionTip = false;

<div id="root"></div>
<script>
	new Vue({
        el: '#root'
    });
</script>

<div id="root"></div>
<script>
	new Vue({}).$mount('#root');
</script>

<div id="root">
	<h1>{{message}}</h1>
</div>
<script>
	new Vue({
        el: '#root',
        data() {
	        return {
        		message: 'Hello world'
        	}
        }
    });
</script>

<div id="root">
    <a v-bind:href="url">baidu</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data() {
        	return {
            	url: 'https://www.baidu.com'
            }
        }
    });
</script>

单向：<input type="text" v-bind:value="message" />
双向：<input type="text" v-model:value="message" />

单向：<input type="text" :value="message" />
双向：<input type="text" v-model="message" />

<button v-on:click="onBtnClick($event,message)">click</button>

<button @click="onBtnClick($event,message)">click</button>

new Vue({
	data() {
		message: 'hello world'
	},
    methods: {
         onBtnClick(event, message) {
		 	alert(message + ' clicked');
         }
     }
})

<a @click.prevent.stop="onClick">click</a>

<input @keydown.Enter="onKey"></input>
<input @keydown.caps-lock="onKey"></input>
<input @keydown.tab="onKey"></input>
<input @keydown.ctrl.x="onKey"></input>

<input v-model:value="fn"/>
<input v-model:value="ln"/>
<input v-model:value="fullname"/>

new Vue({
	data() {
		firstname: 'san',
		lastname: 'zhang'
	},
    computed: {
         fullname: {
         	// 1. 初次读取时调用，模板中多次使用，只调用一次（如果使用method定义计算，则会多次调用）
            // 2. 所依赖的数据发生变化时调用
         	get(){
         		return this.firstname + '-' +this.lastname
         	},
         	// 可选,fullname变化时调用
         	set(value){
         		const arr = value.split('-');
         		this.firstname=arr[0];
         		this.lastname=arr[1];
         	}
         }
     }
})

computed:{
	fullname: function{
		return this.firstname + '-' +this.lastname
	}
}

watch: {
    fullname: {
    	immediate: true, // 初始化时调用handler
        handler(newv, oldv) {
            console.log('change', newv, oldv);
        }
    }
}

let vm = new Vue({...});
vm.$watch('fullname',{
    immediate: true,
    handler(newv, oldv) {
        console.log('change', newv, oldv);
    }
});

watch:{
	fullname(newValue,oldValue){}
}

data() {
    return {
        name:{
            fn: 'fn',
            ln: 'ln'
        }
    }
},
watch: {
	// 监视结构中属性
	'name.fn':{},
	// 监视结构中所有属性变化
	name:{
		deep:true,
		handler(){};
	}
}

watch:{
	name:{
		deep:true,
		handler(){
			setTimeout(()=>{
				// 注意此处使用箭头函数，this=vue实例
				// 如果使用function ,this=window
				this.fullname = name.fn + name.ln;
			},1000)
		}
	}
}

<div class='basic' :class='vClass'></div>
<div class='basic' :class='vClasses'></div>
<div class='basic' :class='vClassObj'></div>

data:{
	vClass: 'class1',
	vClasses:['class1','class2','class3'],
	vClassObj:{
		class1: true,
		class2: false
	}
}

<div :style="{fontSize: styleObj.fontSize}">123</div>
<div :style="styleObj">123</div>
<div :style="styleObjs">123</div>

data() {
    return {
        styleObj: {
            fontSize: '40px'
        },
        styleObjs:[{},{}]
    }
}

<div v-show="!hidden"></div>
<div v-if="n==1"></div>
<div v-else-if="n==2"></div>
<div v-else></div>

<ul>
    <li v-for="person in psersons" :key="id">{{person.name}}</li>
</ul>
<ul>
    <li v-for="(person,index) in psersons" :key="id">{{index}}-{{person.name}}</li>
</ul>
<ul>
    <li v-for="(attr,key) of car" :key="key">{{key}}:{{attr}}</li>
</ul>
<ul>
	<li v-for=(number,index) of 5></li>
</ul>

data(){
	persons:[{id:1,name:'a'},{id:2,name:'b'}],
	car:{
		name: 'name',
		prices: 100,
		model: 'model'
	}
}

data(){
	minAge: 10,
	sort:0,
	persons:[{id:1,name:'a',age:10},{id:2,name:'b',age:22}]
},
computed:{
	filteredPersons(){
		let arr = this.person.filter((p)=>{return p.age>this.minAge})
		if(this.sort){
			arr.sort((p1,p2)=>{return this.sort === 1 ? p1.age-p2.age : p2.age-p1.age})
		}
	}
},
watch:{
	minAge:{
		immediate: true, // 注意不写此配置，初始渲染会有问题
		handler:function(value){
			this.filteredPersons2 = this.person.filter((p)=>{return p.age>this.minAge});
		}
	}
}

let vm = new Vue({
	data() {
		myObj:{}
	}
});
Vue.set(vm._data.myObj,'newProp1','value')
// 或
vm.$set(vm.myObj,'newProp2','value')

vm.$set(vm.myArr,index,'value')