Vue--简介、使用、模板语法_vue script在div中-CSDN博客

本文链接：https://blog.csdn.net/zxn200125/article/details/123390036

Vue.js是一个渐进式框架，以其双向数据绑定、组件化和易用性著称。本文深入介绍了Vue的基本创建、实例化，以及模板语法，包括插值、指令、修饰符和缩写。通过实例展示了如何在HTML模板中绑定数据、响应数据变化，并使用v-bind和v-on指令动态更新属性和处理事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

Vue.js是一套构建用户界面的渐进式框架，渐进式特点是“主张最少”，也就是对使用者的要求最少。其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue特点：

1.双向数据绑定。vue会自动响应数据变化情况，根据绑定关系对所有绑定在一起的数据和视图内容进行修改。

2.只关注视图层，采用自底向上增量开发的设计

3.组件化

4.使用虚拟DOM

使用

基本创建

1.引入vue.js，可以在vue.js官网下载安装包通过<script>引入，也可以使用CDN

2.基于HTML模板语法创建页面

3.使用vue渲染数据，vue应用需要进行实例化

实例化

每一个Vue应用都需要通过实例化Vue来实现，实例化Vue语法格式：

new Vue({
    //选项
})

Vue构造器中常见参数如下：

●el ：DOM元素中的id

●data：定义属性

●methods：定义函数(可通过return返回函数值)

实例演示：

    <div id="exam">
        <p>姓名：{{ name }}</p>  <!--{{ }}用于输出对象属性和函数返回值-->
        <p>年龄：{{ age }}</p>
        <p>性别：{{ gender }}</p>
        <p>{{ fun() }}</p>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                name:'张三',
                age:'20',
                gender:'男'
            },
            methods:{
                fun:function(){
                    return this.name+"是一个"+this.age+"岁的"+this.gender+"生";
                }
            }
        })
    </script>

上例中我们在Vue构造器中用el参数绑定了id位exam的div元素，所以Vue构造器中的改动全部在指定div中，外部不受影响。对于数据对象，我们在data中定义三个属性：name、age、gender，使用methods定义函数并通过return返回函数值。在div中通过{{ }}分别输出对象属性和函数返回值，从而实现了一个Vue实例的创建。

模板语法

vue.js使用基于HTML的模板语法，开发者可声明式地将DOM绑定至底层Vue实例中的数据。在底层的实现上，vue将模板编译成虚拟DOM渲染函数。

插值

文本

上面的例子中我们可以知道，使用双大括号可以输出对象属性，这是最常见的数据绑定形式。

●文本插值：文本插值：{{ message }}

使用该方式，绑定的数据对象发生改变时，插值处的内容就会随即更新。通过使用v-once指令，可以实现一次性插值，也就是数据改变时插值处的内容不会更新

●一次性文本插值：一次性文本插值：{{ message }}

通过设置计时器可以查看两者区别：

    <div id="exam">
        <p>插值：{{ msg }}</p>
        <p v-once>一次性插值：{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#exam',
            data:{
                msg:true
            }
        })
        window.setInterval(function(){
            vm.msg = !vm.msg;
        },1000)
    </script>

显示效果：

上例可以看出普通文本插值和一次性文本插值的区别，一次性文本插值不会因为绑定的对象改变而变化。

HTML

上面的双大括号会将数据解释位普通文本，而不是html代码。若想要输出html代码，需要使用v-html指令：

●html插值：

示例：

    <div id="exam">
        <p>文本插值：{{ msg }}</p>
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el:'#exam',
            data:{
                msg:"<h3>插值<h3>"
            }
        })
    </script>

显示效果：

注意：站点上动态渲染的任意HTML很容易导致XSS攻击，故应用到项目中时不能向用户提供的内容使用HTML插值，只能对可信内容使用HTML插值

属性

上述语法不能作用在html的属性上，因此对于属性我们需要用到v-bind指令

示例：

<style>
    .change{
        background-color: pink;
    }
</style>
<body>
    <div id="exam">
        <p v-bind:class="{'change':use}">属性插值</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#exam',
            data:{
                use:false
            }
        })
        window.setInterval(function(){
            vm.use = !vm.use
        },1000)
    </script>
</body>

显示效果：

上例中通过v-bind指令对样式进行了绑定，然后利用setInterval函数改变use值来实现属性的样式变化。

表达式

对于所有数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

例如：

        {{ 2+3 }}
        {{ ok ? 'yes' : 'no'}}
        {{str.split('').reverse().join('')}}

上述表达式在所属Vue实例的数据作用于下作为JavaScript被解析，但是需要注意的是，每个绑定都只能包含单个表达式

故下面的列子都无法被解析，不会生效：

        {{ var a = 1 }}  <!--语句，不会生效，不是表达式-->
        {{ if(ok) {return msg} }}  <!--流控制，不会生效，不是三元表达式-->

指令

指令是带有v-前缀的特殊属性。在表达式的值改变时，指令可将某些行为应用到DOM上

参数

一些指令能够接受一个“参数”，在指令名称之后以冒号表示。

例如：v-bind指令可以用于响应式地更新html属性：

<a v-bind:href="url">...</a>

上例中href是参数，该元素的href属性与表达式url进行绑定

动态参数

2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数：

<p v-bind:[attributeName]="url">...</p>

attributeName会被作为一个JavaScript表达式进行动态求值，求得的值会作为最终的参数来使用。

约束：

对动态参数的值来说，动态参数预期会求出一个字符串，异常情况下值为null。该值可被显性地用于移除绑定，任何其他非字符串类型的值都将触发警告。

        <!--触发编译警告-->
        <p v-bind:['example' + bar]="value">...</p>

对动态参数表达式来说，存在一定的语法约束，某些字符例如空格、引号在html属性名中无效。故我们只能使用没有空格或引号等无效字符的表达式，或用计算属性替代这种复杂表达式。在DOM中使用模板时，还需要避免使用大写字符来命名键名，因为浏览器会将属性名全部转为小写。

        <!--DOM中使用模板时会被转换为`v-bind[example]`
            实例中需要有example进行对应-->
        <p v-bind:[Example]="value">...</p>

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<p v-on:submit.prevent="onSubmit">...</p>

上例中，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

缩写

vue为v-bind和v-on两个常用指令提供了特定简写

v-bind简写

        <!--完整语法-->
        <a v-bind:href="url">...</a>
        <!-- 缩写 -->
        <a :href="url">...</a>
        <!--动态参数的缩写-->
        <a :[key]="url">...</a>

v-on简写

        <!--完整语法-->
        <a v-on:click="do">...</a>
        <!-- 缩写 -->
        <a @click="do">...</a>
        <!--动态参数的缩写-->
        <a @[event]="do">...</a>