一、简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架(部分使用,不是全家桶)。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(官方文档)
它的中心思想就是数据驱动,不像jQuery是结构驱动,
结构驱动:先获取HTML的结构,然后再修改数据更新结构
数据驱动:简单的理解就是直接将数据同步到结构上,视图管理抽象为数据管理,而不是管理dom结构
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
二、前期准备工作
1、指令自动提示
-
指令自动提示
-
添加如下指令
v-text v-html v-once v-if v-show v-else v-for v-on v-bind v-model v-ref v-el v-pre v-cloak v-on:click v-on:keyup.enter v-on:keyup @click @change number debounce transition :is
2、消除未知指令的错误
-
使用 alt + 回车
-
在工具总设置
3、chrome游览器的调试插件
-
直接从谷歌市场
搜索 vue-devtools 然后添加插件(注意自备梯子)
-
从本地安装
三、基础使用
1、引入Vue
1.1、直接引入Vue
-
独立安装
Vue.js 的官网上直接下载 vue.min.js 并用
<script>
标签引入 -
使用 CDN 方法 推荐使用官方
最新版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
指定版本的
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
1.2、命令行工具搭建脚手架
- 入门时不推荐使用具体查看单独的教程
2、引入Vue
2、基础实例
-
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"> <h1>{{title}}</h1> <p>姓名: {{ name }}</p> <p>年龄: {{ age }}</p> <p>方法使用: {{test()}}</p> </div> </body> </html>
-
js代码
<script> let app = new Vue({ //作用的元素 el: "#app", //数据绑定区 data: { title: "Vue案例", name: "Vue", age: 15, }, // 用于存储各种方法 methods: { test: function () { return "我劝你善良!!!" } } }); </script>
-
显示效果