05 vue 内部指令

其他 2018-11-06 03:45:42 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lucky9322/article/details/82384180

Vue2.0 内部指令学习记录

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Hello world</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>
  1. 在script代码中先实例化 vue对象
  2. el 选项通过值#app与 id值为app的div标签进行关联
  3. data选项作为返回数据
  4. 在关联的div标签中通过{{}} 来引用返回数据值

v-if & v-else & v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>V-if&V-else&V-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>V-if&V-else&V-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好，zhangdd</div>
        <div v-else>你好，请先登录</div>

        <hr>
        <div v-show="isLogin">你好，zhangdd</div>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:'#app',
            data:{
                isLogin:true
            }
        })
    </script>
</body>
</html>

v-if是vue的一个内部指令，指令用在html中用来判断是否加载html的DOM

  1. 当 data选项中isLogin为true时显示你好，zhangdd
  2. 当为false时显示你好，请先登录

v-show 调整css中的display属性值，根据isLogin的值来控制是否显示

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>V-for 案例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>V-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items1">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="student in sortStudents">
                {{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app =new new Vue({
            el:'#app',
            data:{
                items:[20,23,18,7,32,19,54,56,41],
                items1:[20,23,18,7,32,19,54,56,41],
                students:[
                    {name:'jspang',age:33},
                    {name:'panda',age:30},
                    {name:'lucky',age:26},
                    {name:'zhangdd',age:15}
                ]
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sortNumber);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        })
        function sortNumber(a,b){
            return a-b;
        }

        //数组对象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
        }

    </script>
</body>
</html>

v-for 指令是循环渲染data中的数组，v-for指令需要以item in items的语法去使用items 是源数据数组并且item是数组元素迭代的别名。

  1. 做了三个循环的显示，分别是

    • 无序按照原数组顺序进行显示
    • 数字排序
    • 自定义排序

  2. computed 选项中做计算操作，需要注意的是该选项中如果不是对data选项的数据做赋值操作，需要重新定义一个匿名变量，同时html中在使用v-for指定进行循环使用时用新定义的这个。

v-text & v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-text & V-html</title>
</head>
<body>
    <h1>V-text & V-html </h1>
    <hr>
    <div id="app">
        <span>{{message}}</span>=<span v-text="message"></span>
        <hr>
        <span v-html="messageHtml"></span>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:'#app',
            data:{
                message:'hello world',
                messageHtml:"<h1>hello world</h1>"
            }
        })
    </script>
</body>
</html>

在html中输出data选项中的值可以使用{{xxx}}来完成，但是这么做存在一定的弊端，当网速很慢或者javascript出错时在html中显示的直接就是{{xxx}}。v-text就是解决这个问题的。

  1. 通过v-text指定赋值data选项里的内容就可以得到对应的值
  2. 同时保证了在javascript出错或者网速慢的时候不会出现不友好的{{xxx}}现象

如果data选项中的值为html标签，在通过{{xxx}} 或者v-text进行输出时，现象是无法输出或者原数据输出，即无法解析。这个时候就需要使用v-html指定来完成操作了。

但是v-html指定在使用时有一定的弊端。在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on 事件监听器</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on 事件监听器</h1>
    <hr>

    <div id="app">
        本场比赛得分 {{count}}
        <br>
        <button v-on:click="addScore">加分</button>
        <button @click="descScore">减分</button>
        <br>
        <input type="text" v-on:keyup.enter="onEnter" v-model="secondScore">
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data () {
                return {
                    count:0,
                    secondScore:1
                }
            },
            methods: {
                addScore:function(){
                    this.count++;
                },
                descScore:function(){
                    this.count--;
                },
                onEnter:function(){
                    this.count+=parseInt(this.secondScore)
                }
            }
        })
    </script>
</body>
</html>

v-on就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码

另外v-on也有简写的方式通过@代替

  1. v-on:click="addScore"关联一个addScore方法
  2. 在methods选项中实现对应方法
  3. 同样的方式通过@click="descScore"关联descScore方法
  4. 在methods选项中实现对应方法

另外还可以和键盘事件进行绑定

  1. v-on:keyup.enter="onEnter" 将回车键和onEnter方法进行关联
  2. 在methods选项中实现对应的方法
  3. v-model 是数据源的绑定即绑定值为data选项中对应的值

v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-model 实例</h1>
    <hr>
    <div id="app">
        <p>原始文本信息</p>{{message}}
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-model.number: <input type="text" v-model.number="message"></p>
        <p>v-model.trim: <input type="text" v-model.trim="message"></p>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <h3>多选按钮绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <h3>多选绑定一个数组</h3>
        <input type="checkbox" id="JSPang" value="JSPang" v-model="web_name">
        <label for="JSPang">JSPang</label>
        <input type="checkbox" id="panda" value="panda" v-model="web_name">
        <label for="panda">panda</label>
        <input type="checkbox" id="panpan" value="panpan" v-model="web_name">
        <label for="panpan">panpan</label>
        <p>{{web_name}}</p>
        <h3>单选按钮绑定</h3>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="two">女</label>
        <p>{{sex}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello world',
                    isTrue: false,
                    web_name:[],
                    sex:'男'
                }
            }
        })
    </script>
</body>

</html>

v-model指定用来完成数据绑定的功能。

v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-bind 实例</h1>
    <hr>
    <div id="app">
        <p>
            <img v-bind:src="imgSrc" width="200px"></p>
        <p><a :href="web_url" target="_blank">百度</a></p>
        <hr>
        <div :class="className">1. 绑定Class</div>
        <div :class="{classA:isOk}">2. 绑定Class中的判断</div>
        <input type="checkbox" id="isOk" v-model="isOk">
        <label for="isOk">{{isOk}}</label>
        <div :class="[classA,classB]">3. 绑定Class中的数组</div>
        <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
        <div :style="{color:red,fontSize:font}">5、绑定style</div>
        <div :style="styleObject">6、用对象绑定style样式</div>
    </div>
    <style>
        .classA {
            color: red }

        .classB {
            font-size: 150% }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    imgSrc: 'https://www.baidu.com/img/bd_logo1.png?where=super',
                    web_url: 'https://www.baidu.com',
                    className: 'classA',
                    isOk: false,
                    classA: 'classA',
                    classB: 'classB',
                    red:'red',
                    font:'20px',
                    styleObject:{
                        color:'green',
                        fontSize:'24px'
                    }
                }
            }
        })
    </script>
</body>

</html>

v-bind是处理HTML中的标签属性的，和v-on``v-model同为绑定，只不过绑定的点不一样

v-pre & v-cloak & v-once

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-pre & v-cloak & v-once 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-pre & v-cloak & v-once 实例</h1>
    <hr>
    <div id="app">

        <div v-pre>{{message}}</div>
        <div v-cloak>渲染完成后才会显示</div>

        <p v-once>第一次绑定的值： {{message}}</p>
        <input type="text" v-model="message">
        <div>{{message}}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello world'
                }
            }
        })
    </script>
</body>

</html>

v-pre 可以跳过vue的编译直接输出原始值即{{xxx}}

v-cloak 在页面进行加载时，只有加载完成后才会显示的内容

v-once 在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程

这里写图片描述

猜你喜欢

转载自blog.csdn.net/lucky9322/article/details/82384180
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022