vue笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_42681190/article/details/106963908

照着vue官网和视频敲了点入门，v- 的一点语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active{
				color: coral
			}
			.active2{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			v-text 和 v-html 区别 ：
			<div v-text="text"></div>
			<div v-html="text"> </div>
			
			<br />
			<div v-show="isShow">v-show 是否展示?   v-show 相当于 display:none    </div>
			<div v-if="isIF">v-if   相当于remove这个div  , 
							isIF=true,展示v-if的div，
							isIF=false,展示v-else的div</div>
			<div v-else>v-else's DIV </div>
			
			<br />
			<div>===================v-for================================</div>
			<span v-for="(item , index) in arrs":key="index">span{{item}},</span><br />			
			<div v-for="(item,index) in arrs":key="index">div{{item}}</div>
			
			
			<div>===================v-on================================</div>
			<button v-on:click="onClickMethod">v-onclick 点击加1</button>
			<div>{{number}}</div>
			
			<button v-on:click="onClickMethod2">v-onclick 点击减1</button>
			<div>{{number2}}</div>
			
			
			<div>===================v-bind================================</div>
			<div v-bind:class="bindClass">v-bind:class 绑定class为‘active’的style  嘿嘿</div>
			<button v-on:click="clickChangeColor">点击变换嘿嘿颜色</button>
			
			
			<div>===================v-model================================</div>
			<br>
			<input v-model="inputText" type="text"/>
			<div>{{inputText}}</div>
			<div>--------------------------------------------------------------</div>
			<!-- v-model  复选框  获取checkbox 的值 -->
			<input type="checkbox" name="sports" value="篮球"  v-model="checkBox"/>篮球
			<input type="checkbox" name="sports" value="橄榄球" v-model="checkBox"/>橄榄球
			<input type="checkbox" name="sports" value="棒球" v-model="checkBox"/>棒球
			<input type="checkbox" name="sports" value="高球" v-model="checkBox"/>高球
			<input type="checkbox" name="sports" value="程咬金" v-model="checkBox"/>程咬金
			<div>{{checkBox}}</div>
			<div>--------------------------------------------------------------</div>
			<!-- v-mode 单选框  获取值 -->	
			<input type="radio" id="one" value="ONE" v-model="radioCheck"/>one
			<input type="radio" id="two" value="TWO" v-model="radioCheck"/>two
			<div>选了{{radioCheck}}</div>
			<div>--------------------------------------------------------------</div>
			<!-- v-model 选择框 -->
			<select v-model="selectWhat">
				<option disabled value="">请选择</option>
				<option>詹姆斯</option>
				<option>乐福</option>
				<option>JR</option>
			</select>
			<div>您选择了{{selectWhat}}</div>
			<div>--------------------------------------------------------------</div>
			<!-- v-for 来下拉框 -->
			<select v-model="selectFor">
					<option v-for="option in options" v-bind:value="option.value">{{option.key}}</option>
					
			</select>
			<div>你选择了{{selectFor}}</div>
			
			
			<div>===================v-pre 不用是[1,2,3,4,5]  用了是{{arrs}}================================</div>
			<div v-pre>{{arrs}}</div>
			
			
			<div v-cloak>{{arrs}}</div>
			
			
			
			</div>
		
			
	
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					text : "<strong>wo 是 Sb </strong>",
					isShow:false,
					isIF:true,
					arrs:[1,2,3,4,5],
					number:1,
					number2:100,
					bindClass:'active',
					inputText:'嘎嘎',
					checkBox:[],
					radioCheck:'',
					selectWhat:'',
					selectFor:'',
					options:[
						{key:'A',value:'aaaaaa'},
						{key:'B',value:'bbbbbb'},
						{key:'C',value:'cccccc'},
						{key:'D',value:'dddddd'}
					]
					},
					methods:{
						onClickMethod(){
							this.number ++
						},
						onClickMethod2(){
							this.number2 --
						},
						clickChangeColor(){
							console.log(this.bindClass == 'active')
							if(this.bindClass == 'active'){
								this.bindClass = 'active2'	
							}else{
								this.bindClass = 'active'
							}
						}
					}
			})
		</script>.
	</body>
</html>

生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			
			<div id="vue-life">
				<div>{{num}}</div>
				<button @click="addNum">ADD</button>
				<button @click="jianNum">JIAN</button>
				<button @click="xiaohui">Destory</button>
				
				<div>{{arrs}}</div>
				<button @click="changeArr">改变1</button>
				<div>{{obj}}</div>
				<button @click="changeObj">加个AGE</button>
			</div>
		
		
		
			<script src="https://cdn.jsdelivr.net/npm/vue"></script>
			<script>
				
			
				
				new Vue({
					el:"#vue-life",
					data:{
						num:1,
						arrs:[1,2,3,4,5],
						obj:{
							name:"ding",
						},
					},
					methods:{
						changeArr(){
							Vue.set(this.arrs,0,"把1变成我")
						},
						changeObj(){
							Vue.set(this.obj,"age",12)
						},
						addNum(){
							this.num++
						},
						jianNum(){
							this.num--
						},
						xiaohui(){
							this.$destroy()
						}
					},
					
					beforeCreate() {
						console.log("beforeCreate")
						console.log(this.num)
					},
					//数据处理  ajax啊啥的
					created() {
						console.log("cereted")
						console.log(this.num)
					},
					beforeMount() {
						console.log("beforeMount")
					},
					//dom 渲染
					mounted() {
						console.log("mounted")
					},
					beforeUpdate() {
						console.log("beforeCreated")
					},
					updated() {
						console.log("update")
					},
					//destory 会销毁vue对象
					beforeDestroy() {
						console.log("beforeDestropry")
					},
					destroyed() {
						console.log("destory")
					}
					
				})
				
			</script>
	</body>
</html>

v-bind 绑定点动态数据
不能直接用mustache语法。	
	<img v-bind:src="图片url"
	<a v-bind:href="aurl"
简化写法：
	<img :src="图片url"
	<a :href="url"
动态绑定class
	<style>
	.active{
				color: coral
			}
	</style>
	<h2 v-bind:class="{active: isActive}">1111111111</h2>
	<button @click="changeClass">changeClass</button>
	<script>
		data:{
			isActive:'false',
		},
		methods:{
			changeClass(){
							this.isActive = !this.isActive
						},
		}
	</stript>