zoukankan      html  css  js  c++  java
  • Vue常见指令

    文本相关指令

    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ msg }}</p>
        <!-- eg:原文本会被msg替换 -->
        <p v-text='msg'>原文本</p>
        <!-- 可以解析带html标签的文本信息 -->
        <p v-html='msg'></p>
        <!-- v-once控制的标签只能被赋值一次 -->
        <p v-once>{{ msg }}</p>
    </div>
    <script type="text/javascript">
    	// 指令: 出现在html标签中可以被vue解析处理的全局属性
    	new Vue({
    		el: "#app",
    		data: {
    			msg: "message"
    		}
    	})
    </script>
    

    斗篷指令

    <style type="text/css">
        [v-cloak] { display: none; }
    </style>
    <div id="app" v-cloak>
        {{ msg }}
    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			msg: "message"
    		}
    	})
    </script>
    <!-- 避免页面闪烁-->
    

    属性指令

    <!-- 给自定义全局属性绑定变量 -->
    <p v-bind:abc="abc"></p>
    <!-- 以原字符串形式绑定全局属性 -->
    <p v-bind:title="'abc'"></p>
    
    <!-- 单类名绑定 -->
    <p v-bind:class="c1"></p>
    <!-- 多类名绑定 -->
    <p v-bind:class="[c2, c3]"></p>
    <!-- 类名状态绑定 -->
    <p v-bind:class="{c4: true|false|var}"></p>
    <!-- 多类名状态绑定 -->
    <p v-bind:class="[{c5: true}, {c6: flase}]"></p>
    
    <!-- 样式绑定 -->
    <div :style="div_style"></div>
    <div :style="{ '100px', height: '100px', backgroundColor: 'blue'}"></div>
    <script type="text/javascript">
    	new Vue({
    		el:"#app",
    		data: {
                abc: "abc",
                c1: "p1",
                c2: "p2",
                c3: "p3",
    			div_style: {
    				 "200px",
    				height: "200px",
    				backgroundColor: "cyan"
    			}
    		}
    	})
    </script>
    <!-- v-bind: 指令可以简写为 : -->
    

    事件指令

    <!-- v-on: 指令 简写 @ -->
    <!-- 不传参事件绑定,但事件回调方法可以获取事件对象 -->
    <p @click="fn"></p>
    <!-- ()可以传入具体实参 -->
    <p @click="fn()"></p>
    <!-- ()情况下,事件对象应该显式传入 -->
    <p @click="fn($event)"></p>
    

    表单指令

    <div id="app">
        <!-- v-model针对于表单元素 -->
        <form action="" method="get">
            <!-- 1、双向绑定:服务于文本输入框 -->
            <!-- v-model存储的值为输入框的value值 -->
            <div>
                <input type="text" name="usr" v-model="in_val">
                <input type="password" name="ps" v-model="in_val" >
                <textarea name="info" v-model="in_val"></textarea>
            </div>
    
            <!-- 2、单选框 -->
            <div>
                <!-- 单选框是以name进行分组,同组中只能发生单选 -->
                <!-- v-model存储的值为单选框的value值 -->
                男:<input type="radio" name="sex" value="男" v-model="ra_val">
                女:<input type="radio" name="sex" value="女" v-model="ra_val">
                {{ ra_val }}
            </div>
    
            <!-- 3、单一复选框 -->
            <!-- v-model存储的值为true|false -->
            <!-- 或者为自定义替换的值 -->
            <div>
                <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
                {{ sin_val }}
            </div>
    
            <!-- 4、多复选框 -->
            <!-- v-model存储的值为存储值多复选框value的数组 -->
            <div>
                <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
                <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
                <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
                {{ more_val }}
            </div>
        </form>
    </div>
    
    <script type="text/javascript">
    	new Vue({
    		el: '#app',
    		data: {
    			in_val: '',
    			// 默认值可以决定单选框默认选项
    			ra_val: '男',
    			// 默认值为true,单一复选框为选中,反之false为不选中
    			sin_val: '',
    			// 数组中存在的值对应的复选框默认为选中状态
    			more_val: ['喜好女的','不挑']
    		}
    	})
    </script>
    

    条件指令

    <div id="app">
        <button @click="toggle">显隐切换</button>
        <!-- v-if -->
        <div class="box r" v-if="isShow"></div>
        <!-- v-show -->
        <div class="box o" v-show="isShow"></div>
        <!-- 1.条件渲染的值为true|false -->
        <!-- 2.true代表标签显示方式渲染 -->
        <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
    
        <!-- v-if v-else-if v-else 案例 -->
        <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>
        <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
        <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
    
        <!-- v-show 案例 -->
        <ul>
            <li @mouseover="changeMain(0)">red</li>
            <li @mouseover="changeMain(1)">green</li>
            <li @mouseover="changeMain(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="main red" v-show="whoShow(0)">...</div>
        <!-- green页面逻辑结构 -->
        <div class="main green" v-show="whoShow(1)">...</div>
        <!-- blue页面逻辑结构 -->
        <div class="main blue" v-show="whoShow(2)">...</div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			isShow: false,
    			tag: 0,
    			flag: 0
    		},
    		methods: {
    			toggle () {
    				this.isShow = !this.isShow;
    			},
    			changeWrap (num) {
    				this.tag = num;
    			},
    			changeMain (num) {
    				// this.flag num
    				this.flag = num;
    			},
    			whoShow (num) {
    				// this.flag num
    				return this.flag == num;
    			}
    		}
    	})
    </script>
    

    循环指令

    <div id="app">
        <h1>{{ msg }}</h1>
        <!-- v-for="item in items" -->
        <!-- 遍历的对象: 数组[] 对象(字典){} -->
        <ul>
            <li>{{ list[0] }}</li>
            <li>{{ list[1] }}</li>
            <li>{{ list[2] }}</li>
            <li>{{ list[3] }}</li>
            <li>{{ list[4] }}</li>
        </ul>
    
        <!-- n为遍历的元素值 -->
        <ul>
            <li v-for="n in list">{{ n }}</li>
        </ul>
    
        <!-- 一般列表渲染需要建立缓存 -->
        <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
        <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
        <ul>
            <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
        </ul>
    
        <ul>
            <li>{{ dic['name'] }}</li>
            <li>{{ dic.age }}</li>
            <li>{{ dic.gender }}</li>
        </ul>
    
        <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
        <ul>
            <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
        </ul>
    
    
        <!-- 遍历的嵌套 -->
        <div v-for="(person, index) in persons" :key="index" style="height: 21px;">
            <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
        </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			msg: "列表渲染",
    			list: [1, 2, 3, 4, 5],
    			dic: {
    				name: 'zero',
    				age: 88888,
    				gender: 'god'
    			},
    			persons: [
    				{name: "zero", age: 8},
    				{name: "egon", age: 78},
    				{name: "liuXX", age: 77},
    				{name: "yXX", age: 38}
    			]
    		}
    	})
    </script>
    

    todolist案例

    <div id="app">
        <div>
            <input type="text" v-model="val">
            <button type="button" @click="submitMsg">提交</button>
        </div>
        <ul>
            <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
        </ul>
        {{ list }}
    </div>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			val: "",
    			list: []
    		},
    		methods: {
    			submitMsg () {
    				if (this.val) {
    					this.list.push(this.val);
    					this.val = ""
    				}
    			},
    			removeMsg(index) {
    				this.list.splice(index, 1)
    			}
    		}
    	})
    </script>
    
  • 相关阅读:
    java基础部分的一些有意思的东西。
    antdvue按需加载插件babelpluginimport报错
    阿超的烦恼 javaScript篇
    .NET E F(Entity Framework)框架 DataBase First 和 Code First 简单用法。
    JQuery获得input ID相同但是type不同的方法
    gridview的删除,修改,数据绑定处理
    jgGrid数据格式
    Cannot read configuration file due to insufficient permissions
    Invoke action which type of result is JsonResult on controller from view using Ajax or geJSon
    Entity model数据库连接
  • 原文地址:https://www.cnblogs.com/wanlei/p/10385841.html
Copyright © 2011-2022 走看看