@click.prevent是一个事件修饰符的组合。它用于阻止默认的点击行为并执行特定的逻辑。

@click 是Vue模板语法中用于监听元素的点击事件的指令。当元素被点击时，相关的方法或表达式将会被执行。

.prevent 是一个事件修饰符，用于告诉Vue在触发点击事件后立即调用 event.preventDefault() 方法，阻止浏览器默认的行为。

举个例子，在下面的代码中，当连接被点击时，会执行 handleClick 方法，并且阻止默认的跳转行为，比如下面的demo：

<div id="app">
   <a @click.prevent="alert('hello')" href="http://www.52jiagou.com">连接</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        methods:{
            alert(msg){
                alert(msg);
            }
        }    
    })
</script>

事件修饰符和类型的判断：

<div id="app">
    请输入分数：<input type="text" v-model.number="score" />
    <input type="button" @click="checkScore" value="确定" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data:{
            score:null
        },
        methods:{
            checkScore(){
               if(typeof this.score != "number"){
                    alert("请输入数字");
               }
            }
        }
     
    })
</script>

watch 侦听器，作用：监视数据变化，执行一些业务逻辑或异步操作。例子：

<div id="app">
    请输入：<input type="text" v-model="student.remark" />
    同步：<input type="text" v-model="remark2" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data:{
            remark2:"",
            student:{
                remark:""
            }
        },
        watch:{
            'student.remark' (newValue){
                this.remark2 = newValue;
            }
            //假设里面需要异步处理
            /* async 'student.remark' (newValue){
                const res = await axios({
                    url:'',
                    params:{}
                })
                console.log(res.data);
            } */
           
            //实现防抖，延迟执行
            /* clearTimeout(this.timer);
            this.timer = setTimeout(async () => {
                async 'student.remark' (newValue){
                    const res = await axios({
                        url:'',
                        params:{}
                    })
                    console.log(res.data);
                }
            }, 1000); */
           
        }
     
    })
</script>

watch完整写法：

watch:{
    数据属性名:{ //如果是想监控整个对象，写对象名
        deep:true,//深度监视
        immediate:true,//是否初始化的时候就马上执行一次
        handler(newValue){}
    }
}

every 是数组的一个内置方法，用于检查数组中的所有元素是否符合指定的条件。它会对数组中的每个元素依次执行指定的函数，只有当所有元素都满足条件时，才会返回 true；如果任何一个元素不满足条件，则返回 false。

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。

Hash 模式

hash 模式是用 createWebHashHistory() 创建的,它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。

HTML5 模式

用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式,当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就尴尬了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

location / {
  try_files $uri $uri/ /index.html;
}

v-model 和 v-bind 是 Vue 中两个常用的指令:

v-model 用于表单元素，实现双向数据绑定，同时监听用户输入和更新数据。

v-bind 用于绑定数据到 DOM 元素的属性或组件的属性，实现数据驱动视图的更新。

需要注意的是，v-model 实质上是 v-bind 和 v-on 的结合使用，简化了双向数据绑定的写法。在某些情况下，你也可以使用 v-bind 和 v-on 分别完成类似的功能。

demo:

<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="item.id">
            <input type="checkbox" v-model="item.checked" />{{item.name}}
        </li>
    </ul>
    全选<input type="checkbox" v-model="isAll" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data:{
            list:[
                {id:1,name:"小强",checked:true},
                {id:2,name:"小红",checked:false}
            ]
        },
        computed:{
            isAll : {
                get (){
                    return this.list.every(p => p.checked);
                },
                set (value){
                    console.log(value);
                    this.list.forEach(p => p.checked = value);
                }
            }
        }
     
    })
</script>