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

最新推荐文章于 2024-05-13 11:14:34 发布

icoo张某人

最新推荐文章于 2024-05-13 11:14:34 发布

阅读量424

点赞数

分类专栏： Vue 文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/ZerZhang/article/details/127207864

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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}}值也会同样更新。