VueJS基础

什么是Vue?

• 一款非常优秀的前端 JavaScript 框架，由尤雨溪创建开发
• 可以轻松构建单页 (SPA) 应用程序
• 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
• 最大程度上解放了 DOM 操作
• 它能让你更加的享受编程的乐趣
• 数据驱动，开源
  官网

安装Vue

• Vue.js 不支持 IE8 及其以下版本

• 最新稳定版本：2.5.16

• 直接下载

  • 开发版本：https://vuejs.org/js/vue.js

  • 生产版本：https://vuejs.org/js/vue.min.js

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

使用 npm下载（默认安装最新稳定版）

指令: npm install vue

学习任何一门语言都必敲的一段代码:Hello world

通过数据绑定的方式，在界面上展示Hello World

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        }
    });
</script>

创建Vue实例

每一个Vue应用都是通过Vue构造函数创建一个Vue的实例开始

var vm = new Vue({
    // Vue的选项
});

Vue的选项

• el 选项：指定Vue作用的范围
• data 选项：data提供数据对象，绑定的数据

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<h1>
    {{ msg }}
</h1>

JavaScript表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ age > 18 ? '年满18岁' : '未满18岁' }}

{{ message.split('').reverse().join('') }}

<h1>
    {{ msg }}
</h1>

注意：差值表达式中不能写语句。例如：var a = 10;