（1）vue基础——1.3 模板语法

简介

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

 

语法分类

一、基本语法

        1.想让Vue工作，就必创建一个Vue实例，且要传入一个配置对象
        2.root容器中的代码依然符合html规范，只不过混入了一些Vue语法
        3.容器中的代码被称为【Vue模板】 
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且会配合组件一起使用
        6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据改变,页面中用到数据的地方会自动更新

        注意区分：js表达式 和 js代码（语句）
        1.表达式：一个表达式会生成一个值，可放在任何一个需要值的地方：
            （1）a
            （2）a+b
            （3）demo(1)
             (4) x == y?'a','b'

        2.js语句
            （1）判断语句 if() {}  控制走不走
             (2) 循环语句 for(){}  控制走几次

二、模板语法

1.插值语法（双大括号表达式{{Mustache语法}}）

（1）   功能：用于解析标签体的内容

（2）   语法：{{xxx}}，xxx会作为js表达式解析

2.指令语法（以v-开头的）

（1）  功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）

举例：v-bind:href="xxx" 或者简写为 :href="xxx" xxx同样是js表达式

且可以直接读取到data中的所有属性

备注 vue中有很多指令 且形式都是 v-???-

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

三、重要的原则

由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了

举例说明

Vue 中有很多的指令，本例只是用 v-bind 进行说明。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
                Vue模板语法有2大类：
                    1.插值语法：
                            功能：用于解析标签体内容。
                            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
                    2.指令语法：
                            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
                            举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
                                     且可以直接读取到data中的所有属性。
                            备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

         -->
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr/>
            <h1>指令语法</h1>
            <a v-bind:href="school.url" x="hello">点我去{{school.name}}学习</a>
            <!--v-bind简写版 点击跳转到Vue中文网-->
            <a :href="school.url" x="hello">点我去{{school.name}}学习</a>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                name:'wangxq',
                school:{
                    name:'Vue中文网',
                    url:'https://cn.vuejs.org/',
                }
            }
        })
    </script>
</html>

 

 

posted @ 2022-07-07 19:36  陈晓猛  阅读(84)  评论(0)    收藏  举报