十五分钟速通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>
相关推荐
Forever7_几秒前
重磅！Vue3 手势工具正式发布！免费使用！
前端·前端框架·前端工程化
用户806138166592 分钟前
发布为一个 npm 包
前端·javascript
树上有只程序猿32 分钟前
低代码何时能出个“秦始皇”一统天下？我是真学不动啦！
前端·后端·低代码
TT_哲哲32 分钟前
小程序双模式（文件 / 照片）上传组件封装与解析
前端·javascript
菜果果儿1 小时前
Vue 3 + TypeScript 常用代码示例总结
前端
前端付豪1 小时前
实现多角色模式切换
前端·架构
从文处安1 小时前
「九九八十一难」从回调地狱到异步秩序：深入理解 JavaScript Promise
前端·javascript
要换昵称了1 小时前
Axios二次封装及API 调用框架
前端·vue.js
进击的尘埃1 小时前
Node.js 子进程管理：child_process 模块的正确打开方式
javascript
猫腻前端1 小时前
深度图d3绘制交互逻辑
前端
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05班级宠物园部署指南06小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）07OpenClaw 使用和管理 MCP 完全指南08“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）09UV安装并设置国内源10中国象棋-html版本