• Vue.js总结 [2017.6.5]


    <head>

      <script src="https://unpkg.com/vue/dist/vue.js"></script>

    </head>

    <body>

      //所有 v- 都为指令,表示它们是Vue的特殊属性

      <span v-bind:title="xxx"></span>    v-bind   【控制属性】

      <span :class="{red:isRed}"></span> 简写 【判断class是否为isRed】

      <span :class="[classA,classB]"></span> 【数组,两个class,可赋值】

      <span :class="[classA,{classB:isB,classC:isC}]"></span>  【数组,第一个为字符串可赋值,第二个判断class是否展现不可赋值】

      <span v-if="seen"></span>    v-if 条件与循环【如果seen为true则显示】

      <span v-show="seen"></span>  【如果seen为true则显示】

      <span v-for="todo in todos">{{todo.text}}</span>   v-for【绑定数组的数据来渲染一个项目列表】

      <span v-on:click="reverseMessage"></span>   v-on【绑定一个事件监听器】[在methods使用]

      <span @click="reverseMessage"></span>   [在methods使用]

      //渲染数据  

      <p v-text="a"></p>

      <p v-html="a"></p>

      {{}}

    </body>

    <script>

      var vm = new Vue(){}  //创建Vue

      //v-bind:tltle="message"

        var vm = new Vue(){

          el:'标签名/id/className [例如:#id]',

          data:{

           message:'页面加载中'

          }

        }

      //v-if="seen"

        var vm = new Vue(){

          el:'标签名/id/className [例如:#id]',

          data:{

           seen:true

          }

         }

      //v-for="todo in todos"

        var vm = new Vue(){

          el:'标签名/id/className [例如:#id]',

          data:{

           todos:[

            {text:"HTML"},

            {text:"css"},

            {text:"java"}

            ]

          }

         }

        vm.todos.push({text:'新项目'})

      //v-on:click="reverseMessage"

      //vue.js组件的重要选项  

      data vue对象里用到的所有数据  model

      methods用于页面绑定的方法

      watch数据监听,数据改变时可用

      components:{}注册组件

      item 数组

       

    //如果想控制class的显示隐藏的话
    
    <div id="app">
        <li  v-bind:class="{show:item.isFinished}">
    	{{item.label}}
        </li>
    </div>
    
    <script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					items:[
    						{
    							label:'coding',
    							isFinished:false
    						},
    						{
    							label:'walking',
    							isFinished:true
    						}				
    					]
    				}
    			}
    		})
    </script>
    
    //如果想添加多个class,并给其赋值
    
    <div id="app">
        <li  v-bind:class="[class1,class2]">
    	{{item.label}}
        </li>
    </div>
    
    <script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					class1:'nihao',
    					class2:"lalala"
    				}
    			}
    		})
    </script>
    
    //如果想添加一个class
    
    <div id="app">
        <li  v-bind:class="[class12]">
    	{{item.label}}
        </li>
    </div>
    
    <script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					class12:'nihao'
    				}
    			}
    		})
    </script>
    
    //class的切换
    <div id="app">
    	<ul class="ul">
    		<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
    			{{item.label}}
    		</li>
    				
    	</ul>
    </div>
    
    <script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					items:[
    						{
    							label:'coding',
    							isFinished:false
    						},
    						{
    							label:'walking',
    							isFinished:true
    						}				
    					]
    				}
    			},
    			methods:{
    				toggleFinish:function(item){
    					item.isFinished = !item.isFinished
    				}
    			}
    		})
    	</script>
    
    //input select ,textarea 输入字符将其与其他标签绑定
    <body>
        <div id="app">
    		<input v-model='newModel' v-on:keyup.enter='addNew'/>
        </div>
    </body>
    <script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					newModel:''
    				}
    			},
    			methods:{
    				addNew:function(){
    					console.log(this.newModel)
    					this.newModel=''
    				}
    			}
    			
    			
    		})
    </script>
    
    //在input中输入字符添加到li中
    <body>
        <div id="app">
    		<input v-model='newItem' v-on:keyup.enter="addNew" />
    			<ul class="ul">
    				<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
    					{{item.label}}
    				</li>
    					
    			</ul>
    		</div>
    		
    	</body>
    	<script>
    		var i = new Vue({
    			el:'#app',
    			data:function(){
    				return{
    					items:[
    						{
    							label:'coding',
    							isFinished:true
    						},
    						{
    							label:'walking',
    							isFinished:true
    						}				
    					],
    					newItem:''
    				}
    			},
    			methods:{
    				addNew:function(){
    					this.items.push({
    						label:this.newItem,
    						isFinished:false
    					})
    					this.newItem = ''
    				}
    			}
    			
    			
    		})
    	</script>
    

     自定义事件

    vue实例实现了一个自定义事件接口,用于在组件树中通信,在这个事件系统独立于原生Dom事件,用法也不同。

    每个Vue实例都是一个事件触发器:

    1.使用$on()监听事件;

    2.使用$emit()在它上面触发事件

    3.使用$dispatch()派发事件,事件沿着父链冒泡;

    4.使用$boradcast()广播事件,事件向下传导给所有的后代

    </script>

  • 相关阅读:
    Mysql TEXT类型长度
    php中的||和or的区别 优先级
    常用的排序算法的时间复杂度和空间复杂度
    ThinkPHP 多应用多模块建立方式
    phpcms v9 后台添加修改页面空白页问题解决方法
    linux中nginx重定向方法总结
    Nginx的主要配置参数说明
    Apache多网站虚拟目录域名
    xampp命令
    (转载)处理SQL解析失败导致share pool 的争用
  • 原文地址:https://www.cnblogs.com/gqx-html/p/6946349.html
Copyright © 2020-2023  润新知