uni-app学习1---vue基础

一、模板语法

Hello World显示一共有三种办法

1.写到页面上
2.定义到data里面，通过变量利用插值表达式
3.v-html

<template>
	<view class="content">
		hello,world			//1
		{{text}}		//2
		<view v-text='text' class="title">	
		</view>//3
		<view v-html='text' class="title">	
		</view>//3
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text:'<p>hello world</p>'
			}
		},
		methods: {
		},
	}
</script>

二、样式绑定

v-bind进行样式绑定 简写 :

<template>
	<view class="content" v-bind:style="style">
		hello world
	</view>
</template>
<script>
	export default {
		data() {
			return {
				style:"font-size: 30px"
			}
		},
		methods: {
		},
	}
</script>
<style>
	.content{background: red;}
</style>

三、事件绑定

v-on 事件的绑定 简写 @
v-on可以绑定的事件

<template>
	<view :class="text" v-bind:style="style" v-on:click="click">
		hello world
	</view>
</template>
<script>
	export default {
		data() {
			return {
				style:"font-size: 30px;color:#ffffff",
				text:"content"
			}
		},
		methods: {
			click:function(){
				this.style="font-size: 30px;color:#000000" //点击字体变为黑色
				this.text=''		//点击背景变为白色
			}
		},	
	}
</script>
<style>
	.content{background: red;}
</style>

四、 条件渲染

v.if :点击 重新创建或删除
v.else:必须与v.if相邻
v.show: 点击 隐藏，显现

<template>
	<view>
		<view :class="text" v-bind:style="style" v-if="show">
			hello world
		</view>
		<view v-else>你好</view>
		<button @click="click">按钮</button>
	</view>
	
</template>
<script>
	export default {
		data() {
			return {
				style:"font-size: 30px;color:#ffffff",
				text:"content",
				show:true
			}
		},
		methods: {
				click(){
					// if(this.show == true){
					// 	this.show=false
					// }else{
					// 	this.show=true
					// }			1.
					
					
					// this.show=!this.show		2.
					
					this.show = this.show==true?false:true
				}
			},
	}
</script>
<style>
	.content{background: red;}
</style>

五.列表渲染

<template>
	<view class="content" >
		<view class="" v-for="(item,index) in list":key="index">
			hello world
			{{item}}----{{index}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:10
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
<style>	
</style>

六.v-model的使用

v-model 双向绑定

<template>
	<view class="content" >
		<input type="text" value="" v-model="text"/>
		<button type="primary" @click="click">提交</button>
		<view class="">
			<view class="" v-for="item in list">
				{{ item }}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text:'',
				list:["hello","world"]
			}
		},
		onLoad() {
		},
		methods: {
			click(){
				this.list.push(this.text),
				this.text=''
			}
		}
	}
</script>
<style>	
</style>

七.实例的生命周期

<template>
	<view class="" >
		<button type="primary"	@click="click">改变</button>
		<view class="">
			{{ text }}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text:'hello'
			}
		},
		
		methods: {
			click(){
				this.text='你好'
			}	
		},
		beforeCreate() {
			console.log(this.text)  //打印不出来，在创建实例之前执行
		},
		created() {
			console.log(this.text)	//创建完实例，执行
		},
		beforeMount() {
			console.log(1)    //挂载在页面之前执行
		},
		mounted() {
			console.log(2)   //挂载，渲染页面
		},
		beforeUpdate() {
			console.log("beforeupdate")	//重新渲染之前执行
		},
		updated() {
			console.log('update')//渲染完成之前执行
		}
	}
</script>
<style>	
</style>

八.计算属性方法和监听

属性

<template>
	<view class="" >
		<view class="">
			{{fullText}}
			<button type="primary" @click="click">change</button>
			{{name}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				firstText:'hello',
				lastText:'world',
				name:'qq'
			}
		},
		methods: {
			click(){
			this.name='tt'}
		},
		computed:{
			fullText(){
				console.log('计算属性')
				return this.firstText+" "+this.lastText
			}
		}
	}
</script>
<style>	
</style>

方法

<template>
	<view class="" >
		<view class="">
			{{fullText()}}
			<button type="primary" @click="click">change</button>
			{{name}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				firstText:'hello',
				lastText:'world',
				name:'qq'
			}
		},
		methods: {
			click(){
			this.name='tt'},
			fullText(){
				console.log("方法")
				return this.firstText+" "+this.lastText
			}
		},
	}
</script>
<style>	
</style>

监听

<template>
	<view class="" >
		<view class="">
			{{fullText}}
			<button type="primary" @click="click">change</button>
			{{name}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				firstText:'hello',
				lastText:'world',
				fullText:'hello world',
				name:'qq',
				
			}
		},
		methods: {
			click(){
			this.lastText='tt'
			},
		},
		watch:{
			firstText(){
				console.log("监听")
				this.fullText = this.firstText+" "+this.lastText
			},
			lastText(){
				console.log("监听")
				this.fullText = this.firstText+" "+this.lastText
			},
			
		}
	}
</script>
<style>	
</style>

九.父子组件传值

父

<template>
	<view class="" >
		<child @change="change" :text="text"></child>
		{{title}}
	</view>
</template>
<script>
	import child from '../../components/child.vue'
	export default {
		components:{
			child
		},
		data() {
			return {
				text:'我是父组件',
				title:''
			}
		},
		methods: {
			change(res){
				console.log(res)
				this.title=res
			}
		},
	}
</script>
<style>	
</style>

子

<template>
	<view>
		{{text}}
		<button type="primary" @click="click">传值</button>
	</view>
</template>

<script>
	export default {
		props:['text'],
		name:"child",
		data() {
			return {
				title:'我是子组件'
			};
		},
		methods:{
			click(){
				this.$emit('change',this.title)
			}
		},
		}
</script>
<style>
</style>

十.组件参数校验

<template>
	<view>
		{{text}}
		<button type="primary" @click="click">传值</button>
	</view>
</template>

<script>
	export default {
		props:{
			text:[String,Number] //不支持数组
		},
		name:"child",
		data() {
			return {
				title:'我是子组件'
			};
		},
		methods:{
			click(){
				this.$emit('change',this.title)
			}
		},
		}
</script>
<style>
</style>