Vue2-模板语法

买米当卡思思酱

已于 2024-04-29 04:23:29 修改

阅读量176

点赞数 3

文章标签：前端 javascript vue.js

于 2024-04-24 18:00:25 首次发布

本文链接：https://blog.csdn.net/yulingpan123/article/details/138003330

版权

1.template模板的三种方式

[方法一]写在 HTML 中的 template 不会在vue实例运行后改变。

[方法二]当 template 写在 new Vue() 构造选项中，vue实例运行时 template 中的内容会替换 HTML 中的挂载点，即 div#app 在vue实例运行后消失。

[方法三] .vue文件中的 template 是 XML 语法 ，<script> 导出的默认选项中 data 必须写为函数（防止组件中 data 被多次引用出现数据混乱），且<script>如果若再出现 template 则会覆盖当前的文件的<template>

#XML 与 HTML 区别:

/* HTML [单标签]可写or不写 / ; 空标签也要写双标签 ; 不区分大小写*/
<input name="username">     -HTML *
<input name="username" />   -HTML
<div></div>

/* XML [单标签]必须写 / ; 空标签可以写自闭和标签 ; 区分大小写*/
<input name="username" />   -XML
<div />

##为什么在 template 中使用 XML ?? 
##HTML 语法较为松散, XML 语法更为严格
##使用 XML 表示 HTML,不需要兼容各种语法,解析器体积更小

2.Vue.js模板语法

#展示内容

new Vue({
    template:`
      <div>
        <!-- 显示文本 绑定元素textContent -->
        {{ n }}
        {{ add(n) }}
        <div v-text="n+2"></div>

        <!-- 显示HTML 绑定元素innerHTML -->
        <div v-html="rawHtml"></div>

        <!-- 直接显示跳过编译 -->
        <div v-pre>{{ n }}</div>
      </div>
    `,
    data:{
        n: 0,
        rawHtml:"<b>粗体</b>"
    },
    methods:{
        add: function (x) {
            return x += 10
        }
    }
}).$mount("#app")

## {{}} 插值表达式
## 将数据以 字符string 形式返回给 DOM

#绑定数据

new Vue({
    template:`
        <div>
          <!-- 绑定属性 -->
          <img v-bind:src="x">
          <img :src="x">

          <!-- 绑定对象 -->
          <div :style="{border: '1px solid black',background: 'grey',width: '100px',height: '100px'}">
          </div>
        </div>
    `,
    data:{
        x:"https://img2.baidu.com/it/u=2046342660,1967664903&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
    },
    methods:{

    },
}).$mount("#app")

## v-bind(:) 单向绑定
## 单向绑定 vue 中 data 数据