十五分钟速通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>
相关推荐
不会敲代码11 小时前
手写 Mini React：从 JSX 到虚拟 DOM 再到 render，搞懂 React 底层原理
前端·javascript·react.js
kyriewen2 小时前
你的代码仓库变成“毛线团”了？Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬2 小时前
你知道什么是 Ajax 吗？—— 从入门到原理，一篇彻底搞懂
前端·ajax·okhttp
旷世奇才李先生3 小时前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
Beginner x_u3 小时前
前端八股整理（工程化 02）｜CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
openKaka_3 小时前
createRoot 到底创建了什么：FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
习明然4 小时前
UniApp开发体验感受总结
前端·uni-app
刀法如飞5 小时前
Claude Code Skills 推荐：2026年最值得安装的10个AI技能
前端·后端·ai编程
阿豪只会阿巴5 小时前
【没事学点啥】TurboBlog轻量级个人博客项目——项目介绍
javascript·python·django·html
Lee川5 小时前
面试手写 KeepAlive：React 组件缓存的实现原理
前端·react.js·面试
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法04零基础教你claude code 接入 deepseek V405CC-Switch & Claude 基于 Linux 服务器安装使用指南06Dirtyfrag漏洞：我花了一下午搞清楚这个Linux内核提权漏洞到底在搞什么07Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录102026 年 AI 辅助编程工具全景对比：Copilot、Cursor、Claude Code 与 Codex 深度解析