zoukankan      html  css  js  c++  java
  • Vue学习(2)---v-指令和组件

    Vue中的指令

    Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute)
    一个v-bind的例子

    	<div id="app" v-bind:title="message">
    		texttexttext
    	</div>
    
    	<script type="text/javascript">
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!'
    			}
    		})
    

    这其中 v-bind表明将div元素的title属性与message保持一致

    v-if v-for

    v-if 可以控制一个元素是否显示(当然 v-show也可以 看名字就可以看出)

    	<div id="app" v-if="seen" v-on:click="handleOnClick">
    		{{message}}
    	</div>
    
    	<script type="text/javascript">
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!',
    				seen:true
    			},
    			methods:{
    				handleOnClick:function(){
    					this.seen=!this.seen;
    				}
    			}
    		})
    

    这里用到了Vue中的v-if来控制元素的显示 v-on进行时间绑定 还有Vue中的methods属性
    改变seen的值 即可改变元素的显示(与v-show的区别之后会写)

    v-for 用来遍历一个数组来循环渲染项目

    	<div id="app">
    		<ul>
    			<li v-for="item in lists">{{item}}</li>
    		</ul>
    	</div>
    
    	<script type="text/javascript">
    		var app=new Vue({
    			el:'#app',
    			data:{
    				lists:['学编程死路一条','我嬲你妈妈憋类','妙啊~~~']
    			},
    		})
    	</script>
    


    当我们改变lists的内容时 ul标签中内容也会发生改变

    v-on 事件绑定

    	<div id="app">
    		{{message}}
    	<button v-on:click="handleOnClick">helloworld</button>
    	</div>
    
    	<script type="text/javascript">
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!',
    				seen:true
    			},
    			methods:{
    				handleOnClick:function(){
    					alert("helloworld");
    				}
    			}
    		})
    	</script>
    

    通过v-on可以绑定各种事件

    v-model 双向绑定

    v-model 可以实现输入框和数据的双向绑定(一个改变,另一个也发生改变)

    	<div id="app">
    	<input v-model="message"></input>
    	<button v-on:click="handleOnClick">giaogiaogiao</button>
    	</div>
    	<script type="text/javascript">
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!',
    				seen:true
    			},
    			methods:{
    				handleOnClick:function(){
    					this.message="giaogiaogiao"
    				}
    			}
    		})
    	</script>
    


    点击改变message的值后 input框中的数据也发生了改变

    组件化的思想

    Vue中很重要的一个思想就是组件化
    试着想想 一个网页 可以拆成各个组件 比如 顶部 底部 侧边栏 内容主题
    创建组件和使用的方式非常简单

    	<div id="app">
    		{{message}}
    	<new-component></new-component>
    	</div>
    
    	<script type="text/javascript">
    		Vue.component('newComponent',{
    			template:'<div>一个组件</div>'
    		})
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!'
    			}
    		})
    	</script>
    

    需要注意的是 Vue中 我们声明组件的方式是驼峰命名 但是html不区分大小写 所以写成标签时要用-来区别

    父子组件传值

    现在我们已经可以将页面划分成各个组件了
    但是子组件(myComponent)是无法使用父组件(app)的值 因此 我们需要一种方式将值传入子组件
    v-bind

    	<div id="app">
    		{{message}}
    	<new-component v-bind:value="text"></new-component>
    	</div>
    
    	<script type="text/javascript">
    		Vue.component('newComponent',{
    			props:['value'],
    			template:'<div>{{value}}</div>'
    		})
    		var app=new Vue({
    			el:'#app',
    			data:{
    				message:'helloworld!',
    				text:"Father-value"
    			}
    		})
    	</script>
    

    当我们使用v-bind 传值时候 需要再子组件中添加 props属性去接收这个值

    官方文档:我们也需要为每个组件提供一个“key”,稍后再作详细解释

  • 相关阅读:
    Realtime crowdsourcing
    maven 常用插件汇总
    fctix
    sencha extjs4 command tools sdk
    首次吃了一颗带奶糖味的消炎药,不知道管用不
    spring mvc3 example
    ubuntu ati driver DO NOT INSTALL recommand driver
    yet another js editor on windows support extjs
    how to use springsource tools suite maven3 on command
    ocr service
  • 原文地址:https://www.cnblogs.com/57one/p/12681133.html
Copyright © 2011-2022 走看看