美文网首页
Vue模板语法

Vue模板语法

作者: 不服输的小蜗牛 | 来源:发表于2022-03-24 21:14 被阅读0次

Vue模板语法有2大类:

1.插值语法:

功能:用于解析标签体内容。
写法:{{xxx}} ,xxx是js表达式,且可以直接读取到data中的所有属性。

2.指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件。。。)
举例:v-bind:href ="xxx" 或简写 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-???,此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <div id="root">
            <h1 >差值语法</h1>
            <h3>你好,{{name}}</h3>
            <hr />
            <h1>指令语法</h1>
            <a v-bind:href="url">百度{{name2}}</a>
            <a :href="url">百度{{name2}}</a>
        </div>
        
    </body>
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            name2:'jack2',
            url:'http://www.baidu.com',
        }
    })
    </script>
</html>

相关文章

  • Vue初学-模板语法

    模板语法 Vue使用了基于HTML的模板语法,语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是...

  • 《二》、Vue核心——基本使用

    一、Vue的基本使用 1、编码 2、理解 Vue 的 MVVM 3、模板语法 (1)、模板语法的理解  Ⅰ、动态的...

  • VUE指令

    vue实例 创建.vue文件 模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DO...

  • vue基础语法

    vue常用基础语法: 一、模板语法 1.vue使用基于html的模板语法,智能计算出最少需呀重复渲染的组件;2.数...

  • 模板语法

    模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式地DOM绑定至底层Vue实例的数据。所有Vue...

  • Vue.js模板语法

    Vue.js模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的教...

  • Vue学习的第三天

    模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

  • Vue.js学习笔记(3)

    模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

  • 模板语法

    模板语法