十五分钟速通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>
相关推荐
李剑一2 分钟前
有点干，前端架构基础之：Web Worker到底是什么？它和Java中的线程是一个道理吗？
前端·面试·架构
爱勇宝1 小时前
《道德经》第 10 章：真正成熟的人，能成事但不控制一切
前端·后端·程序员
看谷秀2 小时前
arkts- 8 三方库介绍
前端·arkts
六边形6662 小时前
独立开发不知道做什么？使用 TRAE Work 抓取差评痛点，快速跑通产品立项流
前端·后端·面试
亿元程序员2 小时前
小伙伴发我一个 1G 的 Cocos 项目，assets 只有几十兆
前端
paopaokaka_luck2 小时前
基于springboot3+vue3的文山民族文化资源展示与推广平台（协同过滤算法、Echarts 图形化分析）
java·前端·spring boot·学习·echarts
临江仙4552 小时前
同一个 AI Agent 如何同时服务 Web、微信和 QQ：PureChat 的渠道架构实践
前端·人工智能·后端
程序员鱼皮2 小时前
16 个超火的 DeepSeek Harness 插件，大肥鱼已经落后 N 个版本了。。。
前端·后端·ai编程
马可家的菠萝2 小时前
AI Agent Demo 10 分钟就能跑，真正难的是让它 200 个场景都别乱来
前端·后端·aigc
Vuji2 小时前
Pi 插件解剖｜summarize.ts：199 行，给 Agent 的对话做一份 Markdown 总结
前端·人工智能·agent
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05历年考研数学一、数学二、数学三真题试卷及答案PDF06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09VSCode+CodeX扩展，无法启动10如何新建文件夹？ 电脑新建文件夹的4种方法