[JavaScript知识库]【Vue】模板语法

vue中的模板语法有两种：

????????插值语法、指令语法

插值语法

? ? ? ? 用于解析标签体的内容

? ? ? ? {{xxx}}? ? ? ? xxx是js表达式，可以直接读取到data中的所有属性

指令语法

? ? ? ? 用于解析标签

? ? ? ? v-html : 显示文本，并解析标签

? ? ? ? v-text ：显示文本，不解析标签

? ? ? ? v-show ： 显示或隐藏，返回false时，display：none

? ? ? ? v-if ：渲染或不渲染，条件判断错误时，不渲染页面

? ? ? ? v-for ：对数组的选项列表进行渲染

? ? ? ? v-on ： 绑定事件

? ? ? ? v-bind ：动态添加属性，单向绑定

? ? ? ? v-model ：双向数据绑定，只作用于input、textarea、select??

插值语法

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
</div>
<script>
    new Vue({
        el: "#root",
        data:{
            name: '少女',
        }
    })
</script>

v-html

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>模板语法</h1>'
      }
    })
</script>

v-bind

<div id="app">
    <!-- 完整形式 -->
    <a v-bind:href="url">小米</a>
    <!-- 简写 -->
    <a :href="url">小米</a>
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        url: 'http://www.mi.com'
      }
    })
</script>

双向数据绑定

<div id="app">
    <p>{{ message }}</p>
    <!-- 完整形式 -->
    <input v-model:value="message">
    <!-- 简写 -->
    <input v-model="message">
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      }
    })
</script>

v-if

<div id="app">
    <p v-if="seen">我是如此相信</p>
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        seen: true
      }
    })
</script>

v-for

<ul>
    <li v-for="item in items">{{ item }}</li>
</ul> 
<script>
    var app = new Vue({ 
        el: '#app', 
        data: { 
            items: [1, 34, 89, 92, 45, 76, 33] 
        } 
    })
</script>