一、vue 概念
1.前端框架
前端开发进化过程: 原生JS 》jQuery 等类库 》Vue 等前端框架
- jQuery 等类库提供了已封装好的 JS 方法集合,用户在前端开发中可以直接调用(可以使用多个)。
- Vue 等前端框架提供了完整的项目解决方案,用户在前端开发中必须按照特定框架规范进行开发(只能选择一个)。
目前主流的前
2.vue 特征
Vue 主要有以下两大特征:
-
响应式数据绑定:数据发生改变,视图自动更新(开发者不再关注 dom 操作,进一步提高开发效率)。
-
可组合视图组件:视图按照功能切分成基本单元(易维护,易重用,易测试)。
3.vue 使用
端框架有 Vue 、 React 、 Angular 。
- 引入外部文件(CDN)
<!-- 开发环境版本,包含命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化文件大小和响应速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 命令行工具(CLI)
- 安装脚手架
vue-cli 是基于 Node.js 的 vue 快捷开发工具,使用前首先要下载并安装 Node.js 开发环境。
$ npm install @vue/cli -g # 全局安装安装 vue-cli 工具
@vue/cli
适用于 vue 2.X ,vue-cli
适用于旧版本。
2.建项目并使用
# 方式一 $ vue create project-name # 直接创建项目 $ npm run dev # 开发环境启动项目(可配置) $ npm run build # 运行环境启动项目(可配置) # 方式二 $ vue ui # 开启图形化工具,用来创建和管理项目
vue 对象
vue 对象是管理 vue 的基本单元,开发者可以在 JS 代码中创建 vue 对象。
在 vue 对象中,必须通过 el
指定 vue 对象作用域。
<script>
var app = new Vue({
el: '#app',
...
});
</script>
数据显示
在 vue 对象中,通过 data
存储 vue 对象中的数据
<!-- 数据显示 -->
<p v-text="message"></p> <!-- v-text -->
<p>Word is {{ message }}</p> <!-- 插值表达式:可以对内容进行扩展 -->
<p v-html="message"></p> <!-- v-html: 可以直接插入 html 元素 -->
<!-- vue 对象 -->
<script>
var app = new Vue({
el: '#app',
// 数据
data: {
message: 'Hello Vue', // 数据
data: [] // 数组数据
},
});
app.message="GoodBye Vue."; // vue 对象数据可以被 JS 代码更新
</script>