zoukankan      html  css  js  c++  java
  • 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    文本类指令、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    一、文本操作

    • v-text:文本变量
    <p v-text='msg'></p>
    <p>{{ msg }}</p>
    
    • v-once:一次性文本赋值,只能被赋值一次,后期无法更改
    <p v-once>{{ msg }}</p>
    
    • v-html:html文本变量,可以解析html标签
    <p v-html='msg'></p>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<b>文本</b>'
            }
        })
    </script>
    
    • v-model:双向数据绑定,控制表单元素的value值
    <div id="app">
    	<input type="text" v-model='msg'>
    	<p>{{ msg }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: ''
            }
        })
    </script>
    
    采用文本指令后,页面标签的内容由vue控制,原来用于标签的文本均会被vue中数据替换
    • 文本操作案例
    <body>
    	<div id="app">
    		<!-- html全局属性语法: 全局属性名="属性值" -->
    		<p v-bind:title="title" a="a" b="b">hello</p>
    
    		<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
    		<input type="text" v-model="msg">
    		<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
    		<p>{{ msg }}</p>
    		<!-- eg:原文本会被msg替换 -->
    		<p v-text='msg'>原文本</p>
    		<!-- 可以解析带html标签的文本信息 -->
    		<p v-html='msg'></p>
    		<!-- v-once控制的标签只能被赋值一次 -->
    		<p v-once>{{ msg }}</p>
    	</div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
    	// 指令: 出现在html标签中可以被vue解析处理的全局属性
    	new Vue({
    		el: "#app",
    		data: {
    			title: "",
    			msg: "message"
    		}
    	})
    </script>
    

    二、避免页面闪烁

    • v-cloak:避免页面加载闪烁
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    
    <div id="app" v-cloak>
        
    </div>
    

    三、重要指令(v-bind、v-on、v-model)

    1、v-bind:该指令绑定的是属性(html标签的全局属性)

    **v-bind: 可以简写为 : **

    <div :class='a'></div>
    
    <!-- 值a,两个字符串嵌套使用表示普通字符串 -->
    <div v-bind:class='"a"'></div>
    
    <!-- 变量a -->
    <div v-bind:class='a'></div>
    
    <!-- 变量a, b,class由两个变量 a,b 同时控制 -->
    <div v-bind:class='[a, b]'></div>
    
    <!-- a为class值(类名),isA决定a是否存在(ture | false) ,即类名 a(显示 | 隐藏)-->
    <div v-bind:class='{a: isA}'></div>
    
    <!-- 多class值:是否存在,class的值(类名)为“a b”,isA与isB控制class的值是否存在 -->
    <div v-bind:class='{a: isA, b: isB}'></div>
    
    <!-- class的值(类名)为a b ,t与tt控制‘a b’是否存在 -->
    <div v-bingd:class[{a:t}, {b:tt}]></div>
    
    <!-- 多style值,my_color为变量,cyan为普通值 -->
    <div :style='{color:my_color, background:"cyan"}'></div>
    

    2、v-on: 绑定的是事件,操作的是事件对应的方法名

    v-on: 简写为 @ ,即 v-on:click <====> @click

    <!-- 绑定函数fn1,将事件event传递过去,回调时可以取到事件ev -->
    <div v-on:click='fn1'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(ev){
                	console.log(ev);
            	}
            }
        })
    </script>
    
    <!-- 绑定函数fn2,并将自定义参数10传递过去,回调时只能取到自定义参数,事件参数ev丢失 -->
    <div @click='fn2(10)'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(num){
                	console.log(num);
            	}
            }
        })
    </script>
    
    <!-- 绑定函数fn3,并将事件event与自定义参数10传递过去,回调时可以取到事件ev和自定义参数 -->
    <!-- $event 事件参数为固定写法 -->
    <div @click='fn2($event, 10)'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(ev,num){
                	console.log(ev);
            	}
            }
        })
    </script>
    

    3、v-model 数据具有双向绑定,绑定的是value,

    <!--1. 两个input绑定同一个val,那么其中一个input的内容改变会映射到另一个input -->
    <input type="text" v-model='val' />
    <textarea v-model='val'></textarea>
    
    
    <!--2. 单个复选框:选中与否val默认值为true|false ,true选框选中会向后台提交数据,false选框未选中,不向后台提交数据 -->
    <input type="checkbox" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:true    // 设置默认为选中
            }
        })
    </script>
    
    
    <!--3. 通过true-value|false-value修改默认值为true|false -->
    <input type="checkbox" v-model='val' true-value="选中" false-value="未选中" />
    
    <!--4. 多个复选框:val作为数组[]来使用,可以存储选中元素的value值,反之数组有对应value代表该选框选中 -->
    <!-- 出现在数组中的值为选中状态 -->
    <!-- 出现在数组中的值为选中状态 -->
    <input type="checkbox" value="basketball" v-model='val' />
    <input type="checkbox" value="football" v-model='val' />
    <input type="checkbox" value="pingpong" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:["basketball"]
            }
        })
    </script>
    
    
    <!--5. 多个单选框:val存储选中的单选框的value值 -->
    <!-- 变量val的值为哪个单选框中的value值,那么该单选框为选中状态 -->
    <input type="radio" value="男" v-model='val' />
    <input type="radio" value="女" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:"男"
            }
        })
    </script>
    

    四、条件渲染

    • v-if:值true会被渲染,值false不会被渲染
    <div id="app">
    	<div v-if='isShow'>div div div</div>
        <button @click='isShow = !isShow'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>
    
    • v-else:与v-if结合使用形成对立面
    <div id="app">
    	<div v-if='isShow'>div div div</div>
        <div v-else='isShow'>DIV DIV DIV</div>
        <button @click='isShow = !isShow'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>
    
    • v-else-if:变量的多情况值判断
    <div id="app">
    	<div v-if='tag == 0'>if if if</div>
        <div v-else-if='tag == 1'>else if else</div>
        <div v-else='tag == 2'>else else else</div>
        <input type='number' min='0' max='2' v-model='tag' />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tag: 0
            }
        })
    </script>
    
    • template:不被渲染的vue结构标签
    <template v-if="isShow">
        <p>用template嵌套</p>
        <p>可以为多行文本</p>
        <p>同时显隐</p>
        <p>且template标签不会被vue渲染到页面</p>
    </template>
    
    • v-show:一定会被渲染到页面,以display属性控制显隐
    • key:为v-if方式的显隐创建缓存,提高效率
    <div id="app">
    	<div v-if='tag == 0' key='0'>if if if</div>
        <div v-else-if='tag == 1' key='1'>else if else</div>
        <div v-else='tag == 2' key='2'>else else else</div>
        <input type='number' min='0' max='2' v-model='tag' />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tag: 0
            }
        })
    </script>
    

    五、列表渲染

    • v-for:循环渲染列表
    <div id="app">
    	<ul>
    		<li v-for='item in items'>{{ item }}</li>
    	</ul>
        <button @click='click'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                items: ['张三', '李四', '王五']
            },
            methods: {
            	click: function () {
            		this.items.splice(1, 1, '李大大');
            		this.items.pop();
            		this.items.push('赵六')
            	}
            }
        })
    </script>
    
    • 遍历数组
    // items: ['张三', '李四', '王五']
    
    // 值
    <ul>
        <li v-for='item in items'>{{ item }}</li>
    </ul>
    <!-- 值, 索引,一般列表渲染需要建立缓存 -->
    <ul>
        <li v-for='(item, index) in items' :key="index">{{ index }} - {{ item }}</li>
    </ul>
    
    • 遍历对象
    // {'name': '张三', 'age': 18, 'sex': '男'}
    
    // 值
    <div v-for="value in object">
      {{ value }}
    </div>
    // 值, 键
    <div v-for="(value, key) in object">
      {{ key }}: {{ value }}
    </div>
    // 值, 键, 索引
    <div v-for="(value, key, index) in object">
      {{ index }}. {{ key }}: {{ value }}
    </div>
    
    
    • 嵌套数据渲染
    // items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
    <div>
        <div>{{ items[0].name }}</div>
        <div>{{ items[1].age }}</div>
        <div>{{ items[2].sex }}</div>
    </div>
    

    v-if、v-show与v-for案例

    • v-if
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <style type="text/css">
            .box {
                 200px;
                height: 200px;
            }
    
            .r {
                background-color: red
            }
    
            .o {
                background-color: orange
            }
        </style>
        <style type="text/css">
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .wrap, .main {
                 500px;
                height: 240px;
            }
            li {
                float: left;
                background-color: #666;
                margin-right: 20px;
            }
            ul:after {
                content: "";
                display: block;
                clear: both;
            }
            .red {background-color: red}
            .green {background-color: green}
            .blue {background-color: blue}
        </style>
    </head>
    <body>
    <div id="app">
        <ul>
            <li @mouseover="changeWrap(0)">red</li>
            <li @mouseover="changeWrap(1)">green</li>
            <li @mouseover="changeWrap(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="wrap red" v-if="tag == 0" key="0">...</div>
        <!-- green页面逻辑结构 -->
        <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
        <!-- blue页面逻辑结构 -->
        <div class="wrap blue" v-else key="2">...</div>
    </div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isShow: false,
                tag:""
            },
            methods: {
                changeWrap(num) {
                    this.tag = num;
                }
            }
        })
    </script>
    
    • v-show
    <style type="text/css">
        .btn_wrap {
             660px;
            margin: 0 auto;
        }
        .btn_wrap:after {
            content: '';
            display: block;
            clear: both;
        }
        .btn {
             200px;
            height: 40px;
            border-radius: 5px;
            float: left;
            margin: 0 10px 0;
        }
        .box {
             660px;
            height: 300px;
        }
        .b1 {background-color: red}
        .b2 {background-color: orange}
        .b3 {background-color: cyan}
    
        .box_wrap {
             660px;
            margin: 10px auto;
        }
    </style>
    
    <div id="app">
        <div class="btn_wrap">
            <div class="btn b1" @click='setTag(0)'></div>
            <div class="btn b2" @click='setTag(1)'></div>
            <div class="btn b3" @click='setTag(2)'></div>
        </div>
        <div class="box_wrap">
            <div class="box b1" v-show='isShow(0)'></div>
            <div class="box b2" v-show='isShow(1)'></div>
            <div class="box b3" v-show='isShow(2)'></div>
        </div>
    </div>
    
    
    <script type="text/javascript">
    	new Vue({
    		el: '#app',
    		data: {
    			tag: 0
    		},
    		methods: {
    			isShow (index) {
    				return this.tag === index;
    			},
    			setTag (index) {
    				this.tag = index;
    			}
    		}
    	})
    </script>
    
    • v-for
    <div id="app">
        <div>
            <input type="text" v-model="inValue">
            <button @click='pushAction'>提交</button>
        </div>
        <ul>
            <li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
    </div>
    
    
    <script type="text/javascript">
    	new Vue({
    		el: '#app',
    		data: {
    			inValue: '',
    			list: []
    		},
    		methods: {
    			pushAction: function () {
    				this.list.push(this.inValue);
    				this.inValue = ''
    			},
    			deleteAction: function (index) {
    				this.list.splice(index, 1);
    			}
    		}
    	})
    </script>
    
  • 相关阅读:
    Serialization and deserialization are bottlenecks in parallel and distributed computing, especially in machine learning applications with large objects and large quantities of data.
    Introduction to the Standard Directory Layout
    import 原理 及 导入 自定义、第三方 包
    403 'Forbidden'
    https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
    These interactions can be expressed as complicated, large scale graphs. Mining data requires a distributed data processing engine
    mysqldump --flush-logs
    mysql dump 参数
    mysql dump 参数
    如果是在有master上开启了该参数,记得在slave端也要开启这个参数(salve需要stop后再重新start),否则在master上创建函数会导致replaction中断。
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9872596.html
Copyright © 2011-2022 走看看