Vue3学习之路--Vue基础 模版语法(二)

Mustache语法

模版语法

React的开发模式:

React使用jsx 所以对应的代码都是编写类似于js的一种语法;

之后通过Babel将jsx编译成React.creatElement函数调用

Vue也支持jsx的开发模式

大多情况下,使用基于HTML的模版语法;

在模版中 允许开发者以声明式的方式将DOM和底层组件实例的数据 绑定在一起

在底层的实现中,Vue将模版编译成虚拟DOM渲染函数,

Mustache双大括号语法(掌握)

如果我们希望把数据显示到模版中,使用最多的语法是"Mustache语法(双大括号)的文本插值"

data返回的对象 是有添加到Vue的响应式系统中

当data中的数据发生变化时 对应的内容也会发生更新

当然 Mustache中不仅仅可以是data中的属性 也可以是一个 JavaScript的表达式

<div id="app">
    <!-- 1 基本使用 -->
    <h2>{
  {message}}</h2>
    <h2>当前计数:{
  {counter}}</h2>

    <!-- 2 表达式 -->
    <h2>计数双倍:{
  { counter * 2 }}</h2>
    <h2>展示信息:{
  { infos.split(" ") }}</h2>

    <!-- 3 三元运算符 -->
    <h2>{
  { age>=18? "成年人":"未成年人" }}</h2>

    <!-- 4 调用methods中的函数 -->
    <h2>{
  { formateDate(time) }}</h2>

    <!-- 5 注意:这里不能定义语句! if语句也不支持 -->
</div>
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                message: "Hello Vue!",
                counter: 100,
                infos: "my name is xiong",
                age: 22,
                time: 123
            }
        },
        methods: {
            formateDate(data) {
                return "2020-10-10 " + data
            }
        }
    })
    // 挂载app
    app.mount('#app')

常见的基本指令

v-once指令(了解)

v-once用于指定元素或组件只能渲染一次

当数据发生变化时 元素或组件以及其所有子元素将视为静态内容 并且跳过

该指令可以用于性能优化!

<div id="app">
        <!-- 指令:v-once =>只渲染一次 -->
        <h2 v-once>{
  { message }}
            <span>数字:{
  {counter}}</span>
        </h2>
        <h1>{
  { message }}</h1>
        <button @click="changeMessage">改变message</button>
    </div>

<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    counter: 100
                }
            },
            methods: {
                changeMessage() {
                    this.message = "你好,Vue!"
                    this.counter += 100
                    console.log(this.message, this.counter)
                }
            }
        })
        // 挂载app
        app.mount('#app')

v-text指令(了解)

用于更新元素textContent:

 <h2 v-text="message">aaaa</h2> //此时拿到message 会把'aaaa'覆盖掉

V-html指令(了解)

默认情况下,展示的内容本身是html的,那么vue不会对他进行特殊的解析

如果我们希望这个内容被Vue解析出来,可以使用v-html来展示

<div id="app">
        <h2>{
  {content}}</h2>
        <h2 v-html="content"></h2>

    </div>

<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {