1.1vue.js 基本操作vue528

luyanran
196 阅读5分钟

引入

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

直接另存为在引入

数据绑定

        <body>
    		<!-- 引入vue框架 --> 
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<div id="id1">
    			{{str}}
    		</div>
    	</body>
    	<script type="text/javascript"> 
    		new Vue({
    			el:'#id1',
    			// 数据的定义,变量的声明
    			data:{
    				str:'嘿嘿',
    			}
    		});
    	</script>

差值运算符可以写的数据内容

        <body>
        		<!-- 引入vue框架 -->
        		<!-- <script src="vue.js" type="text/javascript" charset="utf-8"></script> -->
        		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        		<div id="id1">
        			{{str}}
        			{{bool?'ok':'error'}}
        			{{num+1}}
        			//JS代码
        		</div>
        	</body>
        	<script type="text/javascript">
        		// let str = '哈哈'
        		// document.querySelector("#id1").innerHTML=str
        		new Vue({
        			el:'#id1',
        			// 数据的定义,变量的声明
        			data:{
        				str:'嘿嘿',
        				bool:true,
        				num:5
        			}
        		});
        	</script>

v-text和v-html

        <div id="app">
        			<!-- 文本插值 -->
        			{{str}}
        			<!-- v-前缀的属性操作 -->
        			<!-- v-text 不能解析标记， v-html能解析标记(innerHTML) -->
        			<div v-text="str"></div>
        			<div v-html="str"></div>
        		</div>
        		<script src="vue.js"></script>
        		<script>
        			new Vue({
        				el:"#app",
        				data:{
        					str:'<b>hello world</b>'
        				}
        			})
        		</script>

v-bind

        <div id="app">
        			<a href="http://www.sohu.com">连接到搜狐</a>
        			<!-- v-bind 解析属性中的变量的 -->
        			<a v-bind:href="url">连接到百度</a>
        			<!-- 缩写 -->
        			<a :href="url">连接到百度</a>
        			
        			<button disabled="true">按钮</button>
        			<button :disabled="bool">按钮</button>
        		</div>
        		<script src="vue.js"></script>
        		<script>
        			new Vue({
        				el:"#app",
        				data:{
        					url:'https://www.baidu.com',
        					bool:true
        				}
        			})
        		</script>

v-bind的使用

        <div id="app">
        			<!-- :class使用 -->
        			<div class="bg big">happy</div>
        			<!-- 对象格式 bg,big class名称(重要重要的)-->
        			<div :class="{bg:true,big:1==1}">happy</div>	
        			
        			<!-- 数组格式 -->
        			<div :class="[msg1,msg2]">good</div>
        			<!-- :style使用 -->
        			<div style="color:#0f0;font-size:35px">ok</div>
        			<!-- 对象格式 color,fontSize css属性-->
        			<div :style="{color:color,fontSize:font}">this is a test</div>
        			<!-- 数组格式 -->
        			<div :style="[msg3]">this is a test</div>
        		</div>
        		<script src="vue.js"></script>
        		<script>
        			new Vue({
        				el:'#app',
        				data:{
        					msg1:'bg2',  // class 名称
        					msg2:'big',
        					color:'#f0f',// css 属性值
        					font:'50px',
        					msg3:{  //  style的行内样式
        						background:'#00f',
        						border:'1px solid #ccc'
        					}
        				}
        			})
        		</script>

v-if

    	<!-- 单分支语句 -->
    			<div v-if="str=='ok'">this is a test</div>
    			
    			<!-- 双分支语句 -->
    			<div v-if="Math.random()>0.5">大于0.5的随机数</div>
    			<div v-else>不是大于0.5的随机数</div>
    			
    			<!-- 多分支语句 -->
    			<div v-if="type=='A'">A</div>
    			<div v-else-if="type=='B'">B</div>
    			<div v-else-if="type=='C'">C</div>
    			<div v-else>非A|B|C</div>
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			new Vue({
    				el:'#app',
    				data:{
    					str:'haha',
    					type:'Z'
    				}
    			})
    		</script>

