初识vue.js模板语法

  • ​​1、简介​​
  • ​​2、实例代码：​​
  • ​​3、解释​​

1、简介

  Vue.js使用了基于HTML的模板语法，允许开发者声明式地将呈现的​​DOM​​​绑定至底层组件实例的数据。所有的Vue.js模板都是有效的​​HTML​​​,可以被符合规范的浏览器和​​HTML​​​解析器解析。
  在底层，​​​Vue​​​将模板编译为虚拟​​DOM​​​呈现函数，结合响应式系统，当应用程序状态发生变化时，​​Vue​​​可以智能地计算出需要重新渲染和应用最小数量​​DOM​​操作的组件。

2、实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js的模板语法</title>
</head>
<body>
    <!--View-->
        <div id="app">
            <!--简单的文本插值-->
            <p>{{message}}</p>
            <!--使用 JavaScript 表达式-->
            <p>{{message.toUpperCase()}}</p>
            <!--HTML代码将以普通文本的方式输出-->
            <p>{{spanHtml}}</p>
            <!--输出HTML代码-->
            <p v-html="spanHtml"></p>
            <!--使用v-bind指令对HTML元素的属性进行绑定-->
            <a v-bind:href="url">新浪网</a><br>
            <a :[attribute]="url">新浪网</a>
            <p>
                <!-- <button v-on:click="sayHello">问候</button> -->
                <button @click="sayHello">问候</button>
            </p>
        </div>
    
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            const App = Vue.createApp({
              data(){
                return {
                    message: "Hello Vue.js",
                    url: "http://www.sina.com.cn/",
                    spanHtml: `
                       <span style='color: red'>
                            HTML元素，以红色字体显示
                       </span>`,
                    attribute:'href'
                }
              },
              methods:{
                  sayHello(){
                      alert("你好!")
                  }
              }
            });
             const vm=App.mount('#app');
        </script>
</body>
</html>

3、解释

  在一个​​Vue.js​​​框架的页面应用程序中，需要创建一个应用程序实例，(createApp()),这个实例将提供应用程序上下文，应用程序实例装载的整个组件树将共享相同的上下文。
  Vue3.0引入​​​createApp()​​​是为了解决Vue2.x全局配置带来的一些问题。​​createApp()​​​是全局API,它接受一个根组件选项对象作为参数，该对象可以包含数据、方法、组件生命周期钩子等，然后返回应用程序实例自身。
  在组件选项对象中的​​​data​​​选项是一个函数，​​Vue​​​在创建组件实例时会调用该函数。​​data()​​​函数返回一个数据对象，​​Vue​​​会将这个对象包装到它的响应式系统中，即转换为一个代理对象，此代理使​​Vue​​​能够在访问或修改属性时执行依赖跟踪和更改通知，从而自动重新渲染​​DOM​​​。数据对象的每个属性都被视为一个依赖项。
  创建了应用程序实例之后，可以调用实例的​​​mount()​​​方法，指定一个​​DOM​​​元素，在该​​DOM​​​元素上装载应用程序实例的根组件，这样这个​​DOM​​​元素中的所有数据都会被​​Vue​​框架所监控，从而实现数据双向绑定。