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: '<span style="color: red">这里会显示红色！</span>'
      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 缩写 完成语法 <a v-bind:href="url"></a> 缩写语法<a :href="url"></a>
3.v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
4.v-for 指令可以绑定数组的数据来渲染一个项目列表。
5.v-on 监听事件，并对用户的输入进行响应。
*v-on 缩写 完成语法 <a v-on:click="doSomething"></a> 缩写语法<a @click="doSomething"></a>
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的精髓之处了。