#循环

    <div id="app">
    			<ul>
    				<!-- item 一维数组值  key 下标 -->
    				<li v-for="(item,key) in arr">
    					{{key}} --- {{item}}
    				</li>
    			</ul>
    			<ul>
    				<li v-for="(item,key,index) in obj">
    					{{key}} ---{{item}} ---{{index}}
    				</li>
    			</ul>
    			
    			<ul>
    				<!-- item 每行的一维对象 key 0 1 2(重要)-->
    				<li v-for="(item,key) in info">
    				    {{item.title}}---{{item.price}}
    				</li>
    			</ul>
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			new Vue({
    				el:'#app',
    				data:{
    					arr:['a','b','c','d'],
    					obj:{name:'tom',age:18,addr:'北京'},
    					info:[
    						{title:'小米',price:3000},
    						{title:'联想',price:2000},
    						{title:'iphone',price:4000}
    					]
    				}
    			})
    		</script>

click事件

    <div id="app">
    		    <button v-on:click="count++">点击{{count}}</button>
    			<button @click="count2++">点击{{count2}}</button>
    			
    			<button @click="run('ok')">调用方法有传值</button>
    			<!-- 
    			事件修饰符:
    			
                .prevent 阻止默认行为
    			 -->
    			<a href="http://www.sohu.com" @click.prevent="play">点击调用方法没传值</a>
    		    <!-- .stop 阻止冒泡 -->
    			<div @click="run('happy')">
    				<div @click.stop="play">呵呵</div>
    			</div>
    			
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			new Vue({
    				el:'#app',
    				data:{
    					count:1,
    					count2:1,
    					msg:'hello'
    				},
    				methods:{ // 方法
    					run(x){
    						alert(this.msg+x);
    					},
    					play(){
    				
    						alert('this is a test'+this.msg);
    					}
    				}
    			})
    		</script>

数据的双向绑定 单选框 多选框 下拉列表

  • :value @input 等同于 v-model

     	<div id="app">
 			<!-- v-model 表单中的双向数据绑定 -->			
 			<input type="text" v-model="msg">
 			{{msg}}	
 					
 			<!-- :value  @input  等同于  v-model-->
 			<input type="text" :value="msg2" @input="play">
 			{{msg2}}
 			
 			<!-- 复选框实现双向数据绑定 -->
 			<input type="checkbox" v-model="tag" value="爬山">爬山
 			<input type="checkbox" v-model="tag" value="看书">看书
 			<input type="checkbox" v-model="tag" value="逛街">逛街
 			{{tag}}
 			
 			<!-- 作业1. 单选框实现双向数据绑定 -->
 			<input type="radio" v-model="sex" value="0">男
 			<input type="radio" v-model="sex" value="1">女
 			{{sex}}
 			
 			<!-- 下拉列表框双向数据绑定 -->
 			<select v-model="city">
 				<option value="北京">北京</option>
 				<option value="天津">天津</option>
 				<option value="上海">上海</option>
 			</select>
 			{{city}}
 		</div>
 		<script src="vue.js"></script>
 		<script>
 			new Vue({
 				el:'#app',
 				data:{
 				   msg:'hello',
 				   msg2:'happy',
 				   tag:[],
 				   city:'上海',
 				   sex:'1'
 				},
 				methods:{
 					play(e){
 						console.log(e.target.value);
 						this.msg2 = e.target.value;
 					}
 				}
 			})
 		</script>

点击显示与隐藏

	<div id="app">
		<!-- 显示隐藏 -->
		<button @click="bool=!bool">显示或隐藏</button>
		{{bool}}
		<!--   v-if：移除子組件或标记    
		      v-show：display:none或 display:block -->
		<div class="box" v-show="bool">盒子</div>
	</div>
	<script src="vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				bool:true
			}
		})
	</script>

过滤器(私有过滤器+全局)

    <div id="app">
    //getD是方法 price是参数
    			{{price |getD }}
    			{{msg | getRev}}
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			// 全局过滤器
    			Vue.filter('getRev',function(x){
    				return x.split('').reverse().join('');
    			})
    			new Vue({
    				el:'#app',
    				data:{
    					price:998,
    					msg:'helloworld'
    				},
    				filters:{ /*局部过滤器*/
    					getD(x){
    						return '$'+x;
    					}
    				}
    			})
    		</script>
avatar
文章
阅读
粉丝