学习目录
- Vues基础
- 本地应用
- 网络应用
- 综合应用
工具的准备
我个人比较喜欢使用HTMLDROWNER,学习资料推荐使用VC,仅供选择吧
前置知识
HTML+CSS+JS+AJAX:这个是学习资料博主推荐的
个人感觉认真学好HTML+CSS+JS理解vues基础很容易上手
官方网址
Vue.js - 渐进式 JavaScript 框架 | Vue.js:官方学习网址
VUES背景知识
- 是一个JS的框架
- 简化DOM操作
- 响应式数据驱动
初始运用
如何导入vues
两种方式:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
el:挂载点
el:挂载点
- 问:Vue实例的作用范围是什么呢?
答:Vue会管理el选项命中的元素及其内部的后代元素 - 问:是否可以使用其他的选择器?
答:可以使用其他的选择器,但是建议使用ID选择器 - 问:是否可以设置其他的dom元素呢?
答:可以使用其他的双标签,不能使用HTML和BODY
data:数据点
data:数据对象
-
Vue中用到的数据定义在data中
-
data中可以写复杂类型的数据
-
渲染复杂类型数据时,遵守js的语法即可
{{ message }}var app = new Vue({
el:"#app"
data:
message:"黑马程序员"
array:[],
obj:{}
}
})
创建第一Vues.js程序步骤
- 导入开发版本的Vues.js
- 创建Vues实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上