解读Vue项目文件目录结构，实例化Vue对象，数据和方法

1.创建完vue项目之后有以下文件夹生成

bulid文件夹保存webpack的基本配置
config文件夹保存项目基本配置
node_modiles是npm加载的项目依赖的模块
src目录是要开发的目录 { assets放置图片,common:放置字体文件,components:放置组件,App.vue:项目入口文件}
static文件夹用来存放静态资源文件目录
index.html首页入口文件
package.json项目配置文件

2.实例化Vue对象，数据和方法

2.1实例化对象

//每一个new出来的vue都是一个实例化的对象var vm = new Vue({//这里是代码区
})//vue构造器实例化时需要传入一个选项对象，选项对象包括挂载元素(el),数据(data),方法(methods),模板(tamplate),生命钩子函数等选择

2.2vue的数据和方法

new Vue ({el:"#app",     //el:element 需要获取的元素，一定是html的根元素data:{         //data用来存储数据name:"ZMR",age:22}
})

<!--在html中我可以调用此方法-->
<div id="#app"><h1>{{name}}</h1>     <!--ZMR--><p>{{age}}</p>        <!--22-->
</div>

2.3上面是挂载了元素(el),数据(data),还可以增加一个属性方法methods.

new Vue ({el:"#app",     data:{         name:"ZMR",age:22},methods:{say:function(){return:"欢迎您:" + this.name}}
})

<!--在html中我可以调用此方法-->
<div id="#app"><h1>{{name}}</h1>     <!--ZMR--><p>{{age}}</p>        <!--22--><p>{{say()}}</p>      <!--欢迎您:ZMR-->
</div>

3.让数据挂载到dom中，实现双向数据绑定，开启(MVVM)模式

什么是双向数据绑定:就是当我们改变一个数据的值的时候，这个数据返回所改变的值会根据这个值的改变导致另一个值也随之发生改变，这就是双向数据绑定(v-model)

<div>{{property}}<input type="text"  v-model="property"/>
</div><script>var exampleDate = {property:'Hello ZMR'}new Vue ({el:"#app",data:exampleDate})
</script>

运行时，当input框里面的值发生改变之后，页面上的{{property}}值也会同样更新。

解读Vue项目文件目录结构，实例化Vue对象，数据和方法相关推荐

Vue项目目录结构介绍（三）
前言本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍在上一章,我们通过 vue-cli 创建了一个新的 ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
VUE项目目录结构说明
最近做一些Vue后端开发的简单项目,,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助 ...
vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
vuex构建vue项目如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
jsencrypt vue使用_在Vue项目中使用jsencrypt.js对数据进行加密传输
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. 使用yarn安装至Vue项目 yarn add jsencrypt --dev 或者使用n ...
如何搭建vue项目，完整搭建vue项目
完整开源vue项目第一步npm安装首先:先从nodejs.org中下载nodejs 直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常第二步项目初始化 1.第一步:安装vue ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...

解读Vue项目文件目录结构，实例化Vue对象，数据和方法

解读Vue项目文件目录结构，实例化Vue对象，数据和方法相关推荐

最新文章

热门文章