2023-01-01_模板基础

前言

• 通过模板，可以写出一个类似dom对象，语法和html很像，浏览器可以直接渲染。
• 如果因为语法书写错误导致vue运行错误，也可以显示出dom的大致模样。
• 可以在不关心数据的情况下完成视图定义。

1.模板插值

• 模板插值的目的是把数据绑定到视图。
• 注意count是变量名称，如果数据嵌套了对象，可以用obj.count来表示
• vue会把这个插值和变量绑定起来，变量值一旦变化，视图也会跟着变化。实现数据绑定。
• 注意{{}}里面可以书写js的运算符
• 注意v-once，仅仅渲染一次，数据有变化，也不会继续渲染
• 注意v-html指令，用来插入一段html代码。实现原理是在第一个span下插入整段的html代码。效果如下

image.png

<script>
const App = {
    data(){
        return {
            obj:{count : 0,countHTML:"<span style='color:red'>3</span>",}
        }
    }
Vue.createApp(App).mount("#App");
</script>
<h1>{{ count + 10 }}</h1>
<h1 v-once>{{ obj.count + 10 }}</h1>
<h1 v-once>这里是模板的内容<span v-html='obj.countHTML'></span></h1>

2.模板指令

• 写在html元素的属性内，通常用“v-”开头

2.1 v-bind

• v-blind用来把html元素的属性和数据绑定起来
• 渲染后，如下的h1的id属性会被替换为变量id1的值
• 冒号后面事实上是模板指令的参数。这里要绑定html元素的属性，所以这里使用的是html的属性的属性名称。
• 该参数也可以动态替换,如下的prop是变量，会替换成变量值
• 可以用缩写形式，v-bind:id缩写成:id

<h1 v-bind:id="id1">这里是模板的id内容</h1>
<h1 :id="id1">这里是模板的id内容</h1>
<h1 v-bind:[prop]="id1">这里是模板的id内容</h1>

2.2 v-on

• v-on专门用来绑定元素的事件属性
• 可以用缩写形式，v-on缩写成:@
• 注意方法传递参数的语法

<button v-on:click="clickButton">点击</button>
<button @click="clickButton('hi')">点击</button>

methods: {
    clickButton(msg){
        console.log(msg);
    }
}

• 注意如下 prevent。表示提交后不刷新页面(阻止默认事件)
• .prevent为指令修饰符

            <form>
                <span>新建任务：</span>
                <input type="text" placeholder="请输入任务。。。" v-model="taskText"/>
                <button  @click.prevent="addTask">添加</button>
            </form>

2.3 v-if

• 条件渲染，可以是一个变量或一个js表达式

<div v-if="noLogin">密码：<input v-model="password" type="password"></div>

• 多个元素一起条件渲染
• 推荐使用template元素，这个元素不会被浏览器解释出来，浏览器会跳过。如果用div，div会被浏览器解释

<div v-if="show">
  <h1>1</h1>
  <h1>1</h1>
</div>
<template v-if="show">
  <h1>1</h1>
  <h1>1</h1>
</template >

• 可以在v-if后面跟v-else等进行进一步条件判断。必须紧紧跟着v-if。否则会报错

<div v-if="mark == 100">满分</div>
<div v-else-if="mark >60">及格</div>
<div v-else>不及格</div>

2.4 v-show

• 不支持v-else语法
• 作用类似于v-if
• 不支持template模板
• 从元素本身的存在性来说，v-if才是真正意义上的条件渲染，v-if采取的是懒加载的方式进行渲染，如果初始条件为假，则关于这个组件的任何渲染工作都不会进行，直到其绑定的条件为真时，才会真正开始渲染此元素。
• v-show指令的渲染逻辑只是一种视觉上的条件渲染，实际上无论v-show指令设置的条件是真是假，当前元素都会被渲染，v-show指令只是简单地通过切换元素CSS样式中的display属性来实现展示效果。
• 如果频繁切换显示，用v-show
• 如果不频繁切换，用v-if

2.5 v-for

• 用来循环渲染。v-for所在的html元素会被循环渲染
• 如下为遍历一个对象数组
• 注意第二种语法，可以获得数组的index
• v-for内可以支持如上各种模板指令的嵌套
• 通常，会把数据的id绑定到html元素的id属性

<div style="text-align: center;" id="App">
    <div v-for="item in list" :id="item.name">
        {{ item.name }}
        {{ item.num }}
    </div>
</div>

<div style="text-align: center;" id="App">
    <div v-for="(item,index) in list">
        {{ index }}
        {{ item.name }}
        {{ item.num }}
    </div>
</div>

<div style="text-align: center;" id="App">
    <div v-for="(item,index) in list">
        {{ item.name }}
        {{ item.num }}
    </div>
</div>


const App = {
    data() {
        return {
            list:[{name:"sk1",num:151},{name:"sk2",num:152},{name:"sk3",num:153}]
        }
    },
};

• 如下示范了遍历对象

<div v-for="(key,value,index) in obj">
    {{key}} : {{value}}
</div>

• 如下示范了v-for的嵌套，比如显示全部对象数组的全部属性
• 注意如何在子嵌套引用父嵌套的元素的写法。

<div style="text-align: center;" id="App">
    <div v-for="(item,index) in list">
      <div v-for="(key,value) in item">
        {{key}} : {{value}}
      </div>
    </div>
</div>

• 注意，如果数组发生了变化，v-for会重新渲染。

     push()     // 向列表尾部追加一个元素
     pop()      // 删除列表尾部的一个元素
     shift()    // 向列表头部插入一个元素
     unshift()  // 删除列表头部的一个元素
     splice()   // 对列表进行分割操作
     sort()     // 对列表进行排序操作
     reverse()  // 对列表进行逆序

<div style="text-align: center;" id="App">
    <div v-for="item in handle(list)" :id="item.name">
        {{ item.name }}
        {{ item.num }}
    </div>
    <button @click="reverse">逆序</button>
</div>
reverse(){
    this.list.reverse();
}    

• 数据预处理
• 会先执行handle函数，然后再进行v-for渲染

<div v-for="item in handle(list)" :id="item.name">
handle(list){
    console.log(list);
    list.push({name:"sk4",num:154})
    return list;
}

• 如果要循环渲染多个html元素。可以用template元素取代div。