Vue.JS基础以及本地指令:v-text,v-html,v-on,v-show

 Lan   2020-06-18 19:44   614 人阅读  0 条评论

为了不让这位爷的青春终结,我来日更了。image.png感谢各位的支持。

这几天学了点Django,感觉js也得接触下了,于是看到学习站上有一套黑马程序员的4小时快速入门Vue.js的教程,发现Vue.Js似乎挺容易的。

Vue.Js官方文档:https://cn.vuejs.org/v2/guide/

第一个指令:v-text:设置标签的文本值(textContent)

首先如果要在网页中使用Vue.Js的话就得先引用Vue(在官方文档有两句,第一句适合开发环境,会有相应提示,第二句更加的快,适合生成环境)

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

到这里代码就分为两部分了,一部分写在Html中,一部分写在JS中(大概就是用过JS渲染HTML内容了)。

打开了尘封已久的VS Code,并写入了对于Vue的HelloWorld

image.png

首先来解释一下这两句话(凭个人感觉理解):

首先是html里面的这句,新建一个div,ID为Lan,为了方便JS操作的时候找得到这个

    <!-- www.lanol.cn -->
    <div id="Lan">
        {{ message }}
    </div>

这里应该是新建一个app,vue型的,el是选择中我们之前创建的div,data就是数据,message就是我们要展现的text

            var app = new Vue({
                el: '#Lan',
                data: {
                    message: 'Hello Vue!'
                }
            })

首先呢,这个message有两种写法,第一种就是我们刚刚写的Hello Vue这种,用{{}}包围起来,这种写法不会清除原有的内容,

    <!-- www.lanol.cn -->
    <div id="Lan">
        {{ message }}
    </div>

而另一种写法就是写在标签的属性区,这样写也是可以的。

    <!-- www.lanol.cn -->
    <div id="Lan" v-text='message'>
    </div>

image.png

然后我们来对比一下两者的区别。

    <!-- www.lanol.cn -->
    <div id="Lan">
        <h2>{{message}}www.lanol.cn</h2>
        <h2 v-text='message'>www.lanol.cn</h2>
    </div>

image.png

由图可以看见,放在{{}}内的www.lanol.cn显示出来了而放在属性区的则看不见了,这就是两者区别了。

在这里面你还可以进行字符串的拼接等操作,如果是{{}}直接加就可以了,而属性区则需要一个+号和引号(因为我包含message用的是单引号,所以里面只能用双引号了如果Python一样)

    <div id="Lan">
        <h2>{{message}}www.lanol.cn</h2>
        <h2 v-text='message'>www.lanol.cn</h2>
        <h2 v-text='message+"www.lanol.cn"'></h2>
    </div>

image.png

然后需要注意的是message内的内容可以是列表、字典等数据类型(用python的话说)

第二个指令:v-html:设置标签的innerhtml(说白了就是用JS写HTMl)

这个指令呢就对比着上一个v-text来记录一下。

<body>
    <!-- www.lanol.cn -->
    <div id="Lan">
        <h2 v-text='message'></h2>
        <h2 v-html='message'></h2>
    </div>

    <script>
        var app = new Vue({
            el: '#Lan',
            data: {
                message: '<h1>www.lanol.cn</h1>'
            }
        })
    </script>
</body>

image.png

可以看见使用了v-text的被直接显示出来了,而v-html则被渲染了,就这?就这。

第三个指令:v-on:为元素绑定事件(click,dblclick,monseenter)

使用方法:

    <div id="Lan">
        <input type="button" value="按钮" v-on:事件名="方法">
        <input type="button" value="按钮" @事件名="方法">
    </div>
var app = new Vue({
    el:"#Lan",
    methods:{
    dolt:function(){
    }
    }
)}

这里有两种写法,第一个是v-on:事件名="方法",第二个是比较简便的只需要@即可

然后这里就只演示一下click的事件

<body>
    <div id="Lan">
        <input type="button" value="点击按钮" v-on:click="dolt">
        <input type="button" value="点击按钮" @click="dolt">
    </div>

    <script>
        var app = new Vue({
            el: '#Lan',
            methods: {
                dolt: function() {
                    console.log("Lan点击了按钮")
                }
            }
        })
    </script>
</body>

image.png

click.gif到此,三个基本指令已经写完了,发现掌握一个东西的最好办法就是将他自己用文字写一遍,就像我这样写一篇笔记,记录一下。

最后这是一个点击就数字就增加或减少的DEMO,过大过小则提示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJS基本指令学习By:Lan</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="Lan">
        <input type="button" value="加" @click="add">
        <input type="button" value="减" @click="sub">
        <h2>{{num}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: '#Lan',
            data: {
                num: 1
            },
            methods: {
                add: function() {
                    if (this.num > 20) {
                        alert('太大了')
                    } else {
                        this.num++;
                        console.log(this.num)
                    }
                },
                sub: function() {
                    if (this.num <= 0) {
                        alert('太小了')
                    } else {
                        this.num--;
                        console.log(this.num)
                    }
                },
            }
        })
    </script>
</body>

</html>

第四个指令:v-show:根据条件决定元素是否显示(并不会从dom树中删除)。

这里呢继续用上一个DEMO来展示。给h2标签加一个v-show='true'

image.png

再将这个ture改为false来看一下,发现已经隐藏了,但是源码里面还是可以看得到的

image.png

这个true和false就和Python里面的if条件一样,也可以用其他办法来确定真假,如数字未满18则不显示。

<h2 v-show='num>=18'>{{num}}</h2>

因为一开始是1,所以不会显示。image.png

然后我们不断点击加知道超过18看看。

image.png

第五个指令:v-if:根据表达式的真假切换元素的显示状态。

本质是通过操纵dom元素来切换显示状态,表达式的值为true,元素存在于dom树中,为false从dom树中移除

<h2 v-if='num>18'>{{num}}</h2>

image.png

image.png

第六个指令:v-bind:设置元素的属性(src,title,class)。

<body>
    <div id="Lan">
        <img v-bind:src="imgSrc" v-bind:title='imgTitle'><br>
        <img :src="imgSrc" :title='imgTitle'><br>
    </div>
    <script>
        var app = new Vue({
            el: '#Lan',
            data: {
                imgSrc: 'https://www.lanol.cn/zb_users/theme/blogs/image/logo.png',
                imgTitle: 'https://www.lanol.cn'
            },
        })
    </script>
</body>

image.png

本文地址:https://www.lanol.cn/post/295.html
版权声明:本文为原创文章,版权归 Lan 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?