Vue基础—模板语法

模板语法

1. 引入Vue
   通过CDN方式引入

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

2. 文本插值
   最基本的数据绑定形式是文本插值就是双大花括号

 <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>

在{{ }}中可以使用JaveScript的表达式，
1.简单的计算 {{1+1}}，
2.三元表达式 {{ok ? ‘yes’ : ‘no’}}，

3. 指令
   v-bind指令：单相绑定，v-bind可以简写为：

<input type="text" v-bind:placeholder="Info.name">
<input type="text" :placeholder="Info.name">

v-on:[click]指令：为元素绑定点击事件，可以简写为@。可以在methods中配置相应的方法

        <button v-on:click="show">点我</button>
        <button @click="show">点我</button>
        methods: {
                show(){
                    alert("你好Vue！")
                }
            }