Vue.js学习笔记

一、定义

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

　　Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

　　模板语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script>
    var app = new Vue({
      el: '#app',  // 操作标签
      data: {
        message: 'Hello Vue!'  // 操作内容
      }
    })
</script>
</body>
</html>

示例一

　　绑定元素特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span v-bind:title="message">点我点我</span>
</div>
<script>
    var app = new Vue({
      el: '#app',  // 操作标签
      data: {
        message: '页面加载于 '+ new Date().toLocaleString()
      }
    })
</script>
</body>
</html>

v-bind：title='msg'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
     <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
</div>
<script>
    var app = new Vue({
      el: '#app',  // 操作标签
      data: {
        todos:[
            {text:'python'},
            {text:'java'},
            {text:'厉害了'}
        ]
      }
    })
</script>
</body>
</html>

for语句

　　监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js nice to meet you!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
</script>
</body>
</html>

v-on:click='qwe'

　　Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js nice to meet you!'
      }
    })
</script>
</body>
</html>

v-model

　　详细中文教程：传送门

一、定义

猜你喜欢