Vue2-note-1

Vue2基础

Vue简介

• JavaScript框架
• 简化Dom操作
• 响应式数据驱动

第一个Vue程序

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

• 导入开发版本的Vue.js
• 创建Vue实例对象, 设置el属性和data属性
• 使用简洁的模板语法把数据渲染到页面上

el:挂载点

<div id="app">
      {{ message }}
</div>
var app = new Vue({
    el:"#app",
    data:{
   		message:"黑马程序员"
    }
})

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器,但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签,不能使用HTML和BODY

• el是用来设置Vue实例挂载（管理）的元素
• Vue会管理el选项命中的元素及其内部的后代元素
• 可以使用其他的选择器,但是建议使用ID选择器
• 可以使用其他的双标签,不能使用HTML和BODY

data:数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂类型数据时,遵守js的语法即可

Vue.js 目录结构

vue2目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式