vue学习（一）+ 基本语法【v-on、v-click、v-model、v-if、v-for等用法&数据的双向绑定&todoList小栗子】-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33866063/article/details/88524263

这篇博客介绍了Vue.js的基本语法，包括v-on（事件绑定）、v-model（数据双向绑定）、v-if/v-for（条件渲染）的使用，并通过一个todoList小例子进行了实战演示。同时提到了v-text和v-html的区别，以及如何防止XSS攻击。还讨论了v-bind、计算属性computed和watch的区别，以及v-if与v-show的渲染策略和v-for的index用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上例子！！

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css"><!--引入css样式-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--引入vue模板-->
</head>
<body>
<!--此div为挂载点，可以直接通过template模板将html显示到此挂载点的标签中-->
<div id="app"><!--id与js中的vue对象el要一致-->
    {
  
  { message }} {
  
  {name}}<!--插值表达式，引用vue对象中定义的data-->
    <h1>Events</h1>
    <p v-html="websiteTag"></p><!--js中定义的是HTML标签-->
    <input type="text" v-bind:value="name" v-bind:title="name"><!--v-bind,标签内部属性绑定js中的data-->
    <a v-bind:href="website">web开发</a><!--data作为标签内部变量，同上-->
    <p>{
  
  {greet('night')}}</p><!--引入含参方法-->
    <a v-on:click.prevent="alert()" href="http://www.baidu.com">百度</a><!--警告之后，阻止网页跳转-->
    <button v-on:click="age++">长一岁</button><!--事件中的方法可以不加括号-->
    <button v-on:click="age--">减一岁</button>
    <button @dblclick="subtract(10)">双击减10岁</button><!--双击事件dblclick-->
    年龄：{
  
  {age}}
    <div id="canvas" v-on:mousemove="updateXY">{
  
  {x}},{
  
  {y}}-<!--鼠标移动事件-->
        <!--<span v-on:mousemove="stopMoving">stop Moving</span>--><!--阻止鼠标事件-->
        <span v-on:mousemove.stop="">Stop Moving</span><!--阻止-->
    </div>
    <!--双向数据绑定-->
    <h1>双向数据绑定</h1>
    <!--将input中获取到的值传入data的变量中，将input中加入ref标记，在方法中改写。-->
    <h1>键盘 Events</h1>
    <label>姓名：</label>
    <input ref="name" type="text" @keyu