需要对HTML、CSS和JavaScript有一定的了解
Vue简介
概念
- 一套用于构建用户界面的渐进式
JavaScript框架
安装与部署
使用<script>引入
- 独立版本
- 在Vue官网下载
Vue.js
- 在Vue官网下载
- 开发版本：包含了帮助的命令行警告（学习过程中推荐使用）
- 生产版本：优化尺寸和速度
- 开发版本：包含了帮助的命令行警告（学习过程中推荐使用）
- 在
html中使用<script>标签引入
- 在
- CDN
- 开发版本（推荐使用）：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- 生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>- 同样在
html中使用<script>标签引入
- 同样在
NPM和命令行工具（CLI）
- 有一定的难度，在学习了Vue的基础知识后再去使用
HelloVue
第一个Vue程序
- 创建Vue实例对象
<script> var app = new Vue({ // 选项 }) </script>
- 设置
el属性和data属性
<script> var app = new Vue({ el: '#app', data: { message: "Hello Vue" } }) </script>
- 使用简介的模板语法把数据渲染到页面上
<div id='app'> {{ message }} // {{}} 为插值表达式 </div>
- 代码截图及效果
说明
-
el：挂载点（设置Vue实例挂载的元素）
- 作用范围：
el元素命中的内部，在外部无效
- 作用范围：
// 在外部无效 <div id=“app”></div> {{ message }} // 内部有效 <div id=“app”> {{ message }} </div> // 可嵌套 <div id=“app”> {{ message }} <h2>{{ message }}</h2> </div>
- 选择器
- 支持各种选择器，推荐使用
id选择器
- 支持各种选择器，推荐使用
// id选择器 <div id=“app”> {{ message }} </div> // class选择器 <div class=“app”> {{ message }} </div>
- DOM元素
- html标签只支持双标签，推荐使用
<div>标签
- html标签只支持双标签，推荐使用
// div标签 <div id=“app”> {{ message }} </div> // span标签 <span id="app"> {{ message }} </span>
-
data：数据对象
- Vue中用到的数据类型定义在
data中
- data中可以写复杂数据类型
- Vue中用到的数据类型定义在
<script> var app = new Vue({ el: '#app', data: { message: "Hello Vue", campus: ["a", "b", "c"] // 数组类型 } }) </script>
- 渲染复杂类型数据时，遵循js的语法
- 渲染复杂类型数据时，遵循js的语法
-
methods：函数对象
- Vue中用到的函数定义在
methods中
- Vue中用到的函数定义在
<script> var app = new Vue({ el: '#app', data: { message: "Hello Vue", }, methods: { add: function() { return this.message + "!!!"; } } }) </script>