十五分钟速通Vue

clmm_2024-09-02 21:55

绑值语法( {{}} )

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }]
      }
    })
  </script>
</body>

</html>

渲染html(v-html)

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>'
      }
    })
  </script>
</body>

</html>

双向绑定(v-model)

双向绑定，同步更新

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: ''
      }
    })
  </script>
</body>

</html>

判断(v-if)

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>
      
      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色'
      }
    })
  </script>
</body>

</html>

绑定属性(v-bind)

这个有更简写的版本，后面再补充

:

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/'
      }
    })
  </script>
</body>

</html>

事件绑定(v-on)

@

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/'
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>

循环(v-for)

这里有些语法要精通一下

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

    <div>
      <div v-for="(item,index) in fruits" :key="index">{{index + '.'+item}}</div>
      <div v-for="item in users" :key="item.name">{{item.name}}</div>
    </div>
  </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/',
        fruits: ['苹果', '香蕉', '橘子', '橘子'],
        users: [{ name: 'lmm' }, { name: 'gcd' }]
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>

动态class与style绑定

补一下，对象字面量语法

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .active {
    color: red;
  }
</style>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

    <div>
      <div v-for="(item,index) in fruits" :key="index">{{index + '.'+item}}</div>
      <div v-for="item in users" :key="item.name">{{item.name}}</div>
    </div>

    <div style="display: flex; margin-top: 30px;">
      <select v-model="currentMenu">
        <option value="首页">首页</option>
        <option value="教师">教师</option>
        <option value="学生">学生</option>
      </select>
      <!-- 动态绑定style和class -->
      <div style="padding: 0 10px;" :style="{fontSize: item === currentMenu?'20px':'14px'}"
        :class="{'active':item === currentMenu}" v-for="item in menus" :key="item">{{item}}
      </div>

    </div>
  </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/',
        fruits: ['苹果', '香蕉', '橘子', '橘子'],
        users: [{ name: 'lmm' }, { name: 'gcd' }],
        menus: ['首页', '教师', '学生'],
        currentMenu: '首页',
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>
相关推荐
笨笨狗吞噬者34 分钟前
VS Code 内置浏览器打开网页
前端
SamChan9034 分钟前
WebSocket实现PDF翻译进度实时推送：Go后端+React前端的完整方案
前端·websocket·pdf·c#·react·机器翻译
甲维斯1 小时前
DeepSeekFlash前端依旧拉垮，而且变慢了很多！
前端·人工智能
奈斯先生Vector1 小时前
大模型 Agentic Workflow 架构解构：异构 API 调度与 Token 路由的多模态系统设计
开发语言·前端·架构·prompt·aigc·音视频
海带紫菜菠萝汤1 小时前
FFmpeg.wasm 实践：在浏览器中运行 FFmpeg 的能力边界与性能瓶颈
前端·javascript·ffmpeg·音视频·wasm
名字还没想好☜1 小时前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
Access开发易登软件1 小时前
Access 怎么做前后端分离？用 Web API 读写 SQL Server
前端·数据库·人工智能·microsoft·excel·access
10share1 小时前
React 新一代样式隔离方案 —— 编译时、零运行时、原生写法
前端·react.js
upgrador1 小时前
桌面应用开发：Electron 与 NSIS 的关系、打包流程及 Windows 本地构建实战
javascript·windows·electron
Revolution611 小时前
Node.js 是什么：前端项目里哪些事情由它完成
前端·面试·node.js
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路06AI科技热点日报 | 2026年07月01日072026上半年大模型全景技术解读：推理融合、Agent 爆发与多模态统一08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新092026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？102026 年 AI 大模型 & AI 编程工具实战全总结