Vue3 模版语法

Vue3 模版语法

<div id="example" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}p> //v-html
    <p>使用 v-html 指令: <span v-html="rawHtml">span>p> //v-html
    <div v-bind:class="{'class1': use}"> //v-bind
    <p><a v-bind:href="url">菜鸟教程a>p> //v-bind
    <p v-if="seen">现在你看到我了p> //v-if
    <li v-for="site in sites">
      {{ site.text }}
    li> //v-for
    <p>{{ message }}p>
    <button v-on:click="reverseMessage">反转字符串button> //v-on
    <h1 v-show="ok">Hello!h1> //v-show
    <input type="text" v-model="message" placeholder="输入...."/> //v-model
	<p>输入的内容是：{{message}}p> //v-model
div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      message: 'Runoob!',
      rawHtml: '这里会显示红色！'
      use: false,
      url: "https://www.runoob.com",
      seen:true, ///* 改为false，信息就无法显示 */
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ],
      ok: true
    }
  }
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example')
script>

1.v-html 指令用于输出 html 代码
2.v-bind 常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来
*v-bind 缩写 完成语法 缩写语法
3.v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
4.v-for 指令可以绑定数组的数据来渲染一个项目列表。
5.v-on 监听事件，并对用户的输入进行响应。
*v-on 缩写 完成语法 缩写语法
6.v-show 当条件为false时，v-show只是给我们的元素添加了一个行内样式：display：none
7.v-model 双向绑定可以做到实时更新数据
**重点问题 **
1.v-show和v-if 有什么区别
v-show的用法与v-if类似，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
2.什么是双向数据绑定?
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js的精髓之处了。