02 vue start

6/27/2021 vue

Vue是一个渐进式的框架,什么是渐进式的呢?

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
  • 比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。

命令式编程 -> 声明式编程

声明式渲染 (opens new window)

# vue 安装

1 直接在 html 中引入 js

介绍 — Vue.js (opens new window)

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

2 基于 node.js 的,使用 npm/yarn 包管理或 cli 脚手架安装

安装 — Vue.js (opens new window)

# vue 初体验

<body>
    <h1>hello vue</h1>
    <div id="app"> <!--被 vue 接管的元素-->
        <h2>{{message}}</h2>
        <span>{{fullName}}</span>
    </div>

    <script>
        const app = new Vue({
            el: '#app', // 挂载 vue 接管的元素
            data: {     // 数据
                message: "hello",
                firstName: "123",
                lastName: "abc",
            },
            computed: { // 计算属性
                fullName: function () {
                    return `${this.firstName}  ${this.lastName}`;
                }
            }
        });
    </script>
</body>

在控制台操作 vue 对象实例

更多入门体验,参照官方文档: 介绍 — Vue.js (opens new window)

响应输入

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button> <!-- 处理 click 事件 -->
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
        // 引用数据使用 this 
      this.message = this.message.split('').reverse().join('')
    }
  }
})

# 插值

mustache 语法 mustache/mustache.github.com: The website (opens new window)

{{ }}

mustache 支持简单的表达式

模板语法 - 插值 — Vue.js (opens new window)

更新时间: Sunday, June 27, 2021 16:22