Vue基础语法1（部分）

最新推荐文章于 2024-09-30 22:02:02 发布

Rabbit_Sir

最新推荐文章于 2024-09-30 22:02:02 发布

阅读量115

点赞数

分类专栏： Vue 文章标签： vue js html javascript

本文链接：https://blog.csdn.net/qq_45062721/article/details/104251199

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Vue中我们可以下载Vue的.js文件，在文件中引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="app">
    <input type="text"  v-model="age"/>
    <button @click="add()">+</button>
    <h1>{{name}} 你好! </h1>
    <h1>今年 {{age}} 岁 </h1>
    //这是响应式编程
    <h1 v-text="name">李四<<span/>你好！</h1>
    <h1 v-html="name">李四<<span/>你好！</h1>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data : {
            name : "",
            age : 0
        },
        methods : {
            add(){
                this.age++;
            }
        },
        created() {
            this.name = "<b>RabbitSir</b>";
            this.age = 20;
        }
    });
</script>
</body>
</html>

数据绑定

在上面的代码中，我们使用id选择器将 <div> 和Vue绑定起来，
下面的el就是选则它的名称，data是保存数据的地方，这里的this指的是这个vue模块，created()是在Vue生命周期中，还没加载数据的时候的钩子结点，可以使用它来初始化数据。

我们使用插值表达式将data中的数据在 <div> 中使用。但是插值表达式是有一些问题的。在频繁的刷新中我们可以看见插值表达式的源码。
我们可以使用v-html 或者v-text来解决这个问题，例如：

<h1 v-text="name">李四<<span/>你好！</h1>
<h1 v-html="name">李四<<span/>你好！</h1>

他们俩的区别就是当name属性有html标签时：

<h1 v-text="name">李四<<span/>你好！</h1>
<h1 v-html="name">李四<<span/>你好！</h1>
<script>
created() {
            this.name = "<b>RabbitSir<b>";
            this.age = 20;
        }
</script>

在这里插入图片描述
v-html和v-text是单项绑定，我们绑定数据之后，改变它的值，不会引起视图的改变，
但是v-model,是可以做到视图和模型同时改变，所以使用它的时候必须是视图也是可以改变的，比如
input，select，textarea，checkbox，radio标签
在我们上面的代码中就使用了v-model：

<input type="text"  v-model="age"/>
    <button @click="age++">+</button>

事件

我们用v-on来与标签绑定事件。

    <div style="border: red 1px dashed;" bgcolor:red onclick="console.log('div')">
        <button @click="console.log('button')">点我</button>
        我的块
    </div>

这里我们发现我们在点button的时候会触发div块的事件。这里button冒泡到div标签，这里我们在@click后面加一个.stop就行。

    <div style="border: red 1px dashed;" bgcolor:red onclick="console.log('div')">
        <button @click.stop="console.log('button')">点我</button>
        我的块
    </div>