脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 模板语法

Vue.js 模板语法和数据绑定

 更新时间：2022年05月27日 11:06:33   作者：​ 奔跑吧鸡翅   ​  
这篇文章主要介绍了Vue.js 模板语法和数据绑定，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

模板语法

Vue 模板语法有两大类

插值语法：

  • 功能：用于解析标签体内容
  • 写法：{{xxx}}，xxx是js表达式，可以读取到 data 中属性

指令语法：

  • 功能：用于解析标签（标签属性、标签体内容、绑定事件...）
  • 写法：v-bind:href="xxx" 或简写为 :href="xxx"，xxx是js表达式，可以读取到 data 中属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值语法</h1>
    Hello {{name}}
    <h1>语法指令</h1>
    <a :href="url" rel="external nofollow" >百度</a>
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
            url:"https://www.baidu.com"
        }
    })
</script>
</body>
</html>

数据绑定

Vue中有2种数据绑定的方式

  • 单向绑定(v-bind)：数据只能从 data 流向页面
  • 双向绑定(v-model)：数据不仅能从 data 流向页面，还可以从页面流向data

备注

  • 双向绑定一般都应用在表单类元素上（如: input、select等)
  • v-model:value 可以简写为v-model，因为 v-model 默认收集的就是 value 值
<body>
<div id="root">
    <!--普通写法-->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    <!--简写-->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>

    <!--如下代码是错误的，v-model只能用在表单类元素上(输入类,有)-->
    <!--<h2 v-model:x="name"></h2>-->
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })
</script>

el的两种写法

第一种写法

new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })

第二种写法

const x = new Vue({
        data:{
            name:"world",
        }
    })
console.log(x)
x.$mount('#root')

其中 $mount可以在打印的 vue 实例中找到

data的两种写法

第一种写法：对象式

new Vue({
        el: "#root",
        data: {
            name: "world",
        }
    })

第一种写法：函数式

new Vue({
        el: "#root",
        data: function () {
            //此处的this是vue实例对象
            return {
                name: 'world'
            }
        }
    })

或者：

new Vue({
        el: "#root",
        data(){
            return {
                name: 'world'
            }
        }
    })

目前学习两种写法都可以，但以后学到组件，必须函数式，否则会报错

另外：不能写成箭头函数，因为 this 就不是 vue 实例对象了，而是全局 window

new Vue({
        el: "#root",
        data: ()=> {
            //此处的this是全局的window
            return {
                name: 'world'
            }
        }
    })

到此这篇关于Vue.js 模板语法和数据绑定的文章就介绍到这了,更多相关Vue 模板语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue3实现多个表格同时滚动并固定表头

    vue3实现多个表格同时滚动并固定表头

    这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • Vue3指令之搜索框输入防抖功能实现

    Vue3指令之搜索框输入防抖功能实现

    在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue单文件组件开发实现过程详解

    Vue单文件组件开发实现过程详解

    这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue3使用axios并封装axios请求的详细步骤

    vue3使用axios并封装axios请求的详细步骤

    本篇文章分步骤给大家介绍了vue3使用axios并封装axios请求的详细步骤，结合实例代码给大家讲解的非常详细，需要的朋友参考下吧
    2023-06-06
  • 使用Mockjs模拟接口实现增删改查、分页及多条件查询

    使用Mockjs模拟接口实现增删改查、分页及多条件查询

    Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发,下面这篇文章主要给大家介绍了关于使用Mockjs模拟接口实现增删改查、分页及多条件查询的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue使用echarts实现地图的方法详解

    vue使用echarts实现地图的方法详解

    这篇文章主要为大家详细介绍了vue使用echarts实现地图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • 在Nginx上部署前端Vue项目的详细步骤(超级简单!)

    在Nginx上部署前端Vue项目的详细步骤(超级简单!)

    这篇文章主要介绍了在Nginx上部署前端Vue项目的详细步骤,Nginx是一款高效的HTTP和反向代理Web服务器,作为开源软件,Nginx以其高性能、可扩展性和灵活性广泛应用于Web架构中,文中将步骤介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • Vue导出json数据到Excel电子表格的示例

    Vue导出json数据到Excel电子表格的示例

    本篇主要介绍了Vue导出json数据到Excel电子表格的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue之常用的内置指令详解

    Vue之常用的内置指令详解

    这篇文章主要为大家介绍了Vue之常用的内置指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • mpvue中使用flyjs全局拦截的实现代码

    mpvue中使用flyjs全局拦截的实现代码

    这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论